web-dev-qa-db-ja.com

razor foreachでインデックス値を取得する

私はパーシャルをレンダリングするビューのかみそりforeachループでList<T>を繰り返しています。パーシャルでは、1つのレコードをレンダリングします。このレコードでは、ビューに4つ続けて表示します。 2つの終了列にcssクラスがあるので、呼び出しが1番目のレコードか4番目のレコードかを部分的に決定する必要があります。パーシャルでこれを識別して正しいコードを出力する最良の方法は何ですか？

これはループを含む私のメインページです。

@foreach (var myItem in Model.Members){

        //if i = 1
        <div class="grid_20">
        <!-- Start Row -->

        //is there someway to get in for i = 1 to 4 and pass to partial?
        @Html.Partial("nameOfPartial", Model)

        //if i = 4 then output below and reset i to 1
        <div class="clear"></div>
        <!-- End Row -->
        </div>

}

各パスで更新できるintを作成し、テキストをここで問題なくレンダリングできると考えていますが、関心のあるパーシャルに整数値を渡しています。より良い方法がない限り。

ここに私の部分的です：

@{
switch()
case 1:
        <text>
        <div class="grid_4 alpha">
        </text>
break;
case 4:
        <text>
        <div class="grid_4 omega">
        </text>
break;
default:
        <text>
        <div class="grid_4">
        </text>
break;
}

        <img src="Content/960-grid/spacer.gif" style="width:130px; height:160px; background-color:#fff; border:10px solid #d3d3d3;" />
        <p><a href="member-card.html">@Model.Name</a><br/>
        @Model.Job<br/>
        @Model.Location</p>
</div>

今日は金髪の日を過ごしているかどうかはわかりませんが、これは恐ろしく簡単ですが、int値を渡す最良の方法は考えられません。誰かが助けてくれることを願っています。

asp.net-mvcasp.net-mvc-2razorpartial-views
49
lloydphillips
 @{int i = 0;}
 @foreach(var myItem in Model.Members)
 {
     <span>@i</span>
     i++;
 }
125
noamtcohen
//this gets you both the item (myItem.value) and its index (myItem.i)
@foreach (var myItem in Model.Members.Select((value,i) => new {i, value}))
{
    <li>The index is @myItem.i and a value is @myItem.value.Name</li>
}

私のブログ投稿の詳細 http://jimfrenette.com/2012/11/razor-foreach-loop-with-index/

64
Jim Frenette

または、単にこれを行うことができます：

@foreach(var myItem in Model.Members)
{    
    <span>@Model.Members.IndexOf(myItem)</span>
}
6
Manoj De Mel

Linqを使用した このソリューションを見てください。 彼の例は、3番目のアイテムごとに異なるマークアップが必要であるという点で似ています。

foreach( var myItem in Model.Members.Select(x,i) => new {Member = x, Index = i){
    ...
}
5
brightgarden

CSSセレクターを使用して最初の要素と最後の要素をスタイル設定しないのは、カスタムクラスをアタッチするのではなく、理由があるのですか？アルファまたはオメガに基づくスタイル設定の代わりに、最初の子と最後の子を使用します。

http://www.quirksmode.org/css/firstchild.html

3
Timothy Strimple

上記のすべての答えには、ビュー内のロジックが必要です。ビューは愚かで、可能な限りロジックが少ない必要があります。リスト内の位置に対応するプロパティをビューモデルに作成してみてください。例：

public int Position {get; set}

ビューモデルビルダーで、位置1〜4を設定します。

しかし..さらにきれいな方法があります。 CSSクラスをビューモデルのプロパティにしてみませんか？したがって、パーシャルのswitchステートメントの代わりに、次のようにします。

<div class="@Model.GridCSS">

Switchステートメントをビューモデルビルダーに移動し、そこでCSSクラスを設定します。

0
Louise Eggleton

次のようなビューのforeachループで、モデルからの参照をカウントする場合（つまり、クライアントは参照としてアドレスを持っているため、クライアントに存在するアドレスの数をカウントしたい場合）

 @foreach (var item in Model)
                        {
                            <tr>
                                <td>
                                    @Html.DisplayFor(modelItem => item.DtCadastro)
                                </td>

                                <td style="width:50%">
                                    @Html.DisplayFor(modelItem => item.DsLembrete)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.DtLembrete)
                                </td>
                                <td>
                                    @{ 
                                        var contador = item.LembreteEnvolvido.Where(w => w.IdLembrete == item.IdLembrete).Count();
                                    }
                                    <button class="btn-link associado" data-id="@item.IdLembrete" data-path="/LembreteEnvolvido/Index/@item.IdLembrete"><i class="fas fa-search"></i> @contador</button>
                                    <button class="btn-link associar" data-id="@item.IdLembrete" data-path="/LembreteEnvolvido/Create/@item.IdLembrete"><i class="fas fa-plus"></i></button>
                                </td>
                                <td class="text-right">
                                    <button class="btn-link delete" data-id="@item.IdLembrete" data-path="/Lembretes/Delete/@item.IdLembrete">Excluir</button>
                                </td>
                            </tr>
                        }

コーディングされたとおりに行う：

@{ var contador = item.LembreteEnvolvido.Where(w => w.IdLembrete == item.IdLembrete).Count();}

次のように使用します：

<button class="btn-link associado" data-id="@item.IdLembrete" data-path="/LembreteEnvolvido/Index/@item.IdLembrete"><i class="fas fa-search"></i> @contador</button>

ps：これがIEnumerableモデルの場合、たとえば、インデックスアクションコントローラー内のDbContextで、その参照にINCLUDEを追加することを忘れないでください。

0
BerBar

IndexOfはここで役立つようです。

@foreach (myItemClass ts in Model.ItemList.Where(x => x.Type == "something"))
    {
       int currentIndex = Model.ItemList.IndexOf(ts);
       @Html.HiddenFor(x=>Model.ItemList[currentIndex].Type)

...

0
user2464265