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" />

巴特西

asp.net mvc htmlHelper

ASP.NET MVC 3.0 HTML辅助方法

最新文章

热门文章