使用扩展方法创建 HTML Helper

本文介绍如何使用ASP.NET MVC Framework中的HTMLHelper方法简化HTML元素生成,并演示了如何通过扩展方法自定义HTMLHelper以创建复用性强的table标签。

HTML Helper 是一种返回字符串的方法。字符串可以代表希望的任何类型内容。例如,可以使用 HTML Helper 呈现标准的 HTML 标记,如 HTML<input><img>标记。也可以使用 HTML Helper 呈现更复杂的内容,如标签条或数据库数据的 HTML 表。

ASP.NET MVC Framework 包含以下一系列标准 HTML Helper(非完整列表):

  • Html.ActionLink()
  • Html.BeginForm()
  • Html.CheckBox()
  • Html.DropDownList()
  • Html.EndForm()
  • Html.Hidden()
  • Html.ListBox()
  • Html.Password()
  • Html.RadioButton()
  • Html.TextArea()
  • Html.TextBox()

例如,程序清单 1 中的表单在两个标准 HTML Helper 的帮助下呈现,如图 1 所示。此表单使用Html.BeginForm()Html.TextBox() Helper 方法呈现了一个简单的 HTML 表单。

图 1:使用 HTML Helper 呈现的页面(单击查看大图

程序清单 1 Views\Home\Index.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head id="Head1" runat="server">
<title>Index</title>
</head>
<body>
<div>
<% using (Html.BeginForm())
{ %>
<label for="firstName">First Name:</label>
<br />
<%= Html.TextBox("firstName")%>
<br /><br />
<label for="lastName">Last Name:</label>
<br />
<%= Html.TextBox("lastName")%>
<br /><br />
<input type="submit" value="Register" />
<% } %>
1 </div>
</body>
</html>

Html.BeginForm() Helper 方法用于创建开始和结束 HTML<form>标记。请注意,Html.BeginForm() 方法在 using 语句中调用。using 语句确保<form> 标记在 using 块的结尾处结束。

如果愿意,可以不创建 using 块,而是调用 Html.EndForm() Helper 方法来结束 <form>标记。不管用哪种方法创建开始和结束<form> 标记,都显得非常直观。

程序清单 1 中使用 Html.TextBox() Helper 方法呈现 HTML<input>标记。如果在浏览器中选择查看源代码,则可以看到程序清单 2 中的 HTML 源代码。请注意,源代码包含标准的 HTML 标记。

重要事项:请注意,Html.TextBox()HTML Helper 使用 <%= %> 标记而不是<% %>标记呈现。如果不包括等号,则浏览器中不会呈现任何内容。

ASP.NET MVC Framework 包含少量的 Helper。大多数情况下,需要使用自定义 HTML Helper 扩展 MVC Framework。在本教程后面的部分中,我们将学习创建自定义 HTML Helper 的两种方法。

 

1、使用静态方法创建 HTML Helper

 

 

2、使用扩展方法创建 HTML Helper

上面载自msdn  http://msdn.microsoft.com/zh-cn/dd408818.aspx

 

下面的例子就是用第二种方法自定义一个Html.Table标签

 创建一个静态类HtmlHelper_base必须静态

 

ExpandedBlockStart.gif 代码
using  System;
using  System.Data;
using  System.Web.Mvc;

namespace  MvcApp
{
    
public   static   class  HtmlHelper_base
    {
       
        
///   <summary>
        
///   table 标签
        
///   </summary>
        
///   <param name="helper"></param>
        
///   <param name="clsName"> 样式名字 </param>
        
///   <param name="obj"> table对象 </param>
        
///   <returns></returns>
         public   static   string  Table( this  HtmlHelper helper,  string  clsName, object  obj)
        {
            
            DataTable dt 
=  (DataTable)obj;
            System.Text.StringBuilder sb 
=   new  System.Text.StringBuilder();
            
if  (dt  !=   null )
            {
                sb.Append(
" <table class=' "   +  clsName  +   " ' > " );
                sb.Append(
" <tr> " );
                
foreach  (DataColumn item  in  dt.Columns)
                {
                    sb.Append(
" <td> " );
                    sb.Append(item.ColumnName);
                    sb.Append(
" </td> " );
                }
                sb.Append(
" </tr> " );

                
foreach  (DataRow dr  in  dt.Rows)
                {
                    sb.Append(
" <tr> " );

                    
foreach  (DataColumn dc  in  dt.Columns)
                    {
                        sb.Append(
" <td> " );
                        sb.Append(dr[dc.ColumnName].ToString());
                        sb.Append(
" </td> " );
                    }

                    sb.Append(
" </tr> " );
                }

                sb.Append(
" </table> " );
            }

            
return  sb.ToString();
        }
    }
}


在前台页面引用该类的命名空间(<%@ Import Namespace="MvcApp" %>)即可像ASP.NET MVC Framework 中标准的 HTML Helper 一样工作了

aspx页面代码

< div > <% =  Html.Table( " clsName " , ViewData[ " table " ] ) %>   </ div >

 

通过这种方法,我们可以定义出很多控件来,非常方面使用。当然,我只是简单写了一下,抛砖引玉

 

小菜一个,别扔砖啊

 

 

转载于:https://www.cnblogs.com/freeton/archive/2009/12/24/1631429.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值