web-dev-qa-db-ja.com

RazorビューでCSSクラスを条件付きで変更する

<div>タグのCSSクラスを 'forumChild'クラスで変更する必要があります。 foreachループの3ループごとに変更する必要があります。

コントロール内からこれを行う方法はありますか？

<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>

前もって感謝します

c#cssasp.net-mvc-3razor
19
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クラスです

49
Shyju

この問題の処理方法：

1）何らかのコードでcssクラスを返すヘルパーメソッドを作成する必要があります。

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

2）カウンター/インデックスを作成し、毎回ループでインクリメントします。

3）div要素でGetDivClass(index % 3)などのヘルパーメソッドを呼び出します。

PS

これはPOCのみであるため、実際のアプリケーションでは使用しないでください（検証ロジックを追加し、「クラス」の初期化を別の場所に移動する必要があります）。

4
user854301

好きなコードを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>
2
Steve Czetty