• 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

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

  • 相关阅读:
    虚函数和纯虚函数
    函数指针
    const成员函数
    随笔
    Myeclipse/eclipse的Web project改写成Maven项目
    Maven项目配置不接文件名
    Tomcat需要更改三个端口,才能在一台机器上搭载多个tomcat
    maven错误:Project configuration is not up-to-date with pom.xml
    Failed to execute goal on project MakeFriends: Could not resolve dependencie The POM for .chengpai.jtd:jtd-service-api:jar:1.0-SNAPSHOT is missing, no dependency information available
    编译器问题:运行maven,报错-Dmaven.multiModuleProjectDirectory system propery is not set. Check $M2_HOME environment variable and mvn script match.
  • 原文地址:https://www.cnblogs.com/lori/p/2207490.html
Copyright © 2020-2023  润新知