有條件地更改剃刀視圖中的CSS類

我需要使用'forumChild'類更改<div>標記的CSS類。它必須改變foreach循環的每3個循環。有條件地更改剃刀視圖中的CSS類

有沒有辦法從控制範圍內做到這一點？

<div class="Forum"> 
    <p>The Forum</p> 

      @foreach (var item in Model) 
      {    
       <div class="ForumChild"> 

        <img src="@item.Blog.Image.img_path" alt="Not Found" /> 

        <br /> 
          @foreach (var comment in item.Blog.comment) 
          { 

           var db = new ACapture.Models.ACaptureDB(); 

           var Name = from p in db.Profile.AsEnumerable() 
              where (p.AccountID == comment.AccountID) 
              select p;        
          <section> 
            <div> 
             <a href="@Url.Action("Index", "Home")">@foreach (var y in Name) 
                       { @(y.FirstName + " " + y.LastName + ":"); 
                       }</a> 
            </div> 
            <div> 
             @comment.Commentation 
            </div> 
          </section> 
          } 
       </div>     
      } 
</div>

在此先感謝

來源

2012-08-02 dright

@{ 
    int counter=0; 
} 
@foreach (var item in Model) 
{ 
    counter++; 
    <div class="@(counter<=3 ? "classRed":"classBlue")"> 
     <img src="@item.Blog.Image.img_path" alt="Not Found" /> 
     //other markup also here 

    </div> 
    if (counter == 6) 
    { 
     counter = 0; 
    } 

}

凡classRed和classBlue是CSS類

來源

2012-08-02 20:50:59 Shyju

如果我有多個calsses，除了2，我能在這裏做什麼？ – 2016-10-10 10:55:50

我們如何處理這個問題：

1）您需要創建的helper方法，將通過一些代碼返回CSS類。

string GetDivClass(int code) 
{ 
    var classes = new [] {"first", "second", "third"}; 
    return classes[code]; 
}

2）創建計數器/索引並在循環中每增加一次。

3）調用類似GetDivClass(index % 3)的幫助方法在div元素處。

只有POC，所以不要在真正的應用程序中使用它（你需要一個驗證邏輯而動「類」初始化添加到另一個地方）。

來源

2012-08-02 20:30:09 user854301

你的榜樣，它可能是最好做的函數內部的模運算。通過這種方式，調用者不需要知道它有多少個項目，並且您還可以在未破壞現有代碼的情況下添加更多項目。 – Matthew 2012-08-02 20:57:57

好評，但在佈局上理解這種方法返回真實性會很棘手。也許最好在方法中添加一些css類組名（GetDivClass（string cssClassesGroup，int code）。）。 – user854301 2012-08-02 21:13:49

你可以寫任何代碼，你喜歡到一個Razor視圖，所以做你的思維，你可以做這樣的事情是什麼（我省略了大部分的內東西）：

@{ 
    var className = "ForumChild"; 
} 
<div> 
    @for (int i = 0; i < Model.Count; i++) 
    { 
     var item = Model[i]; 
     if (i % 3 == 0) 
      className = GetNewClassName(); // Or whatever 
     <div class="@className"> 
     </div> 
    } 
</div>

來源

2012-08-02 20:30:22

-1

您可以添加一個計數器變量，從1開始，並在循環中遞增。請與if語句是％真實，更改類名

@{ int counter = 1;} 

@foreach (var item in Model) 
{ 

if((counter % 3) ==0) 
{ 
<div class="ChangedName"> 
} 
else 
{ 
<div class="ForumChild"> 
} 
i++;

來源

2012-08-02 20:32:38 HatSoft

這不支持剃刀，因爲它會抱怨無法匹敵的標籤 – yano 2014-02-27 02:48:40

有條件地更改剃刀視圖中的CSS類

回答

相關問題