Question

我使用模型类SchoolViewModel创建了一个局部视图。我能够在桌面上列出产品，但我无法理解如何在Html div标签上绑定产品列表。

这是我的@model IEnumerable Model类

我想要这样的输出 output image

这是我的查看源代码

        <div id="carousel-example" class="carousel slide" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner">

                <div class="item active"> 

                    <div class="row">

                        <div class="col-sm-3 col-xs-12">
                            <div class="col-item">
                                <div class="photo">
                                    <img src="~/image/img/manav-rachna.jpg" class="img-responsive" alt="" />
                                </div>
                                <div class="info">
                                    <div class="row">
                                        <div class="price col-md-12" style="margin-top:-50px">
                                            <img src="~/image/l.jpg" class="pull-left img-thumbnail">
                                            <h5 style="color:#FFFFFF">
                                                &nbsp;&nbsp;
                                                <b>Manav Rachna International School</b><span class="price-text-color">  [ Faridabad ]</span>
                                            </h5>

                                            <a href="#" class="pull-right" style="color:#EAEA00"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></a>
                                        </div>

                                    </div>
                                    <ul>
                                        <li style="float:left;padding:5px"><i class="fa fa-inr"></i>1.90 L/Yr</li>
                                        <li style="float:left;padding:5px"><a href="#">|</a></li>
                                        <li style="float:left;padding:5px"><i class="fa fa-inr"></i>4.1/5 Review</li>



                                    </ul>
                                    <div class="separator clear-left">
                                        <p class="btn-add">
                                            <i class="fa fa-headphones"></i><a href="#" class="hidden-sm">Enquiry</a>
                                        </p>
                                        <p class="btn-details">
                                            <i class="fa fa-list"></i><a href="#" class="hidden-sm">View Details</a>
                                        </p>
                                    </div>
                                    <div class="clearfix">
                                    </div>
                                </div>
                            </div>
                        </div>  





                    </div>    
                </div>    

                <div class="item"><div class="row">
                                      <div class="col-sm-3 col-xs-12">
                                          <div class="col-item">
                                              <div class="photo">
                                                  <img src="~/image/img/manav-rachna.jpg" class="img-responsive" alt="" />
                                              </div>
                                              <div class="info">
                                                  <div class="row">
                                                      <div class="price col-md-12" style="margin-top:-50px">
                                                          <img src="~/image/l.jpg" class="pull-left img-thumbnail">
                                                          <h5 style="color:#FFFFFF">
                                                              &nbsp;&nbsp;
                                                              <b>Manav Rachna International School</b><span class="price-text-color">  [ Faridabad ]</span>
                                                          </h5>

                                                          <a href="#" class="pull-right" style="color:#EAEA00"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></a>
                                                      </div>

                                                  </div>
                                                  <ul>
                                                      <li style="float:left;padding:5px"><i class="fa fa-inr"></i>1.90 L/Yr</li>
                                                      <li style="float:left;padding:5px"><a href="#">|</a></li>
                                                      <li style="float:left;padding:5px"><i class="fa fa-inr"></i>4.1/5 Review</li>



                                                  </ul>
                                                  <div class="separator clear-left">
                                                      <p class="btn-add">
                                                          <i class="fa fa-headphones"></i><a href="#" class="hidden-sm">Enquiry</a>
                                                      </p>
                                                      <p class="btn-details">
                                                          <i class="fa fa-list"></i><a href="#" class="hidden-sm">View Details</a>
                                                      </p>
                                                  </div>
                                                  <div class="clearfix">
                                                  </div>
                                              </div>
                                          </div>
                                      </div>


                    </div> </div>

            </div>
        </div>

Answer 1

在部分视图中，您需要以下内容：

@model IEnumerable<MyWebApplication.MyModel>

<table class="table">
    <tr>
        <th>
            Col1
        </th>
        <th>
            Col2
        </th>
    </tr>

   <tbody>    
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(model => item.PropertyOne)
                </td>
                <td>
                    @HtmlDisplayFor(model => item.PropertyTwo)
                </td>
            </tr>
        }
    </tbody>
</table>

我使用了一个表格DisplayFor，因为它是显示IEnumerable模型的最常见场景，显然你可以在页面中放置任何你喜欢的HTML，它不一定是一个它的工作表。

有关详细信息，请参阅此article。

Answer 2

您在视图中获取模型数据之后非常简单，您只需要遍历数据列表并渲染div或块。像这样

<ul>

@foreach(var item in Model)
{
      <li>item.Name</li>
}

</ul>

这只是一个例子，您可以在foreach循环中添加任何内容，在您的情况下，它必须是您显示顶级学校列表的div

如何在MVC View上绑定数据

2 个答案: