Question

我的模型填充了6个数据行，但我想在开头只显示3行，然后我想添加“显示更多”anchor标记以显示另外3行。

   <div class="panel panel-default">
                    @foreach (var item in Model.EmployeeRecords)
                    {
                      <div class="panel-body">
                         @Html.Raw(item.Name) //want to display 3 rows only
                      </div>                                       
                    }
                </div>

              <a id="ShowMore" href="#">Show More</a>
                <div id="Showcontainer">
                    <div class="panel panel-default">
                        <div class="panel-body">
                         //Want to show another 3 rows here
                        </div>
                    </div>                    
                </div>

Answer 1

试试这个：

<div class="panel panel-default">
                        @foreach (var item in Model.EmployeeRecords.Take(3))
                        {
                          <div class="panel-body">
                             @Html.Raw(item.Name) //want to display 3 rows only
                          </div>                                       
                        }
                    </div>

                  <a id="ShowMore" href="#">Show More</a>
                    <div id="Showcontainer">
                        <div class="panel panel-default">
@foreach (var item in Model.EmployeeRecords.Skip(3))
                        {
                            <div class="panel-body">
                             @Html.Raw(item.Name) //Want to show another 3 rows here
                            </div>
                           }
                        </div>                    
                    </div>

Answer 2

@{ var EmployeeRecordsArray = Model.EmployeeRecords.ToArray();}

<div class="panel panel-default">
    @for (int i = 0; i < 3; i++)
    {
        <div class="panel-body">
            @Html.Raw(EmployeeRecordsArray[i].Name) //want to display 3 rows only
        </div>
    }
</div>

<a id="ShowMore" href="#">Show More</a>
<div id="Showcontainer">
    <div class="panel panel-default">
        @for (int i = 3; i < EmployeeRecordsArray.Length; i++)
        {
            <div class="panel-body">
                @Html.Raw(EmployeeRecordsArray[i].Name) //want to display 3 rows only
            </div>
        }
    </div>
</div>

OR

<div class="panel panel-default">
                        @{int i = 0;}
                        @foreach (var item in Model.EmployeeRecords)
                        {
                          if(i<3){
                          <div class="panel-body">
                             @Html.Raw(item.Name) //want to display 3 rows only
                          </div>
                          i++;
                          }
                          else{
                           break;
                           }                                    
                        }
                    </div>

                  <a id="ShowMore" href="#">Show More</a>
                    <div id="Showcontainer">
                        <div class="panel panel-default">
                            @{int j = 0;}
                        @foreach (var item in Model.EmployeeRecords)
                        {
                          if(j>2){
                          <div class="panel-body">
                             @Html.Raw(item.Name) //want to display 3 rows only
                          </div>
                          }     
                          j++;                                
                        }
                        </div>                    
                    </div>

如何限制MVC中模型填充的数据？

2 个答案: