[转]Asp.net Mvc2中重构View的三种方式

本文转自:http://www.cnblogs.com/zhuqil/archive/2010/07/14/asp-net-mvc2-view-refactoring.html

我们在Asp.net mvc的view开发过程中,如果不注意可能会写大量的重复的代码。这篇文章介绍3种方式重构View的代码,来减少View中的重复代码。

   1、母板页

在Asp.net mvc中保留了母板页的使用,我们可以使用母板页对我们的站点进行布局。看下面母板页的代码:

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="http://www.cnblogs.com/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="page">
        <div id="header">
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                <%= Html.Action("LogOnWidget", "Account") %>
            </div>
            <div id="menucontainer">
                <ul id="menu">
                    <li><%= Html.ActionLink("Home", "Index", "Home")%></li>
                    <li><%= Html.ActionLink("Profiles", "Index", "Profile")%></li>
                    <li><%= Html.ActionLink("About", "About", "Home")%></li>
                </ul>
            </div>
        </div>
        <div id="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />
            <div id="footer"></div>
        </div>
    </div>
</body>
</html>

在Asp.net mvc中使用母板页和Web Form中类似,需要定义ContentPlaceHolder,加上使用一些常用的HTML标签进行布局。 当多个页面都有同样的内容的时候,使用母板页是非常有用的。

2、Partial

Partial类似于Web Form中的用户控件。用它来渲染成内容页,使用Partial最大的好处是这些代码段定义在View页面,而不是代码中。下面举例说明:

渲染partial非常简单,我们可以在父View中使用RenderPartial和Partial方法,Profiles的代码如下,在Profiles中使用RenderPartial渲染Profile。

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<Profile>>" %>
<h2>Profiles</h2>
<table>
    <tr>
        <th>Username</th>
        <th>First name</th>
        <th>Last name</th>
        <th>Email</th>
    </tr>
    <% foreach (var profile in Model) { %>
        <% Html.RenderPartial("Profile", profile); %>
    <% } %>
</table>

上面的代码,我将一个profile的List渲染成一个table。每一行定义了一个Partial,用来渲染成一行。即使内容页不能与其他View分享,在一个View中使用partial可以简化和减少HTML的标签数量。RenderPartial方法需要一个partial名字和一个Model参数。根据的partial名字用来搜索本地的partial文件,需遵循下面的规则:

1 <Area>\<Controller>\<PartialName>.aspx and .ascx 
    2 <Area>\Shared\<PartialName>.aspx and .ascx 
    3 \<Controller>\<PartialName>.aspx and .ascx 
    4 \Shared\<PartialName>.aspx and .ascx

这些搜索类似于根据view的name搜索view,也可以使用<%= Html.Partial("Profile", profile) %> 渲染。Profile文件即可以是一个ASCX文件,如果必要也可以是一个aspx的文件。Profile的代码如下:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Profile>" %>
<tr>
    <td>
        <%= Html.ActionLink(Model.Username, "Show", new{ username = Model.Username }) %>
    </td>
    <td><%= Model.FirstName%></td>
    <td><%= Model.LastName%></td>
    <td><%= Model.Email %></td>
</tr>

我们在View中如下渲染Profiles:

    <% Html.RenderPartial("Profiles", Model); %>

渲染效果如下:

3、Child Action

Partial用来显示已经存在Model的信息时非常方便的。但是有时候View上显示的数据源自其他Model。例如,登录控件可能会显示当前用户的名称和电子邮件,但该View的主体部分与用户关系不大。可以使用ViewDataDictionary来传递没联系的Model,但是我们可以使用Child Action。对于在View中显示与主体没有多大关系的信息,这里介绍一下Child Action的使用。下面举例子说明。

在模板页中显示当前的用户信息,当用户登录之后,显示用户名,邮箱之类的信息,当用户没有登录,给出登录的连接。在模板页中加入下面代码:

            <div id="logindisplay">
                <%= Html.Action("LogOnWidget", "Account") %>
            </div>

LogOnWidget的代码如下,ChildActionOnly确保只能通过RenderAction调用此方法。

[ChildActionOnly]
public ViewResult LogOnWidget()
{
    bool isAuthenticated = Request.IsAuthenticated;
    Profile profile = null;

    if (isAuthenticated)
    {
        var username = HttpContext.User.Identity.Name;
        profile = _profileRepository.Find(username);
        if (profile == null)
        {
            profile = new Profile(username);
            _profileRepository.Add(profile);
        }
    }

    return View(new LogOnWidgetModel(isAuthenticated, profile));
}

