(asp.net MVC学习)System.Web.Mvc.HtmlHelper学习及使用

在ASP.NET MVC框架中没有了自己的控件，页面显示完全就回到了写html代码的年代。还好在asp.net mvc框架中也有自带的HtmlHelper和UrlHelper两个帮助类。另外在MvcContrib扩展项目中也有扩展一些帮助类，这样我们就不光 只能使用完整的html来编写了需要显示的页面了，就可以使用这些帮助类来完成，但最后运行时都还是要生成html代码的。

先来看看HtmlHelper能帮我们生成一些什么样的html呢。直接看效果吧。

    <div>

        1.使用HtmlHelper生成超链接:

        <%=Html.ActionLink("我是超链接","") %>

        <br />

        2.使用HtmlHelper生成表单:

        <% Html.BeginForm("Index", "Simple", FormMethod.Post, new { id = "myForm" }); %>

        <% Html.EndForm();%>

        <br />

        3.使用HtmlHelper根据路由规则生成表单:

        <% Html.BeginRouteForm(new { controller = "Simple", action = "Demo" }); %>

        <%Html.EndForm(); %>

        <br />

        4.使用HtmlHelper生成一个复选框：

        <%= Html.CheckBox("checkBox",new { id="myCheckBox" })%>复选框

        <br />

        5.使用HtmlHelper生成上拉列表框:

        <% var dropList = new List<SelectListItem>();

           for (int i = 0; i < 5; i++)

           {

               var dropItem = new SelectListItem();

               dropItem.Value = i.ToString();

               dropItem.Text = i.ToString();

               dropList.Add(dropItem);

           }

        %>

        <%=Html.DropDownList("myList", dropList, new { style = "100px;" })%>

        <br />

        6.使用HtmlHelper生成隐藏域:

        <%=Html.Hidden("hidden") %>

        <br />

        7.使用HtmlHelper生成列表框：

        <%var list = new List<SelectListItem>();

          for (var i = 0; i < 5; i++)

          {

              var item = new SelectListItem();

              item.Value = i.ToString();

              item.Text = i.ToString();

              list.Add(item); 

          }  

             %>

        <%=Html.ListBox("listBox", list, new {style="100px;" })%>        

        <br />       

        8.使用HtmlHelper生成密码输入框:

        <%=Html.Password("password","longgel") %>

        <br />

        9.使用HtmlHelper生成单选框:

        <%=Html.RadioButton("radio","boy",true) %>男

        <%=Html.RadioButton("radio","girl",false) %>女

        <br />

        10.使用HtmlHelper生成部分视图（用户控件）：

        <% Html.RenderPartial("PartialView"); %>

        <br />

        11.使用HtmlHelper根据路由规则生成超链接：

        <%= Html.RouteLink("我是由路由生成的超链接",new {controller="Simple",action="Index"}) %>

        <br />

        12.使用HtmlHelper生成富文本框：

        <%=Html.TextArea("myTxtArea",new{style="300px; height:100px;"}) %>

        <br />

        13.使用HtmlHelper生成文本框：

        <%=Html.TextBox("myTxtBox","我是文本框")%>

    </div>

其实大家可能注意到了，当我们在使用<%%>中有同样都是使用的HtmlHelper中的方法，为什么有的需要加上等号，有的不需要， 其实在HtmlHelper中的方法中，只要是返回的是MvcHtmlString类型的方法都需要使用等号将值输出。在来看看生成的结果吧。

    <div>

        1.使用HtmlHelper生成超链接:

        <a href="/">我是超链接</a>

        <br />

        2.使用HtmlHelper生成表单:

        <form action="/" id="myForm" method="post"></form>

        <br />

        3.使用HtmlHelper根据路由规则生成表单:

        <form action="/Simple/Demo" method="post"></form>

        <br />

        4.使用HtmlHelper生成一个复选框：

        <input id="myCheckBox" name="checkBox" type="checkbox" value="true" /><input name="checkBox" type="hidden" value="false" />复选框

        <br />

        5.使用HtmlHelper生成上拉列表框:

        <select id="myList" name="myList" style="100px;"><option value="0">0</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

</select>

        <br />

        6.使用HtmlHelper生成隐藏域:

        <input id="hidden" name="hidden" type="hidden" value="" />

        <br />

        7.使用HtmlHelper生成列表框：

        <select id="listBox" multiple="multiple" name="listBox" style="100px;"><option value="0">0</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

</select>        

        <br />       

        8.使用HtmlHelper生成密码输入框:

        <input id="password" name="password" type="password" value="longgel" />

        <br />

        9.使用HtmlHelper生成单选框:

        <input checked="checked" id="radio" name="radio" type="radio" value="boy" />男

        <input id="radio" name="radio" type="radio" value="girl" />女

        <br />

        10.使用HtmlHelper生成部分视图（用户控件）：

        

 

<span style="background-color:Red">Hi，我是部分视图（用户控件）</span>

        <br />

        11.使用HtmlHelper根据路由规则生成超链接：

        <a href="/">我是由路由生成的超链接</a>

        <br />

        12.使用HtmlHelper生成富文本框：

        <textarea cols="20" id="myTxtArea" name="myTxtArea" rows="2" style="300px; height:100px;">

</textarea>

        <br />

        13.使用HtmlHelper生成文本框：

        <input id="myTxtBox" name="myTxtBox" type="text" value="我是文本框" />

    </div>

另外HtmlHelper中还有ValidationMessage()和 ValidationSummary()等方法，下次学到验证的时候一起写出来。^_^

