微软自带很多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>
项目效果图：