asp.net mvc htmlHelper

ASP.NET MVC 3.0 HTML辅助方法

 

　　HTML辅助方法（html helper）是用来帮助生成HTML的方法。

　　1、HTML辅助方法应用实例

　　◊ 生成form元素

@using (Html.BeginForm("About", "Home")) { 
    @Html.TextBox("ProductName")
}

　　生成的html代码如下：

<form method="post" action="/Home/About">
<input id="ProductName" type="text" value="" name="ProductName">
</form>

　　◊ 生成TextBox元素

@Html.TextBox("ProductName", "产品名称", new { id = "txtProductName", @class = "txt" })

public static MvcHtmlString TextBox(this HtmlHelper htmlHelper, string name, object value, object htmlAttributes);

　　生成html代码如下：

<input id="txtProductName" class="txt" type="text" value="产品名称" name="ProductName">

 

@Html.TextBox("ProductName", "产品名称", ViewBag.Attributes as IDictionary<string, object>)

public static MvcHtmlString TextBox(this HtmlHelper htmlHelper, string name, object value, IDictionary<string, object> htmlAttributes);

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

using System.Collections;

namespace MvcTest.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            IDictionary<string, object> attr = new Dictionary<string, object>();
            attr.Add("id", "txtProductName");
            attr.Add("style", "border:1px solid #666666;");
            attr.Add("class", "txt");
            ViewBag.Attributes = attr;

            return View();
        }

    }
}

　　生成的html代码：

<input id="txtProductName" class="txt" type="text" value="产品名称" style="border:1px solid #666666;" name="ProductName">

 　　◊ 生成DropDownList

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

using System.Collections;

namespace MvcTest.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            List<SelectListItem> lst = new List<SelectListItem>();
            lst.Add(new SelectListItem { Text = "数码电子", Value = "1" });
            lst.Add(new SelectListItem { Text = "服装服饰", Value = "2" });
            lst.Add(new SelectListItem { Text = "珠宝首饰", Value = "3" });
            ViewBag.Category = lst;
            ViewBag.Category = new SelectList(lst, "Value", "Text", "2");

            return View();
        }

    }
}

@Html.DropDownList("Category",  "请选择")

　　生成的HTML代码：

<select id="Category" name="Category">
    <option value="">请选择</option>
    <option value="1">数码电子</option>
    <option selected="selected" value="2">服装服饰</option>
    <option value="3">珠宝首饰</option>
</select>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

using System.Collections;

namespace MvcTest.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            List<Models.Province> lst = new List<Models.Province>();
            lst.Add(new Models.Province { ProvinceID = 1, ProvinceNo = "100000", ProvinceName = "北京" });
            lst.Add(new Models.Province { ProvinceID = 2, ProvinceNo = "110000", ProvinceName = "上海" });
            lst.Add(new Models.Province { ProvinceID = 3, ProvinceNo = "120000", ProvinceName = "深圳" });
            ViewBag.Category = new SelectList(lst, "ProvinceNo", "ProvinceName", "110000");
            return View();
        }

    }
}

 　　2、自定义HTML辅助方法

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

using System.Web.Routing;
using System.Web.Mvc;

namespace MvcTest.html
{
    public static class HtmlExtensions
    {
        public static MvcHtmlString Img(this HtmlHelper htmlHelper, string src)
        {
            return Img(htmlHelper, String.Empty, src, String.Empty, null);
        }
        public static MvcHtmlString Img(this HtmlHelper htmlHelper, string id, string src)
        {
            return Img(htmlHelper, id, src, String.Empty, null);
        }
        public static MvcHtmlString Img(this HtmlHelper htmlHelper, string id, string src, string alt, object htmlAttributes)
        {
            TagBuilder builder = new TagBuilder("img");
            builder.GenerateId(id);
            builder.MergeAttribute("src", src);
            builder.MergeAttribute("alt", alt);
            builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));

            return MvcHtmlString.Create(builder.ToString(TagRenderMode.SelfClosing));
        }
    }
}

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using MvcTest.html
@Html.Img("", Url.Content("~/Content/logo.png"))
@Html.Img("imgLogo", Url.Content("~/Content/logo.png"), "Logo", new { border = "1px solid #666666", @class = "c01" })

　　生成的HTML代码：

<img alt="" src="/Content/logo.png" />
<img alt="Logo" border="1px solid #666666" class="c01" id="imgLogo" src="/Content/logo.png" />