最近在写一个MVC的应用程序但是遇到一个问题我想像在webFrom一样根据DropDownList值的改变显示不同的数据。一开始都不知道如何下手，后来想到了我在显示数据列表的时候用的是MvcPager这个分页控件，这个控件就用到了分布视图，既然分页能实现，那么根据条件显示不同的数据也不是很难吧。于是动手试了试根据审核状态来显示友情链接的数据。

最终效果图如下：

下面是代码部分：

Model：

public class SysLink { public SysLink() { AddTime = DateTime.Now; ShowState = false; LinkType = 0; } public int SysLinkID { get; set; } [Required(ErrorMessage = "网站名称不能为空")] [MaxLength(255)] [Display(Name = "网站名称")] public string WebName { get; set; } [Required(ErrorMessage = "网站地址不能为空")] [MaxLength(255)] [Display(Name = "网站地址")] [DataType(DataType.Url)] [RegularExpression(@"([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?", ErrorMessage = "请输入规范的URL,例:")] public string WebUrl { get; set; } [Display(Name = "网站LOGO")] [MaxLength(255)] [DataType(DataType.Url)] [RegularExpression(@"([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?", ErrorMessage = "请输入规范的URL,例:")] public string WebLogo { get; set; } [Required] [Display(Name = "链接类型")] public int LinkType { get; set; }//0文字链接，1图片链接 [Display(Name = "网站关键字")] public string Info { get; set; } [Display(Name = "IP地址")] public string IP { get; set; } [Required] public DateTime AddTime { get; set; }//审核时间，默认为申请时间 [Required] [Display(Name = "审核状态")] public bool ShowState { get; set; }//true通过 [Display(Name = "联系方式")] [Required(ErrorMessage="请留下您的联系方式")] [MaxLength(255)] public string Contact { get; set; } }

LinkManageController：

linktype是根据这个值来显示不同的数据，PageSize每页显示的数据,id 当前第几页。这里用到了MvcPager分页的代码。

public ActionResult Index(string linktype = null, int PageSize = 5, int id = 1) { IEnumerable<SysLink> links = null; if (string.IsNullOrEmpty(linktype)) { links = unitOfWork.SysLinkRepository.Get(id, PageSize, orderBy: q => q.OrderBy(m => m.SysLinkID)); } else { bool type = linktype.Equals("true") ? true : false; links = unitOfWork.SysLinkRepository.Get(id, PageSize, filter: p => p.ShowState == type, orderBy: q => q.OrderBy(m => m.SysLinkID)); } if (Request.IsAjaxRequest()) return PartialView("LinksList", links); return View(links); }

View：

先创建分布视图LinksList.cshtml显示所有友情链接的列表，所有的数据都包含在dvLink中。

@model PagedList<SysLink> <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script> <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script> <div id="dvLink"> <table> <tr> <th> 选择 </th> <th> 网站名称 </th> <th> 网站地址 </th> <th> 网站LOGO </th> <th> 链接类型 </th> <th> 网站关键字 </th> <th> 审核状态 </th> <th> 操作 </th> </tr> @foreach (var item in Model) { <tr id="@item.SysLinkID"> <td> <input type="checkbox" onfocus="this.blur()" value="@item.SysLinkID" name="chkInfo" /> </td> <td>@item.WebName </td> <td>@item.WebUrl </td> <td>@item.WebLogo </td> <td>@Html.ConverLinkType(@item.LinkType) </td> <td>@item.Info </td> <td>@Html.ConverShowState(@item.ShowState) </td> <td> @Html.ActionLink("编辑", "Edit", new { id = item.SysLinkID }) <a href="javascript:void(0)" onclick="Del(@item.SysLinkID)">删除</a> </td> </tr> } <tr> <td> <input type="checkbox" onfocus="this.blur()" id="checkAll" name="checkAll" /> </td> <td colspan=""> <input type="button" value="删除" id="delAll" /> </td> </tr> </table> @Html.AjaxPager(Model, new PagerOptions() { CssClass = "mvcPager", PageIndexParameterName = "id", ShowPageIndexBox = true, PageIndexBoxType = PageIndexBoxType.DropDownList, ShowGoButton = false, PageIndexBoxWrapperFormatString = "跳转到第{0}页" }, new AjaxOptions() { UpdateTargetId = "dvLink" }) </div>

创建LinkManage的Index视图,先加载分布视图LinkList：

@{ Html.RenderPartial("LinksList", Model); }

然后再添加DropDownList：

审核状态: @Html.DropDownList("linkType", new List<SelectListItem>() { new SelectListItem { Text = "全部" ,Value=""}, new SelectListItem { Text = "通过", Value = "true"}, new SelectListItem { Text = "待审核", Value = "false" } })

然后通过JQuery绑定DropDownList值的改变的事件，并异步获取新的数据集合。