Question

我正在使用bootstrap并尝试使用面板组件来呈现查找项。它渲染得非常好，但这都是手工编码的。

<div class="row">
<div class="col-md-4">
    <div class="panel panel-primary">
        <div class="panel-heading">
            Item Number 1
        </div>
        <div class="panel-body">Image Carousel Goes Here</div>
        <div class="panel-footer">
            <table>
                <tr>
                    <td>Field</td>
                    <td>Value</td>
                </tr>
                <!-- etc. -->
            </table>
        </div>
    </div>
</div>
    <div class="col-md-4">
    <div class="panel panel-primary">
        <div class="panel-heading">
            Item Number 1
        </div>
        <div class="panel-body">Image Carousel Goes Here</div>
        <div class="panel-footer">
            <table>
                <tr>
                    <td>Field</td>
                    <td>Value</td>
                </tr>
                <!-- etc. -->
            </table>
        </div>
    </div>
</div>
</div>

JSFiddle是here.

我想知道怎样才能做出类似的事情：

<div class="row">
   @(foreach Item item in items)
   {
        @RenderItemView(item);
   }
</div>

我可以将所有“div.col-md-4 ... slash div”代码转储到另一个cshtml文件中并将其用作组件并将模型传递给它？

我知道我可以做到这一点，但我更愿意将其作为可重复使用的组件。

 <div class="row">
    @foreach(Item item in items)
    {
         // instead of using a component, setting the panel-heading off item.Number,
         // panel-body by a foreach on item.ImageUrls, etc.
    }
 </div>

基本上，我认为子组件将是局部视图，但是将模型传递给它并在该点渲染的常规方法是什么（基本上，就像@RenderBody在布局上工作一样）

Answer 1

您可以创建一个包含此内容的部分视图：

@model IEnumerable<ItemType>

<div class="row">
    @foreach(var item in Model)
    {
         // instead of using a component, setting the panel-heading off item.Number,
         // panel-body by a foreach on item.ImageUrls, etc.
    }
</div>

将部分视图保存在Views / Shared文件夹中，以便它随处可用。然后使用它：

@{Html.RenderPartial("YourPartialView", Model.Items);}

制作用于在ASP.NET MVC中传递模型的模板

1 个答案: