면도기 MVC 4에서 조건부 값으로 두 번째 CSS 클래스를 추가하는 방법

149

Microsoft는 면도기 MVC4에서 html 속성의 일부 자동 렌더링을 작성했지만 조건부 면도기 표현식을 기반으로 요소에 두 번째 CSS 클래스를 렌더링하는 방법을 찾는 데 상당한 시간이 걸렸습니다. 나는 당신과 그것을 공유하고 싶습니다.

모델 속성 @ Model.Details를 기반으로 목록 항목을 표시하거나 숨기고 싶습니다. 세부 사항이 있으면 div가 표시되어야하며, 그렇지 않으면 숨겨져 야합니다. jQuery를 사용하면 클래스 표시 또는 숨기기를 각각 추가하기 만하면됩니다. 다른 목적으로, 다른 클래스 인 "세부 사항"도 추가하고 싶습니다. 따라서 내 마크 업은 다음과 같아야합니다.

<div class="details show">[Details]</div> 또는 <div class="details hide">[Details]</div>

아래에는 실패한 시도가 있습니다 (자세한 내용이 없다고 가정 한 결과 마크 업).

이 : <div @(@Model.Details.Count > 0 ? "class=details show" : "class=details hide")>,

이것을 렌더링합니다 : <div class="details" hide="">.

이것은 : <div @(@Model.Details.Count > 0 ? "class=\"details show\"" : "class=\"details hide\"")>.

이것을 렌더링합니다 : <div class=""details" hide"="">.

이: <div @(@Model.Details.Count > 0 ? "class='details show'" : "class='details hide'")>

이것을 렌더링합니다 : <div class="'details" hide'="">.

올바른 마크 업은 없습니다.

razor asp.net-mvc-4 html

— 알 슈 뢰르
소스

MvcHtmlString의 새 인스턴스에 랩핑하거나 Html.Raw를 사용하면 첫 번째 솔루션이 모두 작동했을 것입니다.

— Kyle

301

뷰에는 여전히 유효한 논리가있을 수 있다고 생각합니다. 그러나 @BigMike에 동의하는 이런 종류의 경우 모델에 더 적합합니다. 문제는 세 가지 방법으로 해결할 수 있다고 말했습니다.

당신의 대답 (이것이 작동한다고 가정하면, 나는 이것을 시도하지 않았습니다) :

<div class="details @(@Model.Details.Count > 0 ? "show" : "hide")">

두 번째 옵션 :

@if (Model.Details.Count > 0) {
    <div class="details show">
}
else {
    <div class="details hide">
}

세 번째 옵션 :

<div class="@("details " + (Model.Details.Count>0 ? "show" : "hide"))">

— 폰 v.
소스

2

나는 이것이 내 것보다 더 많은 옵션을 제공하기 때문에 이것을 대답으로 받아 들였다.

— R. Schreurs

18

두 번째 옵션은 오류를 발생시킵니다The "div" element was not closed

— intrepidis

6

물론 여기에 쓰여진 것은 완전한 코드가 아니라 문제가되는 코드의 일부입니다. div에 얼마나 많은 다른 요소가 있는지 아는 사람;)

— von v.

나를 위해 작동하지 않았다. 이 오류가 발생했습니다

'ClubsModel' does not contain a definition for 'ClubsFilter' and no extension method 'ClubsFilter' accepting a first argument of type 'ClubsModel' could be found (are you missing a using directive or an assembly reference?)

— Martin Erlic

문제가 게시 된 질문과 어떤 관련이 있습니까?

— 폰 v.

69

이:

    <div class="details @(Model.Details.Count > 0 ? "show" : "hide")">

이것을 렌더링합니다 :

    <div class="details hide">

내가 원하는 마크 업입니다.

— 알 슈 뢰르
소스

1

뷰에 로직을 사용하는 것이 좋지 않습니다. 사소한 로직이라도 getDetailClass () 메서드와 함께 ModelView 객체를 사용하는 것이 좋습니다.

— BigMike

29

개인적으로 나는 사소한 논리를 선호합니다. getDetailCssClass 메소드는 모델이 View를 인식하고 추상화를 분해 함을 의미합니다. HasDetails 메서드를 모델에 추가하여 뷰에 필요한 논리를 줄인 다음 CSS 클래스 논리를 뷰에 그대로 두십시오 @Model.Details.Count > 0. 예<div class="details @(@Model.HasDetails ? "show" : "hide")">

— Chris Diver

26

다음과 같이 모델에 속성을 추가 할 수 있습니다.

    public string DetailsClass { get { return Details.Count > 0 ? "show" : "hide" } }

그러면보기가 더 간단하고 논리가 전혀 포함되지 않습니다.

    <div class="details @Model.DetailsClass"/>

이것은 많은 클래스에서도 작동하며 null 인 경우 클래스를 렌더링하지 않습니다.

    <div class="@Model.Class1 @Model.Class2"/>

2가 아닌 null 속성을 사용하면 렌더링됩니다.

    <div class="class1 class2"/>

class1이 null 인 경우

    <div class=" class2"/>

— syned
소스

11

뷰가 CSS 클래스와 같은 것을 정의하게하는 것이 낫다고 생각합니다. 뷰는 뷰 모델에 영향을주지 않고

— 깊이

1

나는 일반적으로 reddy에 동의하지만, syned가 말하는 방식으로 정당화 할 수있는 경우가있을 수 있습니다. 나는 그것을 정확히 그렇게했습니다. 제 경우에는 뷰를 렌더링하기 위해 정보가 가득한 ViewModel 객체에 의존하고 있습니다. 단지 데이터 객체가 아닙니다.

— Gonzalo Méndez

1

결과가 두 개 이상인 경우 이와 같이 사용합니다. 예를 들어 5 개의 가능한 클래스. 보기에는 지저분 할 것입니다.

— Mateusz Migała

1

보기는 올바른 장소입니다. 코드 블록에서 변수 할당으로 멋지게 서식을 지정하면 지저분하지 않습니다.

— Tom Blodget

3

String.Format 함수를 사용하여 조건에 따라 두 번째 클래스를 추가 할 수 있습니다.

<div class="@String.Format("details {0}", Details.Count > 0 ? "show" : "hide")">

— 체탄 가온 카르
소스