ASP.NET MVC3 Nested Partial Views?

Question

I'm wondering if there's an easy way to do the following:

Say I have a blog where I want a master view of the past X number of entries.

For each of those entries I have a small template for the title, the name of the author, an avatar and the body of the post.

Simple enough that I could template that for blog entries, but what if I wanted to use this template for several purposes by injecting another partial view into where I am placing the body of the post? Is there a simple way to do this in MVC3. Please forgive me if this is simple, I might be missing a search term :)

Here is an example:

Template for each "Entry":

@{
    ViewBag.Title = "_Entry";
}

<link rel="stylesheet" href="@Url.Content("~/css/post.css")" /> 

<section id="content" class="body">
  <hgroup>
    <ol id="posts-list" class="feed">
      <li>
        <article class="entry">
          <header>
            <h2 class="entry-title">
                <a href="#" rel="bookmark" title="Permalink to this POST TITLE">
                </a>
            </h2>
          </header>
          <footer class="post-info">
            <abbr class="published" title="2005-10-10T14:07:00-07:00">
                <!-- YYYYMMDDThh:mm:ss+ZZZZ -->
            </abbr>
            <address class="vcard author">
                <a class="url fn" href="#">
                </a>
            </address>
          </footer>
        </article>
      </li>
      <li>
        <article class="entry">
          <footer class="post-info">
            <address class="vcard author">
                <img src=""></img>      
            </address>
          </footer>
          <!-- /.post-info -->
          <div class="entry-content">
            <p>
            </p>
        </div>
          <!-- /.entry-content --> 
        </article>
      </li>
    </ol>
  </hgroup>
  <!-- /#posts-list --> 
</section>

and an example how it might be used in a different context (except this represents the desired end expression...I'm wondering if there's a way to take the Entry, as a view, and dynamically inject a partial view into it (in the below example, that "injection" would be for the log on view):

@model MyTemplate.Models.LogOnModel

@{
    Page.Title = "Log On";
}

@section HeadContent
{
    <link rel="stylesheet" href="@Url.Content("~/css/openid.css")" />   
    <link rel="stylesheet" href="@Url.Content("~/css/post.css")" />
}
@section ScriptSection
{
    <script type="text/javascript" src="@Url.Content("~/js/libs/openid-jquery.js")"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            openid.init('openid_identifier');
        });
    </script>
    <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js" type="text/javascript"></script>
}

<section id="content" class="body">
  <hgroup>
    <ul id="posts-list" class="feed">
      <li>
        <article class="entry">
          <header>
            <h2 class="entry-title">
                <a href="#" rel="bookmark" title="Permalink to this POST TITLE">
                    Account Login
                </a>
            </h2>
            <p>
                >>
                </br>
                Please enter your username and password. 
                <br />
                <br />
                @Html.ActionLink("Register", "Register") if you don't have an account.
            </p>
          </header>
        </article>
      </li>
      <li>
        <article class="entry">
          <footer class="post-info">
            <address class="vcard author">
                <img src="../img/Hive.png" alt="units" id="gravatar" width="175" height="175" class="imageBorderRadius"></img>      
            </address>
          </footer>
          <!-- /.post-info -->
          <div class="entry-content">
                    @Html.ValidationSummary(true)
                    @using (Html.BeginForm()) {
                        <div>
                            <fieldset>
                                <legend>Account Information</legend>

                                <div class="editor-label">
                                    @Html.LabelFor(m => m.UserName)
                                </div>
                                <div class="editor-field">
                                    @Html.TextBoxFor(m => m.UserName)
                                    @Html.ValidationMessageFor(m => m.UserName)
                                </div>

                                <div class="editor-label">
                                    @Html.LabelFor(m => m.Password)
                                </div>
                                <div class="editor-field">
                                    @Html.PasswordFor(m => m.Password)
                                    @Html.ValidationMessageFor(m => m.Password)
                                </div>

                                <div class="editor-label">
                                    @Html.CheckBoxFor(m => m.RememberMe)
                                    @Html.LabelFor(m => m.RememberMe)
                                </div>

                                <p>
                                    <input type="submit" value="Log On" />
                                </p>
                            </fieldset>
                        </div>
         }
        </div>
          <!-- /.entry-content --> 
        </article>
      </li>
    </ul>
  </hgroup>
  <!-- /#posts-list --> 
</section>

@Html.Partial("_OpenId")

Any guidance would be much appreciated.

Thanks!

Edited: 2012-02-12

As noted in my comments to the accepted answer, I realized I was really trying to go for an MVVM approach which, despite the name of the framework, may be a completely viable idea in some cases.

I was reading a blog post by Anoop that reminded me of this question and I thought I would add an interesting alternative that may be especially useful in the event you are going for an MVVM approach with the ASP.NET MVC 3 framework:

notice how he uses the below template in this post: KsigDo Task Pad – Real-Time UI View Model syncing across users with ASP.NET, SignalR, Knockout MVVM and EF

<script type="text/html" id="taskTemplate">
    <li  style="list-style-image: url('/images/task.png')">
        <input type="checkbox" data-bind="checked: completed" />
        <input class="ui-corner-all" data-bind="value: title, enable: !completed()" />
        <input class="ui-button" type="button" href="#" data-bind="click: remove" value="x"></input>
    </li>
</script>

Kyle · Accepted Answer · 2011-06-13 21:23:14Z

4

You would use the first as a master view

@model MyTemplate.Models.LogOnModel
@ {
     Layout = "~/Views/LAYOUT OF THE MASTER PAGE" ;  
     Page.Title = "Log On";
 }

check this link for more information

http://weblogs.asp.net/scottgu/archive/2010/10/22/asp-net-mvc-3-layouts.aspx

EDIT:

You can have a hiearchy of master views your post view can also have a layout.

What you can also do is inherit your models from the master views model

"~/Views/Shared/Master.cshtml"

@model MyTemplate.Models.MasterModel
@ {
     Page.Title = "Log On";
 }

"~/Views/Shared/Post.cshtml"

@model MyTemplate.Models.PostModel
@ {
     Layout = "~/Views/Shared/master.cshtml" ;  
 }

"~/Views/Post/default.cshtml"

@model MyTemplate.Models.LogOnModel
@ {
     Layout = "~/Views/Shared/Post.cshtml" ;  
     Page.Title = "Log On";
 }

Where LogOnModel inherits from PostModel and PostModel inherits from MasterModel

edited Jun 13, 2011 at 21:23

answered Jun 13, 2011 at 13:04

Kyle

1,1721 gold badge8 silver badges23 bronze badges

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

5 Comments

Jordan Over a year ago

Are you sure I can do this? I already have a master layout with a header and footer. This is for each instance of an entry that would appear between that header and footer.

Jordan Over a year ago

but I should add that this IS essentially what I'm looking for...something along the lines of @RenderBody() (or for each entry @RenderBody()), but where the "layout" would be specific to that view without affecting the master layout view

Kyle Over a year ago

Yes you can have a hiearchy of master views. A can be the master of B and B can be the master of C.

Jordan Over a year ago

ahh okay... that's very simple. I am not sure why it was so difficult to find documentation on this (could be my search terms). Anyways... I will test out later this evening and confirm if it does or does not work. Thanks!

Jordan Over a year ago

Okay so this is definitely an acceptable answer and probably is the best practice (I used a partial view, instead, for the LogOnModel). I don't think I articulated myself clearly, but I realized what I was trying to go for was my attempt to make MVC more MVVM-like (I've been working with Silverlight for the past two years) :P

Collectives™ on Stack Overflow

ASP.NET MVC3 Nested Partial Views?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related