Making templates for passing model to in ASP.NET MVC

Question

I'm using bootstrap and attempting to use the panel component for rendering lookup items. It renders perfectly fine, but this was all hand coded.

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

A JSFiddle is here.

I'm wondering how it'd be possible to do something like:

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

where I could dump all of the "div.col-md-4 ... slash div" code into another cshtml file and use it as a component and just pass the model to it?

I know that I could do this, but would prefer to make this a reusable component.

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

Basically, the subcomponent will be a partial view, I think, but what is the normal way of passing a model to it and it rendering at that spot (basically, like @RenderBody works on layout)

Jason Evans · Accepted Answer · 2013-11-26 20:44:32Z

1

You could create a partial view which holds this content:

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

Save the partial view in the Views/Shared folder, so that it's available everywhere. Then to use it:

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

answered Nov 26, 2013 at 20:44

Jason Evans

29.2k16 gold badges95 silver badges157 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robert Over a year ago

Thanks, that seems much cleaner than the way I've been doing it.

Collectives™ on Stack Overflow

Making templates for passing model to in ASP.NET MVC

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related