MVC精华之实现AJAX分页和搜索 及 实现HTML分页和搜索

简介:

AJAX分页和搜索,一般是两个文件,主文件aspx一般是显示搜索表单,而ascx分部视图中显示列表,一般代码如下:

   <%=Html.TextBox("UserName") %>
    <input type="button" id="search" value="搜索" />
    <div id="List">
        <%Html.RenderPartial("UCList", Model); %>
    </div>

需要对按钮进行触发,JS代码如:

  <script type="text/javascript">
        $(function () {
            $("#search").click(function () {
                var userName = $("#UserName").val();
                $.ajax({
                    type: "post",
                    url: "/TestPager/Index",
                    data: "userName=" + userName,
                    success: function (html) {
                        $('#List').html(html);
                    }
                });

            });
        });
    </script>

ASCX文件可能是这样的:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Entity.PagedList<MvcApplication1.Models.UserBases> >" %>
<table>
    <thead>
        <tr>
            <td>
                姓名
            </td>
            <td>
                更新时间
            </td>
        </tr>
    </thead>
    <tbody>
        <%if (Model != null)
          {
              foreach (var i in Model)
              { %>
        <tr>
            <td>
                <%=i.Name%>
            </td>
            <td>
                <%=i.UpdateDate %>
            </td>
        </tr>
        <%}
          } %>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">
                <%=Html.AjaxPager(Model, "List", "Index", "TestPager")%>
            </td>
        </tr>
    </tfoot>
</table>

所对应的controller可能是这样的:

#region AJAX分页和查询
        /// <summary>
        /// AJAX分页与查询测试
        /// </summary>
        /// <param name="userName"></param>
        /// <param name="page"></param>
        /// <returns></returns>
        public ActionResult Index(string userName, int? page)
        {
            pp = new Entity.PagingParam(page ?? 1, 3);
            if (!string.IsNullOrEmpty(userName))
                vp.AddItem("userName", userName);

            Entity.PagedList<Models.UserBases> model = GetModel(vp, pp);
            model.AddParameters = new System.Collections.Specialized.NameValueCollection();
            model.AddParameters.Add("userName", userName);
            if (Request.IsAjaxRequest())
                return PartialView("UCList", model);
            else
                return View(model);
        }
        #endregion

 

而HTML分页,一般需要一个ASPX文件就可以了,只不能有两种状态,一个是GET状态,一个是POST提交表单的状态,反回到代码中可能是这样的,如:

#region HTML分页和查询
        public ActionResult HtmlIndex(int? page)
        {
            pp = new Entity.PagingParam(page ?? 1, PAGESIZE);
            if (!string.IsNullOrEmpty(Request.QueryString["UserName"])) //从URL中获取数据
                vp.AddItem("userName", Request.QueryString["UserName"]);
            Entity.PagedList<Models.UserBases> model = GetModel(vp, pp);
            return View(model);
        }
        [HttpPost]
        public ActionResult HtmlIndex(FormCollection form)
        {
            pp = new Entity.PagingParam(Convert.ToInt32(form["page"]), PAGESIZE);
            if (!string.IsNullOrEmpty(form["UserName"]))//从表单中获取数据
                vp.AddItem("userName", form["UserName"]);
            Entity.PagedList<Models.UserBases> model = GetModel(vp, pp);
            model.AddParameters = new System.Collections.Specialized.NameValueCollection();
            model.AddParameters.Add("userName", form["UserName"]);
            return View(model);
        }
        #endregion

 

看完文单后,你是否是对分页及查询有一个清晰的认识了,呵呵!

本文转自博客园张占岭(仓储大叔)的博客,原文链接:MVC精华之实现AJAX分页和搜索 及 实现HTML分页和搜索,如需转载请自行联系原博主。

目录
相关文章
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
482 0
|
前端开发
JavaWeb15(AJAX+JSON实现无刷新分页)
JavaWeb15(AJAX+JSON实现无刷新分页)
|
Web App开发 前端开发 Java
基于Spring3 MVC实现基于HTML form表单文件上传
基于Spring3 MVC实现基于HTML form表单文件上传
104 7
基于Spring3 MVC实现基于HTML form表单文件上传
|
开发框架 .NET
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
463 0
|
XML 前端开发 安全
【专栏:HTML 进阶篇】HTML 表单验证与 AJAX 交互
【4月更文挑战第30天】本文探讨了HTML表单验证和AJAX在现代网页开发中的重要性。HTML表单验证通过必填、数据格式和范围验证确保用户输入的准确性,而AJAX则实现异步通信,提供动态数据加载、局部更新和实时交互。两者的结合优化了表单处理,提高用户体验并减少服务器负担。实际应用包括在线注册、购物车系统和表单反馈。然而,开发者需注意浏览器兼容性、错误处理和安全性问题。掌握这些技术,能打造更智能、高效的网页应用,为用户提供更好的体验。在数字化时代,HTML表单验证和AJAX是网页创新与进步的关键。
178 0
|
前端开发 Java
教你实现SSM和Ajax后端分页
教你实现SSM和Ajax后端分页
|
JSON 前端开发 数据格式
ajax请求模拟json数据并且拼接到html
ajax请求模拟json数据并且拼接到html
103 0
|
前端开发
Ajax提交请求后台返回一个完整的html页面
Ajax提交请求后台返回一个完整的html页面
258 0
|
前端开发 JavaScript Java
Jquery+Ajax+Bootstrap Paginator实现分页的拼接
Jquery+Ajax+Bootstrap Paginator实现分页的拼接
126 0
|
前端开发
【(不用Ajax)解决 Layui 插件分页点下一页后又自动跳回前一页的问题】
【(不用Ajax)解决 Layui 插件分页点下一页后又自动跳回前一页的问题】
327 0