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 %>">&nbsp;&nbsp;=><%=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>&nbsp;&nbsp;<a href="javascript:void(0)" onclick="ActiveWin('/Help/EditHelp?hid=<%=item.HelpDocumentID %>')">编辑</a>&nbsp;&nbsp<a
                        href="javascript:void(0)" onclick="DelHtml('<%=Model.PageIndex %>','<%=item.HelpDocumentID %>')">删除</a>
            </td>
        </tr>
        <%
            } 
        %>
    </tbody>
</table>
<%=Html.AjaxPager(Model, "helpitem_div", "PageHelp", "Help")%>
,如需转载请自行联系原博主。
目录
相关文章
|
7月前
|
设计模式 存储 前端开发
MVVM、MVC、MVP三种常见软件架构设计模式的区别
MVC、MVP 和 MVVM 是三种常见的软件架构设计模式,主要通过分离关注点的方式来组织代码结构,优化开发效率。
150 12
|
8月前
|
设计模式 前端开发 JavaScript
浅谈MVC、MVP、MVVM框架模式
浅谈MVC、MVP、MVVM框架模式
73 0
|
8月前
|
前端开发 数据安全/隐私保护
什么是mvvm,mvp、mvc和mvvm模式有什么区别?
什么是mvvm,mvp、mvc和mvvm模式有什么区别?
141 0
|
7月前
|
设计模式 存储 前端开发
MVC(Model-View-Controller)是一种软件设计模式,用于将应用程序的输入逻辑、业务逻辑和用户界面逻辑分离
【6月更文挑战第17天】**MVC模式**是软件设计模式,用于分离输入逻辑、业务逻辑和用户界面。模型处理数据和业务,视图展示数据,控制器协调两者响应用户请求。优点包括:关注点分离、提高开发效率、简化测试、支持多视图及便于大型项目管理。
63 3
|
3月前
|
存储 前端开发 测试技术
MVC、MVP、MVVM 模式
MVC、MVP 和 MVVM 是三种常见的软件架构模式,用于分离用户界面和业务逻辑。MVC(Model-View-Controller)通过模型、视图和控制器分离数据、界面和控制逻辑;MVP(Model-View-Presenter)将控制逻辑移到 Presenter 中,减少视图的负担;MVVM(Model-View-ViewModel)通过数据绑定机制进一步解耦视图和模型,提高代码的可维护性和测试性。
|
8月前
|
设计模式 存储 前端开发
MVC(模型-视图-控制器)是一种在Web应用程序开发中广泛使用的软件设计模式
【5月更文挑战第12天】MVC模式是Web应用开发中的常见设计模式,将逻辑、数据和界面分离,提升代码可维护性和重用性。模型处理数据逻辑,视图展示数据,控制器协调用户输入与模型视图交互。优点包括代码分离、易维护、可扩展和组件重用,促进高效灵活的开发。
77 2
|
4月前
|
设计模式 开发框架 前端开发
MVC 模式在 C# 中的应用
MVC(Model-View-Controller)模式是广泛应用于Web应用程序开发的设计模式,将应用分为模型(存储数据及逻辑)、视图(展示数据给用户)和控制器(处理用户输入并控制模型与视图交互)三部分,有助于管理复杂应用并提高代码可读性和维护性。在C#中,ASP.NET MVC框架常用于构建基于MVC模式的Web应用,通过定义模型、控制器和视图,实现结构清晰且易维护的应用程序。
69 2
|
3月前
|
前端开发 Java
【案例+源码】详解MVC框架模式及其应用
【案例+源码】详解MVC框架模式及其应用
208 0
|
4月前
|
前端开发 测试技术 开发者
MVC模式在现代Web开发中有哪些优势和局限性?
MVC模式在现代Web开发中有哪些优势和局限性?
|
4月前
|
设计模式 前端开发 PHP
PHP中实现简易的MVC模式
【8月更文挑战第31天】 本文将引导你了解如何在PHP中应用MVC(Model-View-Controller)架构模式,通过一个简单的例子展示其实现过程。我们将从基础的概念出发,逐步深入到代码实践,最终让你能够自己动手构建一个简易的MVC框架。文章不仅提供理论知识,还包含具体的代码示例,帮助你更好地理解并运用MVC模式。