N2CMS Mvc Examples 学习记录 (4) – 母版页和视图

看母版页和视图会看到很多呈现方面的细节，包括如何使用N2的一些工具类来生成导航菜单、站点路径，如何在页面中放一个Zone（用于容纳Parts），以及如何显示模型对象的数据。不过N2CMS的API文档不是很详细，甚至根本没有说明，有时候不容易想出来一些方法具体实现的什么功能。

1. 母版页（Site.Master）

（1）显示管理工具栏

   1: <n2:SlidingCurtain runat="server">

   2:     <n2:DragDropControlPanel runat="server" />

   3: n2:SlidingCurtain>

加上这段代码，管理员登录后可以在页面左看到管理面板工具栏。

（2）生成导航菜单

   1: <ul id="mainMenu">

   2:     <li><a href="<%= N2.Find.StartPage.Url %>">Homea>li>

   3:     <%= N2.Web.Tree.From(N2.Find.StartPage, 2).Filters(new N2.Collections.NavigationFilter()).ExcludeRoot(true)%>

   4:     <li><%= Html.ActionLink("Static controller", "Items", "Static", new { id = "from the menu" }, null)%>li>

   5: ul>

N2.Find.StartPage获取到起始页（即首页）的内容项。

N2.Web.Tree.From从指定内容项（这里是起始页）开始查找树结果，查找的深度为2层，并从中用导航过滤器找到所有的内容项，再排除根（即起始页，这个已经显示过了），最后以LI呈现出来。

（3）左边栏内容

   1: <div class="leftColumn">

   2:     <h2><%= N2.Utility.Evaluate(N2.Find.AtLevel(N2.Find.CurrentPage, N2.Find.StartPage, 2), "Title") %>h2>

   3:     <ul>

   4:         <%= N2.Web.Tree.Between(N2.Find.CurrentPage, N2.Find.StartPage, true, 2).Filters(new N2.Collections.NavigationFilter()).ExcludeRoot(true) %>

   5:     ul>

   6:     <% Html.DroppableZone("Left").Render(); %>

   7: div>--/leftColumn-->

N2.Find.AtLevel(N2.Find.CurrentPage, N2.Find.StartPage, 2)，第一个参数（当前页）是终点（子结点），第二个参数（起始页）是起点（父结点），这两个参数构成了一个树，在这个树结构内从起点确定深度为2级的项，然后用N2.Utility.Evaluate尝试获取它的标题。

N2.Web.Tree.Between(N2.Find.CurrentPage, N2.Find.StartPage, true, 2)应该是找出前两个参数之间的项，第三个参数不是很理解，第四个参数表示开始的层次，这里是从第2层开始，即起始页将不在内。找出来的项不一定都要显示出来，比如新闻容器下的新闻项就不应该显示出来，另外这些项的根顶也不需要，所以后面的工作就是过滤和排除，最后把项用LI呈现。

最后的<% Html.DroppableZone("Left").Render; %>是在此处呈现一个名为"Left"的Zone，这里可以在管理界面中把TextPart放到这里。

（4）右边栏内容

   1: <div class="rightColumn">

   2:     <p>

   3:     <% foreach(N2.ContentItem item in N2.Find.EnumerateBetween(N2.Find.StartPage, N2.Find.CurrentPage, false)) { %>

   4:         <%= N2.Web.Link.To(item) %> /

   5:     <% } %>

   6:     <%= N2.Utility.Evaluate(N2.Find.CurrentPage, "Title") %>

   7:     p>

   8:     <asp:ContentPlaceHolder ID="MainContentPlaceHolder" runat="server">

   9:     asp:ContentPlaceHolder>

  10: div>--/rightColumn-->

N2.Find.EnumerateBetween(N2.Find.StartPage, N2.Find.CurrentPage, false)返回两个内容项之间的所有项的迭代（IEnumerable），false排除了最深层的页面，即当前页面。<%= N2.Web.Link.To(item) %>显示到这些项的链接。最后显示当前页的标题：<%= N2.Utility.Evaluate(N2.Find.CurrentPage, “Titlt”) %>。

下面的占位符把呈现工作交给各个视图模板来实现了。

2. 视图模板

（1）Content/Index.aspx

   1: <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" Inherits="ViewPage" %>

   2: <%@ Import Namespace="MvcTest.Models"%>

   3: <asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">

   4: <h1>< %= Model.Title % >h1>

   5: < %= Model.Text % >

   6: asp:Content>

显示ContentPage中的标题（Title）和文本（Text），后者本身就是富文本，直接显示就行了。

