2011-06-13 101 views
3

我想知道是否有一個簡單的方法來做到以下幾點:ASP.NET MVC3嵌套的部分視圖?

假設我有一個博客,我想要一個過去的X條目的主視圖。

對於這些條目中的每一個,我都有一個小標題模板,作者姓名,頭像和帖子正文。

足夠簡單,我可以爲博客條目創建模板,但如果我想通過將另一個部分視圖注入到放置帖子正文的位置來實現多種用途,該怎麼辦?有沒有一種簡單的方法在MVC3中做到這一點。請原諒我,如果這是簡單的,我可能會丟失一個搜索詞:)

下面是一個例子:

模板爲每個「入口」:

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

和示例如何可能在不同的上下文中使用(除了這代表了期望的最終表達式......我想知道是否有辦法將Entry作爲視圖,並動態地將一個局部視圖注入它(在下面的例子中,注射「將用於登錄視圖):

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

任何指導將不勝感激。

謝謝!


編輯:2012-02-12

正如我意見接受的答案指出,我意識到我是真的想要去的MVVM的做法,儘管框架的名稱,可在某些情況下是完全可行的想法。

我在讀anoop的博客文章,提醒我這個問題,我想我會添加一個有趣的替代方案,可能是特別有用的事件,您將採用MVVM方法與ASP.NET MVC 3框架:

通知他如何使用在這篇文章下面的模板: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> 

回答

4

你會使用第一個作爲主視圖

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

檢查該鏈接以獲取更多信息

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

編輯:


你可以擁有的主視圖的hiearchy您的文章觀點也可以有一個佈局。

什麼你也可以做的是從母版視圖模型

「〜/查看/共享/法師繼承您的模型。CSHTML」

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

「〜/查看/共享/ Post.cshtml」

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

「〜/查看/發表/ default.cshtml」

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

凡LogOnModel從PostModel繼承和PostModel繼承自MasterModel

+0

你確定我可以做到這一點嗎?我已經有一個主頁面和頁腳的佈局,這是每個e ntry會出現在該頁眉和頁腳之間。 – Jordan 2011-06-13 13:22:03

+0

,但我應該補充說,這實際上是我正在尋找...沿着@RenderBody()(或每個條目@RenderBody())的行,但「佈局」將特定於該視圖而不會影響主佈局視圖 – Jordan 2011-06-13 13:26:13

+0

是的,您可以擁有主視圖的層次結構。 A可以是B和B的主人可以是C的主人 – Kyle 2011-06-13 21:14:50

相關問題