在ASP.NET MVC框架中没有了自己的控件，页面显示完全就回到了写html代码的年代。还好在asp.net mvc框架中也有自带的HtmlHelper和UrlHelper两个帮助类。另外在MvcContrib扩展项目中也有扩展一些帮助类，这样我们就不光 只能使用完整的html来编写了需要显示的页面了，就可以使用这些帮助类来完成，但最后运行时都还是要生成html代码的。

先来看看HtmlHelper能帮我们生成一些什么样的html呢。直接看效果吧。

    <div>

        1.使用HtmlHelper生成超链接:

        <%=Html.ActionLink("我是超链接","") %>

        <br />

        2.使用HtmlHelper生成表单:

        <% Html.BeginForm("Index", "Simple", FormMethod.Post, new { id = "myForm" }); %>

        <% Html.EndForm();%>

        <br />

        3.使用HtmlHelper根据路由规则生成表单:

        <% Html.BeginRouteForm(new { controller = "Simple", action = "Demo" }); %>

        <%Html.EndForm(); %>

        <br />

        4.使用HtmlHelper生成一个复选框：

        <%= Html.CheckBox("checkBox",new { id="myCheckBox" })%>复选框

        <br />

        5.使用HtmlHelper生成上拉列表框:

        <% var dropList = new List<SelectListItem>();

           for (int i = 0; i < 5; i++)

           {

               var dropItem = new SelectListItem();

               dropItem.Value = i.ToString();

               dropItem.Text = i.ToString();

               dropList.Add(dropItem);

           }

        %>

        <%=Html.DropDownList("myList", dropList, new { style = "100px;" })%>

        <br />

        6.使用HtmlHelper生成隐藏域:

        <%=Html.Hidden("hidden") %>

        <br />

        7.使用HtmlHelper生成列表框：

        <%var list = new List<SelectListItem>();

          for (var i = 0; i < 5; i++)

          {

              var item = new SelectListItem();

              item.Value = i.ToString();

              item.Text = i.ToString();

              list.Add(item); 

          }  

             %>

        <%=Html.ListBox("listBox", list, new {style="100px;" })%>        

        <br />       

        8.使用HtmlHelper生成密码输入框:

        <%=Html.Password("password","longgel") %>

        <br />

        9.使用HtmlHelper生成单选框:

        <%=Html.RadioButton("radio","boy",true) %>男

        <%=Html.RadioButton("radio","girl",false) %>女

        <br />

        10.使用HtmlHelper生成部分视图（用户控件）：

        <% Html.RenderPartial("PartialView"); %>

        <br />

        11.使用HtmlHelper根据路由规则生成超链接：

        <%= Html.RouteLink("我是由路由生成的超链接",new {controller="Simple",action="Index"}) %>

        <br />

        12.使用HtmlHelper生成富文本框：

        <%=Html.TextArea("myTxtArea",new{style="300px; height:100px;"}) %>

        <br />

        13.使用HtmlHelper生成文本框：

        <%=Html.TextBox("myTxtBox","我是文本框")%>

    </div>

其实大家可能注意到了，当我们在使用<%%>中有同样都是使用的HtmlHelper中的方法，为什么有的需要加上等号，有的不需要， 其实在HtmlHelper中的方法中，只要是返回的是MvcHtmlString类型的方法都需要使用等号将值输出。在来看看生成的结果吧。

    <div>

        1.使用HtmlHelper生成超链接:

        <a href="/">我是超链接</a>

        <br />

        2.使用HtmlHelper生成表单:

        <form action="/" id="myForm" method="post"></form>

        <br />

        3.使用HtmlHelper根据路由规则生成表单:

        <form action="/Simple/Demo" method="post"></form>

        <br />

        4.使用HtmlHelper生成一个复选框：

        <input id="myCheckBox" name="checkBox" type="checkbox" value="true" /><input name="checkBox" type="hidden" value="false" />复选框

        <br />

        5.使用HtmlHelper生成上拉列表框:

        <select id="myList" name="myList" style="100px;"><option value="0">0</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

</select>

        <br />

        6.使用HtmlHelper生成隐藏域:

        <input id="hidden" name="hidden" type="hidden" value="" />

        <br />

        7.使用HtmlHelper生成列表框：

        <select id="listBox" multiple="multiple" name="listBox" style="100px;"><option value="0">0</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

</select>        

        <br />       

        8.使用HtmlHelper生成密码输入框:

        <input id="password" name="password" type="password" value="longgel" />

        <br />

        9.使用HtmlHelper生成单选框:

        <input checked="checked" id="radio" name="radio" type="radio" value="boy" />男

        <input id="radio" name="radio" type="radio" value="girl" />女

        <br />

        10.使用HtmlHelper生成部分视图（用户控件）：

        

 

<span style="background-color:Red">Hi，我是部分视图（用户控件）</span>

        <br />

        11.使用HtmlHelper根据路由规则生成超链接：

        <a href="/">我是由路由生成的超链接</a>

        <br />

        12.使用HtmlHelper生成富文本框：

        <textarea cols="20" id="myTxtArea" name="myTxtArea" rows="2" style="300px; height:100px;">

</textarea>

        <br />

        13.使用HtmlHelper生成文本框：

        <input id="myTxtBox" name="myTxtBox" type="text" value="我是文本框" />

    </div>

另外HtmlHelper中还有ValidationMessage()和 ValidationSummary()等方法，下次学到验证的时候一起写出来。^_^

原文：http://www.cnblogs.com/longgel/archive/2010/02/03/1662894.html