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

目录
相关文章
|
5月前
|
JavaScript
自定义全能搜索HTML源码
自定义全能搜索HTML源码
52 1
自定义全能搜索HTML源码
|
5月前
|
前端开发 JavaScript
百度搜索:蓝易云【用JavaScript和HTML实现一个精美的计算器网页】
该计算器网页使用HTML定义了页面结构,CSS样式使其具有精美的外观,而JavaScript脚本实现了计算器的逻辑。用户可以通过按钮输入数字和操作符,并通过“=”按钮来进行计算,计算结果会显示在文本框中。
75 6
|
安全
HTML常用表单写一个百度搜索和注册页面
HTML常用表单写一个百度搜索和注册页面
907 0
|
前端开发
JavaWeb15(AJAX+JSON实现无刷新分页)
JavaWeb15(AJAX+JSON实现无刷新分页)
|
5月前
|
关系型数据库 MySQL
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
|
2月前
|
开发框架 .NET
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
96 0
|
4月前
|
Web App开发 前端开发 Java
基于Spring3 MVC实现基于HTML form表单文件上传
基于Spring3 MVC实现基于HTML form表单文件上传
42 7
基于Spring3 MVC实现基于HTML form表单文件上传
|
5月前
|
JavaScript 前端开发 Java
jquery ajax+spring mvc上传文件
jquery ajax+spring mvc上传文件
|
11月前
|
JSON 前端开发 数据格式
ajax请求模拟json数据并且拼接到html
ajax请求模拟json数据并且拼接到html
42 0
|
11月前
|
前端开发
Ajax提交请求后台返回一个完整的html页面
Ajax提交请求后台返回一个完整的html页面