MVC3.0之下拉框联调刷新列表

针对目前mvc3.0下的下拉框，列表，分页之间的联动做一个简单的总结。

由于对MVC的理解不深刻，所以在实际项目的应用中使用总是磕磕绊绊，处理的不是很好。现在对现阶段常用的一些知识做一个总结，其中主要是平时经常用到的一些模块，包括分页，Ajax请求，下拉框的联动。其中用到了第三方的分页控件MvcPager。

一.简单的分页

View代码

Index.cshtml

<div class="info_box" id="monthAssimentList">
@{Html.RenderAction("MonthAssimentList", "SchoolDetail", new { schoolId = Model.Id, pageIndex = 1 });}
</div>

 MonthAssimentList.cshtml

@using Webdiyer.WebControls.Mvc;
@model  Webdiyer.WebControls.Mvc.PagedList<SE.JXHD.DTOs.AssignmentListDTO>


<ul>
    @foreach (SE.JXHD.DTOs.AssignmentListDTO dto in Model)
    {
        <li><a href="#">@(dto.Content.Length > 50 ? string.Format("{0}...", dto.Content.Substring(0, 50)) : dto.Content)</a></li>
    }
</ul>

<div class="pager_area" style="font-size:12px;">
        <div class="pager_left">
            每页<span class="num"> @Model.PageSize </span>条记录，总共 <span class="num">@Model.TotalItemCount
            </span>条记录
            
            </div>            
        @Html.AjaxPager(
                Model,
                new PagerOptions
                {             
                    Id="MonthPagerdiv" ,   
                    ContainerTagName = "div",
                    PageIndexParameterName = "pageIndex",
                    AutoHide = false,
                    CssClass = "pager_mid",
                    ShowMorePagerItems = true,
                    AlwaysShowFirstLastPageNumber = true,
                    ShowNumericPagerItems = false,
                    PageIndexBoxWrapperFormatString = "跳转到第{0}页",
                    PageIndexBoxType = PageIndexBoxType.DropDownList,
                    ShowPageIndexBox = true,
                    LastPageText = "尾页    <span>页码：</span><span class='count'>" + Model.CurrentPageIndex + "/" + Model.TotalPageCount + " </span>",
               
                    ShowGoButton = false
                },
                         new AjaxOptions() { UpdateTargetId = "monthAssimentList", InsertionMode = InsertionMode.Replace, HttpMethod = "post" }
            )
       
        <div class="clear">
        </div>
    </div>

Controller代码

public ActionResult MonthAssimentList(string schoolId, int pageIndex)
{
    int pageSize = 5;
    int beginIndex = pageSize * (pageIndex - 1) + 1;
    int endIndex = pageSize * pageIndex;
　　 //根据情况获取数据
    List<AssignmentListDTO> list = FacadeContainer.GetRealProxy<IMsgMgr>().FindAssignments(new Guid(schoolId), DateTime.Now, beginIndex, endIndex);
    int count = FacadeContainer.GetRealProxy<IMsgMgr>().GetAssignmentCount(new Guid(schoolId), DateTime.Now, beginIndex, endIndex);
　　 //初始化pagedlist
    PagedList<AssignmentListDTO> plist = new PagedList<AssignmentListDTO>(list, pageIndex, pageSize, count);
    return PartialView("MonthAssimentList", plist);
}

这个是一般情况下的Ajax分页。

二.下拉框联动更新列表

Index.cshtml

<script type="text/javascript">

$("#mNoticeMonth").combobox({
　　dataFields: { value: "monthID", text: "monthName" },
　　url: '@Url.Action("GetNoticeMonth", "SchoolDetail")',
　　
　　onChange:
　　　　function () {

　　　　　　$('#historyNoticeList').empty();
　　　　　　var schoolid = $("#hidSchool").val();
　　　　　　var strDate = this.attr("value")==""? (myDate.getYear() + "-" + (myDate.getMonth() + 1)):this.attr("value");
　　　　　　var strUrl = '@Url.Action("HistoryNoticeList", "SchoolDetail")' + "?date=" +strDate + "&schoolId=" + schoolid+"&pageIndex=1";
　　　　　　$.ajax({
　　　　　　url: strUrl,
　　　　　　type: 'POST',
　　　　　　dataType: 'html',//这里必须为html格式
　　　　　　contentType: 'application/json; charset=utf-8',
　　　　　　success: function (data) {
　　　　　　　　　　$('#historyNoticeList').html(data); //主要处理，在下拉框的onchange事件中直接用Ajax获取分页View的Html直接加载到div中
　　　　　　　　},
　　　　　　error: function (msg) {
　　　　　　　　　　$.alert("加载失败！"+msg);
　　　　　　　　}
　　　　});
　　}
});

</script>

<div class="info_box" id="historyNoticeList">

</div>

HistoryNoticeList.cshtml

@using Webdiyer.WebControls.Mvc;
@model  Webdiyer.WebControls.Mvc.PagedList<SE.JXHD.DTOs.NoticeListDTO>


<ul>
    @foreach (SE.JXHD.DTOs.AssignmentListDTO dto in Model)
    {
        <li><a href="#">@(dto.Content.Length > 50 ? string.Format("{0}...", dto.Content.Substring(0, 50)) : dto.Content)</a></li>
    }
</ul>

<div class="pager_area" style="font-size:12px;">
        <div class="pager_left">
            每页<span class="num"> @Model.PageSize </span>条记录，总共 <span class="num">@Model.TotalItemCount
            </span>条记录
            
            </div>            
        @Html.AjaxPager(
                Model,
                new PagerOptions
                {             
                    Id="MonthPagerdiv" ,   
                    ContainerTagName = "div",
                    PageIndexParameterName = "pageIndex",
                    AutoHide = false,
                    CssClass = "pager_mid",
                    ShowMorePagerItems = true,
                    AlwaysShowFirstLastPageNumber = true,
                    ShowNumericPagerItems = false,
                    PageIndexBoxWrapperFormatString = "跳转到第{0}页",
                    PageIndexBoxType = PageIndexBoxType.DropDownList,
                    ShowPageIndexBox = true,
                    LastPageText = "尾页    <span>页码：</span><span class='count'>" + Model.CurrentPageIndex + "/" + Model.TotalPageCount + " </span>",
               
                    ShowGoButton = false
                },
                         new AjaxOptions() { UpdateTargetId = "historyNoticeList", InsertionMode = InsertionMode.Replace, HttpMethod = "post" }
            )
       
        <div class="clear">
        </div>
    </div>

　　

Controller代码

 public ActionResult HistoryNoticeList(string date, string schoolId, int pageIndex)
 {
        int pageSize = 5;
        int beginIndex = pageSize * (pageIndex - 1) + 1;
        int endIndex = pageSize * pageIndex;
        IMsgMgr msgMgr = FacadeContainer.GetRealProxy<IMsgMgr>();
        List<NoticeListDTO> noticeList = msgMgr.FindNotices(new Guid(schoolId), DateTime.Parse(date), beginIndex, endIndex);
        int count = msgMgr.GetNoticeCount(new Guid(schoolId), DateTime.Parse(date), beginIndex, endIndex);

        PagedList<NoticeListDTO> plist = new PagedList<NoticeListDTO>(noticeList, pageIndex, pageSize, count);
        return View("HistoryNoticeList", plist);
}

主要联动的处理部分是代码中标绿的注释部分，主要是利用Ajax直接请求View的html更新目标div。