ASP.net MVC--Htmlhelper

浏览数：28 / 时间：2015年06月09日

（一）引言

HtmlHelper用来在视图中呈现 HTML 控件。

我们在开发前台和后台交互的时候，绑定数据会很让人头疼，现在我们用MVC帮我们写好了的Htmlhelper来帮我们绑定数据。

用一张图来总结一下HtmlHelper：

技术分享

我就写咱们最常用的几个吧。

（二）具体Dome

1、TextBox

我们在前台的视图中可以写这样的代码：

<span style="font-family:KaiTi_GB2312;font-size:18px;">@Html.TextBox("input1") 
@Html.TextBox("input2",Model.CategoryName,new{ @style = "width:300px;" }) 
@Html.TextBox("input3", ViewData["Name"],new{ @style = "width:300px;" }) 
@Html.TextBoxFor(a => a.CategoryName, new { @style = "width:300px;" })</span>

生成的HTML代码是这样的：

<span style="font-family:KaiTi_GB2312;font-size:18px;"><input id="input1" name="input1" type="text" value="" />
<input id="input2" name="input2" style="width:300px;" type="text" value="Beverages" />
<input id="input3" name="input3" style="width:300px;" type="text" value="" />
<input id="CategoryName" name="CategoryName" style="width:300px;" type="text" value="Beverages" /></span>

TextArea

<span style="font-family:KaiTi_GB2312;font-size:18px;">@Html.TextArea("input5", Model.CategoryName, 3, 9,null)
@Html.TextAreaFor(a => a.CategoryName, 3, 3, null)</span>

生成代码：

<span style="font-family:KaiTi_GB2312;font-size:18px;"><textarea cols="9" id="input5" name="input5" rows="3">Beverages</textarea>
<textarea cols="3" id="CategoryName" name="CategoryName" rows="3">Beverages</textarea></span>

2、DropDownList

<span style="font-family:KaiTi_GB2312;font-size:18px;">@Html.DropDownList("CId",ViewBag.selList as IEnumerable<SelectListItem>)</span>

效果：

是一个下拉框，从数据库中根据“CId”查询，selList是从后台传来的代码。

后台中的查询：

<span style="font-family:KaiTi_GB2312;font-size:18px;">        public ActionResult Index()
        {
            //1.1查询班级数据
            List<Models.Class> listCla = db.Classes.Where(c => c.CIsDel == false).ToList();//.Select(c => new SelectListItem() { });
            //1.2将班级数据封装到 SelectList中，并指定 要生成下拉框选项的 value 和 text 属性
            SelectList selList = new SelectList(listCla, "CId", "CName");
            //1.3调用 SelectList 的 As 方法，自动生成 SelectListItem集合，并存入ViewBag
            ViewBag.selList = selList.AsEnumerable();
            //1.4加载视图
            return View();
        } </span>

用ViewData获取后台传来的数组。

3、Form

有两种用法，

<span style="font-family:KaiTi_GB2312;font-size:18px;">@using (Html.BeginForm("Login", "User", FormMethod.Post, new { id = "form1" }))
{
    内容
    
}</span>

<span style="font-family:KaiTi_GB2312;font-size:18px;">@Html.BeginForm("Login", "User", FormMethod.Post, new { id="form2" })
    <input type="text" />
@{Html.EndForm();}</span>

这两种都是可以的，但是我们一般会用第一种，因为第一种在结构上简单，好用。

举个例子：

<span style="font-family:KaiTi_GB2312;font-size:18px;"><h2>BeginForm{}创建表单标签 -- 推荐</h2>
@using (Html.BeginForm("Login", "User", FormMethod.Post, new { id = "form1" }))
{
    @Html.TextBox("txtName", "我是文本框", new { style="border:1px solid #0094ff;" });<br />
    
}</span>

效果：

技术分享

是不是看起来就很清楚了，这样我们就可以将文本框中的数据提交到Login/User（控制器/视图）用Post方法提交了。

4、Link

ActionLink--链接到操作方法。

<span style="font-family:KaiTi_GB2312;font-size:18px;"><h2>Html.ActionLink 生成超链接</h2>
@Html.ActionLink("我是超链接", "Part", "Home", new { id = "btnLink",style = "border:1px solid #0094ff"})
</span>

效果是：

技术分享