MVC模式中,如何使用AJAX进行分页
列表主页Action内容:
public ActionResult HelpList()
{
Entity.Commons.VPredication vp = new Entity.Commons.VPredication();
Entity.Commons.PagingParam pp = new Entity.Commons.PagingParam(1, 10);
Entity.PagedList<Entity.HelpDocument> list = _HelpDocumentServices.GetHelpDocument(vp, pp);
List<Entity.HelpCategory> clist = _HelpDocumentServices.GetAllCatetories();
clist.Insert(0, new Entity.HelpCategory() { HelpCategoryID = "", CategoryName = "选择类别" });
ViewData["Category"] = clist;
return View(list);
}
列表用户控制页Action内容:
public ActionResult PageHelp(int? pi, string title, string cid)
{
Entity.Commons.VPredication vp = new Entity.Commons.VPredication();
Entity.Commons.PagingParam pp = new Entity.Commons.PagingParam(pi ?? 1, 10);
if (!string.IsNullOrEmpty(title))
vp.AddItem("Title", title);
if (!string.IsNullOrEmpty(cid))
vp.AddItem("HelpCategoryID", cid);
Entity.PagedList<Entity.HelpDocument> list = _HelpDocumentServices.GetHelpDocument(vp, pp);
list.AddParameters = new System.Collections.Specialized.NameValueCollection();
list.AddParameters.Add("title", title);
list.AddParameters.Add("cid", cid);
return PartialView("LelpItemList", list);
}
ASPX文件:
<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent" runat="server">
<script type="text/javascript">
$(function() {
$('#search_btn').click(function() {
var title = $('#Title').val();
var cid = $('#CategoryList').val();
$.ajax({
type: "POST",
url: "/Help/PageHelp",
data: "pi=1&title=" + title + "&cid=" + cid,
success: function(data) {
$('#helpitem_div').html(data);
}
});
})
})
</script>
<script src="http://www.cnblogs.com/Scripts/js/Help/DelHelp.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h1>
<span class="action-span1"><a href="/">管理中心</a> - 帮助管理 </span>
</h1>
<div>
标题:<input id="Title" type="text" />分类:
<select id="CategoryList" name="CategoryList">
<%foreach (var i in ViewData["Category"] as List<Entity.HelpCategory>)
{
%>
<option value="<%=i.HelpCategoryID %>" style="color: #339; background-color: #eee;">
<%=i.CategoryName%>
</option>
<%
if (i.SubCategoryies != null)
{
foreach (var ii in i.SubCategoryies)
{
%>
<option value="<%=ii.HelpCategoryID %>"> =><%=ii.CategoryName%>
</option>
<%}
}
} %>
</select>
<input id="search_btn" class="button" type="button" value="查询" /></div>
<div id="helpitem_div">
<%Html.RenderPartial("LelpItemList", Model); %>
</div>
</asp:Content>
ASCX文件内容:
<script type="text/javascript">
//链接始终在一个窗口中打开
function ActiveWin(url) {
var w = screen.availWidth;
var h = screen.availHeight;
var popup = window.open(url, "win_name", "top=0 left=0 scrollbars=yes status=no menubar=0 toolbar=0 resizable=yes");
popup.focus();
return false;
}
</script>
<script src="http://www.cnblogs.com/Scripts/js/liebiao_table.js" type="text/javascript"></script>
<table width="100%" id="" cellpadding="3" cellspacing="1" class="liebiao_table">
<thead>
<tr>
<th>
标题
</th>
<th>
分类
</th>
<th>
排序
</th>
<th>
创建时间
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
<%foreach (var item in Model)
{
%>
<tr>
<td>
<a href="/help/HelpDetail?helpid=<%=item.HelpDocumentID %>">
<%=item.Title %></a>
</td>
<td>
<%=item.HelpCategory.FatherCategory.CategoryName %>=><%=item.HelpCategory.CategoryName %>
</td>
<td align="center">
<%=item.SortNumber %>
</td>
<td align="center">
<%=item.CreateDate %>
</td>
<td align="center">
<a href="javascript:void(0)" onclick="ActiveWin('/help/HelpDetail?helpid=<%=item.HelpDocumentID %>')">
查看</a> <a href="javascript:void(0)" onclick="ActiveWin('/Help/EditHelp?hid=<%=item.HelpDocumentID %>')">编辑</a>  <a
href="javascript:void(0)" onclick="DelHtml('<%=Model.PageIndex %>','<%=item.HelpDocumentID %>')">删除</a>
</td>
</tr>
<%
}
%>
</tbody>
</table>
<%=Html.AjaxPager(Model, "helpitem_div", "PageHelp", "Help")%>