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。
posted on 2012-11-27 15:14 jiayang44 阅读(1689) 评论(0) 编辑 收藏 举报