ASP.NET MVC- HtmlHelper的用法

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

　　1.ActionLink

    <div>
        @Html.ActionLink("这是一个测试", "Other", "Home");

        带有QueryString的写法
        @Html.ActionLink("这是一个测试", "Other", "Home", new { page = 1 });
        @Html.ActionLink("这是一个测试", "Other", "Home", new { page = 1 }, null);

        QueryString与Html属性同时存在
        @Html.ActionLink("这是一个测试", "Other", "Home", new { page = 1 }, new { id = "link1" })
        @Html.ActionLink("这是一个测试", "Other", new { page = 1 }, new { id = "link1" })

        实际用途(弹出新窗口)
        @Html.ActionLink("这是一个测试", "Other", "Home", new { page = 1 }, new { target = "_blank" });
    </div>

   生成结果: 
   <div>
        <a href="/Home/Other">这是一个测试</a>;

        带有QueryString的写法
        <a href="/Home/Other?Length=4" page="1">这是一个测试</a>;
        <a href="/Home/Other?page=1">这是一个测试</a>;

        QueryString与Html属性同时存在
        <a href="/Home/Other?page=1" id="link1">这是一个测试</a>
        <a href="/Home/Other?page=1" id="link1">这是一个测试</a>

        实际用途(弹出新窗口)
        <a href="/Home/Other?page=1" target="_blank">这是一个测试</a>;
    </div>

　　2.RouteLink 跟ActionLink功能一样

 <%=Html.RouteLink("关于", "about", new { })%> 
 带QueryString
 <%=Html.RouteLink("关于", "about", new { page = 1 })%> 
 <%=Html.RouteLink("关于", "about", new { page = 1 }, new { id = "link1" })%> 
    
 生成结果：
 <a href="/about">关于</a> 
 <a href="/about?page=1">关于</a> 
 <a href="/about?page=1" id="link1">关于</a> 

　　3.Form表单

    <div>
        @using (Html.BeginForm("Other", "Home", FormMethod.Post, new { id = "myForm" }))
        {

        }
    </div>

   生成结果:
     <div>
        <form action="/Home/Other" id="myForm" method="post"></form>    
    </div>

　　4.TextBox和TextBoxFor

　　TextBox和TextBox的不同是，TextBoxFor里面可以存放Model的字段值，而TextBox不可以

    <div>
        @Html.TextBox("txtName", "ChenChunXiao", new { style = "width:300px" })
        @Html.TextBoxFor(a => a.CategoryName, new { @style = "width:300px;" }) 
    </div>

生成结果
      <input id="txtName" name="txtName" style="width:300px" type="text" value="ChenChunXiao" />
     <input id="CategoryName" name="CategoryName" style="width:300px;" type="text" value="Beverages" />

　　 5.TextArea和TextAreaFor

@Html.TextArea("input5", Model.CategoryName, 3, 9,null)
@Html.TextAreaFor(a => a.CategoryName, 3, 3, null)
    
生成结果：
<textarea cols="9" id="input5" name="input5" rows="3">Beverages</textarea>
<textarea cols="3" id="CategoryName" name="CategoryName" rows="3">Beverages</textarea> 

　　6、CheckBox和CheckBoxFor (除了生成CHEKCBOX的HTML还会生成HIDDEN的HTML）

@Html.CheckBox("chk1",true) 
@Html.CheckBox("chk1", new { @class="checkBox"}) 
@Html.CheckBoxFor(a =>a.IsVaild, new { @class = "checkBox" })
   
生成结果
<input checked="checked" id="chk1" name="chk1" type="checkbox" value="true" /><input name="chk1" type="hidden" value="false" />
<input class="checkBox" id="chk1" name="chk1" type="checkbox" value="true" /><input name="chk1" type="hidden" value="false" /> 
<input checked="checked" class="checkBox" id="IsVaild" name="IsVaild" type="checkbox" value="true" /><input name="IsVaild" type="hidden" value="false" /> 

 　　7、ListBox

    <div>
        @{
            List<SelectListItem> 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, "请选择")
    </div>

生成代码
        <select id="myList" name="myList">
        <option value="">请选择</option>
        <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>

 

 二、扩展方法

       采用这样的方式，我们通常需要新建一个文件夹，专门存放我们自定义的辅助方法(很多时候，我们自定义的辅助方法可能很多，但像是Controller,Models这样的文件夹并不适合存放这些方法)，其实也就是专门为辅助方法建立一个新的命名空间。

　　我在自己的包里建下这个扩展方法：

namespace Package.Utility
{
    public static class Tool
    {
        public static string Truncate(this HtmlHelper helper, string input, int length)
        {
            if (input.Length <= length)
            {
                return input;
            }
            else
            {
                return input.Substring(0, length) + "...";
            }
        } 
    }
}

　　然后我在View视图里，先引用这个命名空间后，就可以直接使用该HTMLHELPER的扩展方法了。

@using Package.Utility
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Test</title>
</head>
<body>
    <div>
        @Html.Truncate("myHelper", 3)
    </div>
</body>
</html>

 三、Helper扩展方法的使用

直接看一下代码例子

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    @helper ShowHelloWorld(string str)
    {
        <div>@str</div>
    }
    <div>
        @ShowHelloWorld("Hello World CCx")
    </div>
</body>
</html>

 

 

参考文章
常用的　　http://www.cnblogs.com/fishtreeyu/archive/2011/03/23/1992498.html

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

扩展的　　http://www.cnblogs.com/wenjiang/archive/2013/03/30/2990854.html