（2）News/*

a. News.aspx

   1:  <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="ViewPage" %>

   2:  <%@ Import Namespace="MvcTest.Views.News"%>

   3:  <asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">

   4:      <h1><%= Model.News.Title %>h1>

   5:      <%= Model.News.Text%>

   6:      <div class="comments">

   7:      <% foreach (MvcTest.Models.CommentItem comment in Model.Comments){ %>

   8:          <div>

   9:              <h3><%= comment.Title %>h3>

  10:              <%= comment.Text %>

  11:          div>

  12:      <%} %>

  13:      div>

  14:      <hr />

  15:      <%= N2.Web.Link.To(Model.Back).Text("Back").Class("back") %>

  16:      <%= Html.ActionLink("Comment", "Comment", new { @class = "comment" }) %>

  17:  asp:Content>

.csharpcode, .csharpcode pre{font-size: small;color: black;font-family: consolas, "Courier New", courier, monospace;background-color: #ffffff;/*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt {background-color: #f4f4f4;width: 100%;margin: 0em;}.csharpcode .lnum { color: #606060; }

（换了个插入代码的插件，原来用的也挺好，不过对<% %>支持不好，现在好了。）

这里用到了NewViewData类，定义如下：

   1:  public class NewsViewData

   2:  {

   3:      public ContentItem Back { get; set; }

   4:      public NewsPage News { get; set; }

   5:      public IEnumerable Comments { get; set; }

   6:  }

.csharpcode, .csharpcode pre{font-size: small;color: black;font-family: consolas, "Courier New", courier, monospace;background-color: #ffffff;/*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt {background-color: #f4f4f4;width: 100%;margin: 0em;}.csharpcode .lnum { color: #606060; }

控制器负责创建NewsViewData而不是NewsPage的实例并传递给视图。

视图模板中的第15行显示后退到新闻列表页面的链接，第16行则产生到添加评论表单的链接，写法不同。

b. Comment.aspx

   1:  <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="ViewPage" %>

   2:  <%@ Import Namespace="MvcTest.Models"%>

   3:  <%@ Import Namespace="MvcTest.Controllers"%>

   4:  <asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">

   5:      <% Html.BeginForm("Submit", "News"); %>

   6:          <h1><%= string.Format("Add comment to '{0}'", Model.Title) %>h1>

   7:          <p>

   8:              <label>Subjectlabel>

   9:              <%= Html.TextBox("title") %>

  10:          p>

  11:          <p>

  12:              <label>Commentlabel>

  13:              <%= Html.TextArea("text", "") %>

  14:          p>

  15:          <p>

  16:              <input type="submit" />

  17:              <%= Html.ActionLink("Back", "index") %>

  18:          p>

  19:      <% Html.EndForm(); %>

  20:  asp:Content>

这个表单会提交给NewsController的Submit这个Action，最终被存储到数据库中。

（3）NewsContainer/Index.aspx

   1:  <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="ViewPage" %>

   2:  <%@ Import Namespace="MvcTest.Views.NewsContainer"%>

   3:  <asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">

   4:      <h1><%= Model.Container.Title %>h1>

   5:      <ul class="newsList">

   6:      <% foreach (MvcTest.Models.NewsPage item in Model.News) { %>

   7:          <li><%= N2.Web.Link.To(item) %>li>

   8:      <% } %>

   9:      ul>

  10:  asp:Content>

新闻容器页面，显示新闻项列表。这里也用到了视图数据类，NewsContainerViewData：

   1:  public class NewsContainerViewData

   2:  {

   3:      public Models.NewsContainer Container { get; set; }

   4:      public IEnumerable News { get; set; }

   5:  }

.csharpcode, .csharpcode pre{font-size: small;color: black;font-family: consolas, "Courier New", courier, monospace;background-color: #ffffff;/*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt {background-color: #f4f4f4;width: 100%;margin: 0em;}.csharpcode .lnum { color: #606060; }

不必多说，继续。.csharpcode, .csharpcode pre{font-size: small;color: black;font-family: consolas, "Courier New", courier, monospace;background-color: #ffffff;/*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt {background-color: #f4f4f4;width: 100%;margin: 0em;}.csharpcode .lnum { color: #606060; }

（4）TextPart/Index.ascx

   1:  <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

   2:  <%= Html.DisplayContent("Text") %>

.csharpcode, .csharpcode pre{font-size: small;color: black;font-family: consolas, "Courier New", courier, monospace;background-color: #ffffff;/*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt {background-color: #f4f4f4;width: 100%;margin: 0em;}.csharpcode .lnum { color: #606060; }

它可以嵌入到母版页中左边栏上定义的Zone内。