소개

.NET MVC에서 뷰를 만들 때 사용하는 Razor이지만 전달 된 데이터에서 동적으로 클래스 속성을 만들고 적용 할 때 함정에 빠졌습니다.

주제

우선은 아래의 코드를 봐

@{
    var isEdit = true;

    var className = "baseClassName";

    <div class="@className">1</div>

    if (isEdit)
    {
        className += " isEdit";
    }

    <div class="@className">2</div>
}

이와 같이 적용하고 싶은 클래스명을 캐릭터 라인으로 구축해 맞출 수가 있습니다.

이번에는 "isEdit"라는 플래그를 로컬로 만들어 버렸습니다만, 정말로 모델로부터 건네져 오는 것 같은 값이라고 생각해 주세요.
그릴 때 이것으로 여러 가지 분기하는 역할입니다.

@를 사용하면 변수를 적용할 수 있습니다만, 이것만이 더블 쿼트 안에 들어 있다고 하는 것이 익숙하지 않으면 위화감 있네요.
이때 다음과 같이 더블 쿼트가 없으면 무려 ...

@{
    var isEdit = true;

    var className = "baseClassName";

    <div class=@className>1</div>

    if (isEdit)
    {
        className += " isEdit";
    }

    <div class=@className>2</div>
}

스페이스 이후가 class 속성의 값이 되지 않게 되어, 독립한 수수께끼의 속성이 되고 있습니다.

Razor는 마음대로 좋은 느낌으로는주지 않습니다.
속성 적용시에는 더블 쿼트를 반드시 붙이십시오.

결론

이번은 class 속성이었습니다만, id등 그 외의 속성에서도 같습니다.

이 버그로 몇 시간이 걸렸습니다.
저는 평소 자바스크립트 뿐이므로 .NET MVC는 정말 움직임이 잡기 어려워…