使用JS函数调用在MVC3中分页问题

时间:2013-03-13 09:24:39

标签: c# javascript jquery asp.net-mvc-3 lambda

我在MVC3应用程序中实现了分页。单击每个页码后,将发生回发并正确显示所请求的页面。

以下是我的扩展代码 -

public static string PageLinks(this HtmlHelper html, PageLinks pagelinks, Func<int, string> pageUrl)
        {
            StringBuilder result = new StringBuilder();
            int startFrom;
            //Previous Page link
            int divi = (int)pagelinks.Current / pagelinks.PageLinksToDisplay;
            if (divi > 0)
            {
                TagBuilder tag = new TagBuilder("a"); // Construct an <a> tag
                tag.MergeAttribute("href", pageUrl((divi * pagelinks.PageLinksToDisplay) - 1));
                tag.InnerHtml = "Prev";
                result.AppendLine(tag.ToString());
            }
            if (divi > 0)
            {
                startFrom = (divi * pagelinks.PageLinksToDisplay);
            }
            else
            {
                startFrom = (divi * pagelinks.PageLinksToDisplay) + 1;
            }
            int endOn = (startFrom + pagelinks.PageLinksToDisplay);
            if (endOn > pagelinks.Total + 1)
                endOn = pagelinks.Total + 1;

            for (int i = startFrom; i < endOn; i++)
            {
                TagBuilder tag = new TagBuilder("a"); // Construct an <a> tag
                tag.MergeAttribute("href", pageUrl(i));
                tag.InnerHtml = i.ToString();
                if (i == pagelinks.Current)
                    tag.AddCssClass("selected");
                result.AppendLine(tag.ToString());
            }

            if (endOn < pagelinks.Total)
            {
                TagBuilder tag = new TagBuilder("a"); // Construct an <a> tag
                tag.MergeAttribute("href", pageUrl(endOn));
                tag.InnerHtml = "Next";
                result.AppendLine(tag.ToString());
            }
            return result.ToString();
        } 

以下是我的View实现分页的源代码 -

<!-- Paging Strip -->
           <div class="PagerDiv">
                <div class="pagerCurrent">
                <%
                    int? currentPgNo = Model.Pager.Current;
                    int totalItems = Model.Pager.TotalItemCount;
                    int displayRecs = Model.Pager.PageSize;
                %>
                    Showing  <%=(currentPgNo * displayRecs) - (displayRecs - 1)%> - 
                    <%=(currentPgNo * displayRecs < totalItems ? currentPgNo * displayRecs : totalItems)%>
                    out of <%=totalItems%> 
                </div>
                <div class="pager">
                    <%=Html.PageLinks(Model.Pager, x => Url.Action("Index", new { Current = x }))%>
                </div>
                <div class="options">

                    Sort By : <%:Html.DropDownListFor(m=>m.SortBy, Model.SortOptions, new { onchange = "this.form.submit();" })%>
                </div>
            </div>
           <!-- End Paging-->

以下是输出 - Pager

问题: -

到目前为止一切顺利。我正面临新的困难。 我有一个Div的视图,其中数据通过json呈现。我正在渲染我的部分视图之一作为Json。该局部视图显示了需要实现分页的列表。我不想回发而是需要在Div中显示新渲染的json。

代码

<%=Html.PageLinks(Model.Pager, x => Url.Action("Index", new { Current = x }))%>

实际上生成了编号的框,我想要的是在这些编号的框而不是网址上附加JS函数。

我试过

<%=Html.JQueryPageLinks(Model.Pager, x => "MyJSFunction(" + x + ")")%>

其中x代表页码。创建另一个扩展但似乎没有运气。

这是代码 -

public static string JQueryPageLinks(this HtmlHelper html, PageLinks pagelinks, string jQryFn)
        {
            StringBuilder result = new StringBuilder();
            int startFrom;
            //Previous Page link
            int divi = (int)pagelinks.Current / pagelinks.PageLinksToDisplay;
            if (divi > 0)
            {
                TagBuilder tag = new TagBuilder("a"); // Construct an <a> tag
                //tag.MergeAttribute("href", pageUrl((divi * pagelinks.PageLinksToDisplay) - 1));
                tag.Attributes.Add("onclick", jQryFn);
                tag.InnerHtml = "Prev";
                result.AppendLine(tag.ToString());
            }
            if (divi > 0)
            {
                startFrom = (divi * pagelinks.PageLinksToDisplay);
            }
            else
            {
                startFrom = (divi * pagelinks.PageLinksToDisplay) + 1;
            }
            int endOn = (startFrom + pagelinks.PageLinksToDisplay);
            if (endOn > pagelinks.Total + 1)
                endOn = pagelinks.Total + 1;

            for (int i = startFrom; i < endOn; i++)
            {
                TagBuilder tag = new TagBuilder("a"); // Construct an <a> tag
                //tag.MergeAttribute("href", pageUrl(i));
                tag.Attributes.Add("onclick", jQryFn);
                tag.InnerHtml = i.ToString();
                if (i == pagelinks.Current)
                    tag.AddCssClass("selected");
                result.AppendLine(tag.ToString());
            }

            if (endOn < pagelinks.Total)
            {
                TagBuilder tag = new TagBuilder("a"); // Construct an <a> tag
                //tag.MergeAttribute("href", pageUrl(endOn));
                tag.Attributes.Add("onclick", jQryFn);
                tag.InnerHtml = "Next";
                result.AppendLine(tag.ToString());
            }
            return result.ToString();
        }

有人可以帮我解决这个问题。 感谢您分享宝贵的时间和智慧。

编辑: 最简单的是我希望JS函数调用页码而不是url。 例如, 点击1将调用MyJSFunction(1), 点击2将调用MyJSFunction(2) 等等......

1 个答案:

答案 0 :(得分:0)

这是我写的(糟糕的!)一段时间后可能会有所帮助。它用查询结果替换指定的div

        <div id="placeholder">
        <br />Enter your email address below.....<br /><br />
        <% using (Ajax.BeginForm("VoucherRequest", "Intro", new AjaxOptions { UpdateTargetId = "placeholder", InsertionMode = InsertionMode.Replace, HttpMethod = "Post" }))    
        {%>
            First Name: <%: Html.TextBox("txtFirstName", "", new { style = "width:50%" })%><br /><br />
            Last Name: <%: Html.TextBox("txtLastName", "", new { style = "width:50%" })%><br /><br />
            Your Email: <%: Html.TextBox("txtEmail", "", new { style = "width:50%" })%><br /><br />
            <input type="submit" value="Submit" />
            <br /><br />
            <%: Html.CheckBox("OptIn", false) %> ....
        </div>