[转]ASP.net MVC 2 自定义模板来显示数据

本文转自:http://blog.163.com/liaojunbo@126/blog/static/1394892972012113104653651/

在ASP.net MVC 2中,一个很有意思,也很实用的功能,就是可以模板化地显示数据模型。什么叫模板化地显示数据模型呢?MVC可以指定某种数据类型在视图中呈现时,以何种形式来进行呈现。一般情况下,MVC框架会将模型中和各个字段以字符串的形式进行渲染,所以,我们看到的就是字符串。然而,我们有了模板化帮助器,我们可以更加自由地来装饰我们的模型对象。而不是仅仅只是枯燥的字符串了。

假设,我们有如下的模型。

namespace MVC_Demo.Models 

    public class Person 
    { 
        public string Name { get; set; } 
        public int Age { get; set; } 
        public bool Gender { get; set; } 
        public string Introduction { get; set; } 
    } 
}

很明显,如果我们在控制器中返回一个Person对象,

        public ActionResult Index() 
        { 
            Person person = new Person() { Name = "King", Age = 21, Gender = false, Introduction = "This is a handsome man!" }; 
            return View(person); 
        }

直接在视图中渲染这个对象,

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
    <%:Html.DisplayForModel() %> 
    <div style="clear: both"> 
    </div>

</asp:Content>

得到的是这样的结果:

这一定不是我们所希望的,我们想要更加丰富多彩的UI界面,但是又想能达到代码重用的目的。怎么办?

OK,模板化帮助器出场了。

首先要知道,一个模板实际上就是一个ASCX文件(在ASP.net窗体时代,我们把这样的文件叫做用户控件)。

其次,模板的放置是有规定的,在~/Views/Shared/DisplayTemplates下存放的是用于显示数据的模板,在 ~/Views/Shared/EditorTemplates存放的是用于修改数据时所用到的呈现模板。默认情况下VS2010是不会帮我建立这两个文件夹的,需要我们自己来创建。

再者,模板的文件名,可以直接用模板的类型名称直接命名,如果是这样,将来在呈现模型的时候,框架会自动的到 DisplayTemplates文件夹下寻找对应类型名的模板进行呈现。当然,也可以自己定义名称,不过这样将来在呈现模型时,就必须显式地告诉框架,你要使用的模板名称。

在这个例子中,我们 ~/Views/Shared/DisplayTemplates下新建一个Partial View(分部视图)。命名为Person.ascx。

在里面编辑如下的代码:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MVC_Demo.Models.Person >" %>


<div style=" color:red"> 
    <img alt="temp" style="float: left; margin-right:10px;" src="<%: Model.Gender ? ResolveClientUrl("~/Content/images/female.gif") : ResolveClientUrl("~/Content/images/male.gif") %>" /> 
    <div style="float: left; line-height: 2em;"> 
        Name:<%:Model.Name %><br /> 
        age : <%:Model.Age.ToString() %><br /> 
        Introduction: <%:Model.Introduction %> 
    </div> 
    <div style="clear: both"> 
    </div> 
</div>

注意红色字体的部分,因为这个 Partial View要呈现的是一个Person类型的模型,所以,在这里,我们必须显式地指出模型的类型为Person。

接下来,我们不用修改视图代码,也不用修改控制器的代码,你所要做的,就是直接在浏览器里刷新一下,看一下,成什么样子了?

不错吧,哈哈!因为MVC框架自动地在 ~/Views/Shared/DisplayTemplates下找到了跟Person类型同名的模板,所以,默认情况下( 使用<%:Html.DisplayForModel() %>的情况下 )就会用这个模板来进行渲染了。

嘿嘿,还有更绝的。如果我们返回的不是一个对象,而是一个对象列表怎么办?GOOD,我们还可以自己定义一个新的模板,专门用来呈现Person对象的列表。

接下来,我们在 ~/Views/Shared/DisplayTemplates下新建一个分部视图,命名为People.ascx。在里面编辑如下的代码:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<List<MVC_Demo.Models.Person>>" %> 
    <ul style="list-style: none"> 
        <%foreach (MVC_Demo.Models.Person item in Model) 
          {%> 
        <li style="margin-top:20px;"> 
<%:Html.DisplayFor(x => item) %> 
        </li> 
        <%} %> 
    </ul>

同样需要注意红色字体部分,我们可以发现,在代码中,item变量是列表迭代时的一个Person对象引用。我们直接将这个Person进行渲染时,框架同样也会 在~/Views/Shared/DisplayTemplates下找到了跟Person类型同名的模板(Person.ascx)进行单个对象的渲染。这样,我们就达到了代码重用的目的。

好的,接下来,我们修改一下控制器的代码,返回一个Person列表。

        public ActionResult Index() 
        { 
            List<Person> pepole = new List<Person>() 
            { 
                new Person(){ Name = "King", Age = 21, Gender = false, Introduction = "This is a handsome man!"}, 
                new Person(){ Name = "Marry", Age = 23, Gender = true, Introduction = "This is a cool girl!"}, 
                new Person(){ Name = "Tom", Age = 25, Gender = false, Introduction = "This is a Strong man!"} 
            }; 
            return View(pepole); 
        }

修改一下视图的代码(注意红色字体部分):

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<List<MVC_Demo.Models.Person> >" %>


<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> 
    Home Page 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
    <%:Html.DisplayForModel("People" ) %> 
    <div style="clear: both"> 
    </div> 
</asp:Content>

需要,注意,在呈现模型时,我们使用了 DisplayForModel函数一个重载形式,提供了一个字符串参数,这个字符串是模板的文件名,需要注意,我们必须保证框架能在在~/Views/Shared/DisplayTemplates下找到对应的ascx文件。

编译,刷新浏览器,得到结果如下:

太棒了!!!!!

原文地址:https://www.cnblogs.com/freeliver54/p/4301310.html