首页 > 代码库 > ASP.net MVC--Htmlhelper

ASP.net MVC--Htmlhelper

2024-08-09 18:52:25   221人阅读

（一）引言

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=http://www.mamicode.com/"" />>
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>

效果是：

技术分享

当点击链接的时候，我们就到了Home/Part(控制器/视图)链接了。

(三)总结

这个部分，只是MVC中很小的一部分，但是就是这很小的部分，是联系了后台和前台数据。









ASP.net MVC--Htmlhelper


联系
我们