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

本文转自:http://blog.163.com/[email protected]/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文件。

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

太棒了!!!!!

时间: 2024-08-03 23:36:43

[转]ASP.net MVC 2 自定义模板来显示数据的相关文章

asp.net mvc输出自定义404等错误页面,非302跳转。

朋友问到一个问题,如何输出自定义错误页面,不使用302跳转.当前页面地址不能改变. 还要执行一些代码等,生成一些错误信息,方便用户提交反馈. 500错误,mvc框架已经有现成解决方法: filters.Add(new HandleErrorAttribute()); 404错误目前想到的解决方法: 先上代码 Global.asax: 1 protected void Application_Error(object sender, EventArgs e) 2 { 3 var ex = Serv

转:【译】Asp.net MVC 利用自定义RouteHandler来防止图片盗链

[译]Asp.net MVC 利用自定义RouteHandler来防止图片盗链 你曾经注意过在你服务器请求日志中多了很多对图片资源的请求吗?这可能是有人在他们的网站中盗链了你的图片所致,这会占用你的服务器带宽.下面这种方法可以告诉你如何在ASP.NET MVC中实现一个自定义RouteHandler来防止其他人盗链你的图片. 首先,我们来回顾一下当一个请求发往ASP.net MVC站点时的情景,IIS收到请求并将请求转到ASP.net,然后根据URL,或者更确切来说:被请求文件的扩展名.在IIS

【转】Asp.net MVC 通过自定义ControllerFactory实现构造器注入(重写DefaultControllerFactory)

[转]Asp.net MVC 通过自定义ControllerFactory实现构造器注入 一.重写ControllerFactory的GetControllerInstance ControllerFactory是asp.net中用于在运行时构造Controller的工厂 ,默认使用的工厂在构造Controller时,默认调用Controller的无参构造函数,所以要实现构造器注入,需要重写工厂中构造Controller的方法GetControllerInstance: 1 public cla

ASP.NET MVC 入门7、Hellper与数据的提交与绑定

View视图 我们可以手写HTML代码, 也可以采用基类提供的Helper类完成HTM代码. 示例: <%=Html.ActionLink("首页","index","Home")%> 生成的HTML代码就是:<a href="/Home/Index">首页</a> 生成的HTML代码取决于Global.asax中配置的Route顺序. 数据显示 数据绑定 <p> <lab

ASP.NET MVC 入门8、ModelState与数据验证

数据验证包括服务器端验证和客户端的验证, 本文介绍的MVC数据库端的数据验证实现. 客户端的数制验证可以使用JQuery的验证插件来实现. Html.ValidationMessage()的时候,就是从ViewData.ModelState中检测是否有指定的KEY,如果存在,就提示错误信息. ValidationMessage(modelName) 指定控件的验证错误信息; ValidationSummary() 表单所有控件的验证错误信息. 验证未通过, 目标控件和验证错误信息HTML标签,都

[转]ASP.NET MVC 入门8、ModelState与数据验证

ViewData有一个ModelState的属性,这是一个类型为ModelStateDictionary的ModelState类型的字典集合.在进行数据验证的时候这个属性是比较有用的.在使用Html.ValidationMessage()的时候,就是从ViewData.ModelState中检测是否有指定的KEY,如果存在,就提示错误信息.例如在前一篇文章ASP.NET MVC 入门7.Hellper与数据的提交与绑定中使用到的UpdateModel方法: 我们在View中使用Html.Vali

MVC 5使用ViewData(模型)显示数据

看过此篇<MVC 5使用ViewData(对象)显示数据>http://www.cnblogs.com/insus/p/3377178.html 都明白在控制器使用ViewData(object)进行传递数据给View(视图).现在在这基础之上,使用ViewData(模型)来从控制器传递数据给视图. 操作上均是相同的步骤,只是在控制器与视图中写代码不相同而已.在下图中,我们只是comment out #23和#25行代码,改为#27行代码.是直接把实例对象传入View()中. 接下来,看看视图

MVC 5使用ViewData(对象)显示数据

控制器协调处理好数据之后,是交由视图来显示数据.在控制器与视图交互有一个是ViewData.这次练习,Insus.NET就以它来做实例. 前些时间,Insus.NET实现的练习中,也有从控制器传数据给视图的,如:<DataTable数据显示于MVC应用程序>http://www.cnblogs.com/insus/p/3361182.html<MVC用非Entity Framework将数据显示于视图>http://www.cnblogs.com/insus/p/3364235.h

MVC 5使用ViewBag(对象)显示数据

前面Insus.NET有演示使用ViewData来实现控制器与视图的通讯.如果想了解的话,可以从下面两个链接可以查看:<MVC 5使用ViewData(对象)显示数据>http://www.cnblogs.com/insus/p/3377178.html<MVC 5使用ViewData(模型)显示数据>http://www.cnblogs.com/insus/p/3377217.html 此篇是学习另外一个方式,是使用ViewBag(object)来实现控制器与视图之间的交互. 在