면도기 뷰 IF를 부분 div로

Question

그 일은 foreach 내부의 IF 조건에 따라 div의 배경색을 변경하려고하는 것이고 모든 단일 조건 (3 조건)에 대한 코드의 전체 복제를 만들고 싶지 않았습니다. 사실은).

내 생각 같은 것을 할이었다

@foreach (var item in Model.Models) 
{ 

     @if (item.Status == "COMPLETED") 
     { 
      <div class="card teal darken-2 white-text"> 
       } 
     @if (item.Status == "NOT STARTED") 
       { 
      <div class="card grey white-text"> 
         } 
     @if (item.Status == "RUNNING") 
     { 
      <div class="card blue white-text"> 
       } 
       <div class="card content"> 

       </div> 

      </div> 
    </div> 
} 

을하지만 HTML없이 폐쇄와 함께 3 명 개의 div가 감지 것으로 보인다는 foreach 문이가 }을 종료해야한다는 반함.

아이디어가 있으십니까?

Answer 1

C# 코드를 일반 텍스트와 혼합하려고하기 때문에 현재 코드가 작동하지 않습니다.

if 조건은 C# 코드 블록을 엽니 다. 그래서 평범한 텍스트 나 HTML을 혼합하고 싶다면 접두어 @:을 사용해야합니다. @:은 다음이 C# 코드가 아니라 일반 텍스트라는 것을 면도기에 알립니다. <text></text> 태그와 같습니다.

귀하는 또한 추가로 닫는 div가 있습니다.

이렇게하면됩니다.

@foreach (var item in Model.SomeCollection) 
{ 
    if (item.Status == "COMPLETED") 
    { 
     @:div class="card teal darken-2 white-text"> 
    } 
    if (item.Status == "RUNNING") 
    { 
     @:div class="card grey white-text"> 
    } 
    <div class="card content">@item.Name</div> 
    @:</div> 
} 

개인적으로보기 내부에 C# 코드를 추가하는 것을 선호합니다. 나는 내 견해를 더 좋아한다. Htmly. 상태 값에 따라 필요한 CSS 클래스를 반환 할 수있는 별도의 메서드를 만듭니다.

다음은 확장 방법입니다.

public static class UiExtensionMethods 
{ 
    public static IHtmlString GetStatusClass(this string item) 
    { 
     switch (item) 
     { 
      case "COMPLETED": 
       return MvcHtmlString.Create("teal darken-2 white-text"); 
      case "RUNNING": 
       return MvcHtmlString.Create("blue white-text"); 
      default: 
       return MvcHtmlString.Create("gray white-text"); 
     } 
    } 
} 

이제이 방법을보기 만하면됩니다.

<div> 
    @foreach (var item in Model.Tags) 
    { 
     <div class="card @item.Status.GetStatusClass()"> 
      <div class="card content"> 
       @item.Status 
      </div> 
     </div>  
    } 
</div> 

에 확장 방법을 만들었습니다. 더 구체적인 유형 (상태 클래스/상태 유형 (열거 형)/컬렉션에있는 각 항목의 유형)으로 만들 수 있습니다.