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分页和搜索,如需转载请自行联系原博主。

目录
相关文章
|
前端开发
JavaWeb15(AJAX+JSON实现无刷新分页)
JavaWeb15(AJAX+JSON实现无刷新分页)
|
3月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
37 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
2月前
|
JSON JavaScript 前端开发
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
21 0
|
4月前
|
开发框架 .NET
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
152 0
|
6月前
|
Web App开发 前端开发 Java
基于Spring3 MVC实现基于HTML form表单文件上传
基于Spring3 MVC实现基于HTML form表单文件上传
48 7
基于Spring3 MVC实现基于HTML form表单文件上传
|
7月前
|
JavaScript 前端开发 Java
jquery ajax+spring mvc上传文件
jquery ajax+spring mvc上传文件
|
JSON 前端开发 数据格式
ajax请求模拟json数据并且拼接到html
ajax请求模拟json数据并且拼接到html
51 0
|
前端开发
Ajax提交请求后台返回一个完整的html页面
Ajax提交请求后台返回一个完整的html页面
100 0
|
前端开发 JavaScript Java
Jquery+Ajax+Bootstrap Paginator实现分页的拼接
Jquery+Ajax+Bootstrap Paginator实现分页的拼接
62 0
|
开发框架 前端开发 .NET
用ajax和asp.net实现智能搜索功能
用ajax和asp.net实现智能搜索功能
82 0

热门文章

最新文章

相关实验场景

更多