MVC学习系列——HtmlHelper扩展

微软自带很多HtmlHelper：

ActionLink - 链接到操作方法。
BeginForm  - 标记窗体的开头并链接到呈现该窗体的操作方法。
CheckBox  - 呈现复选框。
DropDownList  - 呈现下拉列表。
Hidden - 在窗体中嵌入未呈现的信息以供用户查看。
ListBox  - 呈现列表框。
Password - 呈现用于输入密码的文本框。
RadioButton  - 呈现单选按钮。
TextArea - 呈现文本区域（多行文本框）。
TextBox  - 呈现文本框

当这些不能满足我们项目要求时，我们可以自定义HtmlHelper。

新建HtmlHelperExtensions类

  public static class HtmlHelperExtensions

     {

         public static ListGroup ListGroup(this HtmlHelper htmlHelper)

         {

             return new ListGroup();

         }

     }

     public class ListGroup

     {

         public MvcHtmlString Info<T>(List<T> data, Func<T, string> getName)

         {

             return Show(data, getName, "list-group-item-info");

         }

         public MvcHtmlString Warning<T>(List<T> data, Func<T, string> getName)

         {

             return Show(data, getName, "list-group-item-warning");

         }

         public MvcHtmlString Danger<T>(List<T> data, Func<T, string> getName)

         {

             return Show(data, getName, "list-group-item-danger");

         }

         private MvcHtmlString Show<T>(List<T> data, Func<T, string> getName, string style)

         {

             TagBuilder ul = new TagBuilder("ul");

             ul.AddCssClass("list-group");

             foreach (var item in data)

             {

                 TagBuilder li = new TagBuilder("li");

                 li.AddCssClass("list-group-item");

                 li.AddCssClass(style);

                 li.SetInnerText(getName(item));

                 ul.InnerHtml += li.ToString();

             }

             return new MvcHtmlString(ul.ToString());

         }

     }

项目中调用HomeController的ShowList：

public ActionResult ShowList()

        {

            StudentViewModel s1 = new StudentViewModel();

            s1.ID = "";

            s1.Name = "zhangsan1";

            s1.Gender = "man1";

            StudentViewModel s2 = new StudentViewModel();

            s2.ID = "";

            s2.Name = "zhangsan2";

            s2.Gender = "man2";

            StudentViewModel s3 = new StudentViewModel();

            s3.ID = "";

            s3.Name = "zhangsan3";

            s3.Gender = "man3";

            List<StudentViewModel> lists = new List<StudentViewModel>();

            lists.Add(s1);

            lists.Add(s2);

            lists.Add(s3);

            return View(lists);

        }

View:

@using WebApplication13.Extensions

@using WebApplication13.Models

@model List<StudentViewModel>

<div class="row">

    <div class="col-md-6">@Html.ListGroup().Info(Model,x=>x.Name)</div>

</div>

<div class="row">

    <div class="col-md-6">@Html.ListGroup().Warning(Model, x => x.Name)</div>

</div>

<div class="row">

    <div class="col-md-6">@Html.ListGroup().Danger(Model, x => x.Name)</div>

</div>

<style type="text/css">

    .list-group-item-info {

        background-color:aqua;

    }

    .list-group-item-warning {

        background-color:yellow;

    }

    .list-group-item-danger {

        background-color:red;

    }

</style>

项目效果图：