用一个用户控件来显示这个Action的Model的信息,用户控件代码如下。

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%@ Import Namespace="AccountProfile.Controllers"%>
<%
    if (Request.IsAuthenticated) {
%>
        Welcome <b><%= Html.Encode(Page.User.Identity.Name) %></b>!
        [ <%= Html.ActionLink("Log Off", "LogOff", "Account") %> | <%= Html.ActionLink("Profile", "Show", "Profile", new RouteValueDictionary(new { username = Html.Encode(Page.User.Identity.Name) }), null)%> ]
<%
    }
    else {
%>
        [ <%= Html.ActionLink("Log On", "LogOn", "Account") %> ]
<%
    }
%>

总结:本文阐述了三种方式来重构你View的代码,使用这三种方式可以大量减少View层重复出现的代码。由于也是最近开始学习asp.net mvc,如果叙述和理解有问题欢迎批评指正。

参考:Asp.net  mvc2 in action

时间: 2024-10-07 17:43:35

[转]Asp.net Mvc2中重构View的三种方式的相关文章

ASP.NET缓存中Cache过期的三种策略

原文:ASP.NET缓存中Cache过期的三种策略 我们在页面上添加三个按钮并双击按钮创建事件处理方法,三个按钮使用不同的过期策略添加ASP.NET缓存. <asp:Button ID="btn_InsertNoExpirationCache" runat="server" Text="插入永不过期缓存"      OnClick="btn_InsertNoExpirationCache_Click" />   

JS中事件绑定的三种方式

以下是搜集的在JS中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="upload" onclick="upload_file();"> 原文: http://www.w3school.com.cn/jsref/jsref_events.asp 2. jQuery .on() $(node).on("change", function(e)

实现自定义View的三种方式

一.组合控件 组合控件,顾名思义,就是将系统原有的控件进行组合,构成一个新的控件.这种方式下,不需要开发者自己去绘制图上显示的内容,也不需要开发者重写onMeasure,onLayout,onDraw方法来实现测量.布局以及draw流程.所以,在实现自定义view的三种方式中,这一种相对比较简单. 实际开发中,标题栏就是一个比较常见的例子.因为在一个app的各个界面中,标题栏基本上是大同小异,复用率很高.所以经常会将标题栏单独做成一个自定义view,在不同的界面直接引入即可,而不用每次都把标题栏

Struts中的数据处理的三种方式

Struts中的数据处理的三种方式: public class DataAction extends ActionSupport{ @Override public String execute() throws Exception { // 1. 请求数据封装: 2. 调用Service处理业务逻辑,拿到结果数据 3. 数据保存到域中 /* * // Struts中对数据操作,方式1: 直接拿到ServletApi, 执行操作 HttpServletRequest request = Serv

javascript中定义事件的三种方式

在javascript中,可以为某个元素指定事件,指定的方式有以下三种: 1.在html中,使用onclick属性 2.在javascript中,使用onclick属性 3.在javascipt中,使用addEvenListener()方法 三种方法的比较 (1)在第二.三种方法中,可以向函数传入一个event对象,并读取其相应属性,而方法一不可以. (2)首选第二.三种,第一种不利于将内容与事件分离,也不能使用event对象的相关内容. 一些语法细节 (1)在第一种方法中,onclick大小写

【Eclipse使用方法】Eclipse中安装插件的三种方式

Eclipse也用了很久,但是都没有怎么去研究过怎么安装插件,今天正好在自己新买的本上试了一下.现在将心得写下,以供参考.目前安装Eclipse插件主要有以下三种方式: 在线安装: 以TestNG的安装为例来阐述其安装过程. 第一步:点击菜单栏中“Help”菜单,在下拉列中选择“Install New Software...”.此时会弹出“install”的安装框. 第二步:在弹出的“install”框,选择之前已经建立好的site,如果没有建立好,则可以点击“Add”按钮,弹出一个添加site

5.struts2中Action类中获取ServletAPI的三种方式

**Servlet的API的访问(开发中偶尔会使用到)** 1.在Action类中也可以获取到Servlet一些常用的API,有如下三种方式获取 * 完全解耦合的方式 * 使用接口注入的方式 * 使用ServletActionContext中静态方法直接访问Servlet的API * 需求:提供JSP的表单页面的数据,在Action中使用Servlet的API接收到,然后保存到三个域对象中,最后再显示到JSP的页面上. * 提供JSP注册的页面,演示下面这三种方式: <h3>注册页面</

【SSM整合】spring配置文件中读取配置文件的三种方式

目录 依赖 jdbc.properties applicationContext.xml(spring配置文件) 依赖 <!--mysql--> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.46</version> </dependency> <

android 自定义控件中获取属性的三种方式(转)

第一种方法,直接设置属性值,通过attrs.getAttributeResourceValue拿到这个属性值. (1)在xml文件中设置属性值 <com.example.activity.IconTextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/smile1" iconSrc="