Asp.net Mvc3 webgrid和分页

Question

我正在努力学习Asp.net mvc.我知道它与形式不同,我需要改变我的思维方式.我的问题是关于webgrid.当我将webgrid添加到我的页面并点击搜索按钮时,使用Postr呈现带有寻呼机的表格,依此类推.但寻呼机上的链接不是张贴形式,它们只是链接,我丢失了所有表格的数据.

Controller有两种索引方法,一种是get,另一种是post.为了让我什么都不做,我只是在这种情况下创建新的viewmodel Search类并将其设置为view.对于我的post方法,我抓住我的视图模型进行搜索并设置填充的viewmodel进行查看.

问题:webgrid将寻呼机呈现为链接,因此它将进入索引获取,但因为它不是一个帖子请求我没有填写任何表单字段,我的搜索将不提供相同的结果集.

也许示例代码可以更好地解释它.

视图:

<form action="" method="post">

Esas no : @Html.TextBoxFor(x=>x.Name)
Yil : @Html.TextBoxFor(x=>x.Year)

<input type="submit" value="Search" />

<hr />
@ViewBag.Message
<hr />

@{ var grid = new WebGrid(Model.Results,rowsPerPage:5);}

@grid.GetHtml(tableStyle:"table",htmlAttributes:new {id="tbl"} )

</form>

这是我的控制器:搜索在Index Post方法中发生,它只有我的viewmodel类.

    private ISearchContext _sc;

    public  MyController(ISearchContext sc)
    {
        _dc = dc;
    }

    //
    // GET: /Dava/

    public ActionResult Index()
    {
        var search = new Search();
        ViewBag.Message = "";
        return View(search);
    }

    [HttpPost]
    public ActionResult Index(Search search)
    {

        Search sres = _dc.SearchFromRepository(search);
        ViewBag.Message = String.Format("Count:{0} ",sres.Results.Count);
        return View(sres);
    }

搜索模型类如下:

public class Search
{
    public int Year { get; set; }
    public string Name { get; set; }


    public IList<Item> Results { get; set; }

    public Search()
    {
        Results = new List<Item>();
    }
}

Answer 1

解决此问题的一种方法是使用javascript并订阅任何寻呼机链接的click事件,然后获取所需页面的值,将其注入表单上的隐藏字段并将表单提交给服务器,以便其他两个值也被发送.

首先,Page在Search视图模型上添加一个可以为null的整数属性,并在表单中添加一个相应的隐藏字段,其中包含所选的页码:

@Html.HiddenFor(x => x.Page, new { id = "page" })

然后你只需要一个小的javascript片段进入页面来订阅寻呼机链接的.click事件:

$(function () {
    $('tfoot a').click(function () {
        // when the user clicks on any of the pager links
        // try to extract the page number from the link and
        // set the value of the hidden field
        var page = this.href.match(/page=([0-9])+/)[1];
        $('#page').val(page);

        // submit the form so that the POST action is invoked
        // passing along the search criteria (Name and Year) along
        // with the page hidden field value to the Index action
        $('form').submit();

        // cancel the default action of the link which is to simply redirect
        // to the Index action using a GET verb.
        return false;
    });
});

Answer 2

这是一个不使用JavaScript的解决方法.

我看到的问题是,分页链接没有收到任何必须保留的路由信息​​,比如搜索过滤器.IMO这是一个公然的疏忽!在这里多一点额外的想法会节省很多头痛!

这种技术"抛弃"WebGrid的内置分页,并使用Helper生成分页链接以及我们想要的宝贵路由数据.

完成后,您只需将WebGrid呈现为网格,并使用Helper创建分页链接.这里的一个优点是你可以将它们放在我们喜欢做的顶部和底部.

我尝试将类似的CSS用于NuGet为您的解决方案提供的Pager.css中提供的内容.对于你们中的一些人来说,助手应该足够完整,但很容易扩展.

新的新的我刚刚使用Ajax版本更新了帮助程序.我对Razor助手有点n00b,所以我无法弄清楚如何重新考虑使用普通模板; 有人请？重要的额外细节是传入AjaxOptions并确保POST用作动词,否则你可能不会以正确的控制器方法结束.

助手(App_Code/LocalHelpers.cshtml):

@helper DoPager(System.Web.Mvc.HtmlHelper hh, string pageActionName, WebGrid grid, int maxPageLinks, object rvd) {
<div class="pager">
<div class="pageof">Page <b>@(grid.PageIndex + 1)</b> of <b>@grid.PageCount</b></div>
@if (grid.PageCount > 1) {
<ul>
<li>
@{ RouteValueDictionary rvdp1 = new RouteValueDictionary(rvd);
   rvdp1.Add("Page", 1);
}
@hh.ActionLink("<<", pageActionName, rvdp1)
</li>
@{ int start = Math.Max(0, grid.PageIndex - maxPageLinks / 2); }
@for (int ix = 0; ix + start < grid.PageCount; ix++) {
    int pageno = start + ix + 1;
    var css = hh.Raw(pageno - 1 == grid.PageIndex ? " class=\"highlighted\"" : "");
    RouteValueDictionary rvdp = new RouteValueDictionary(rvd);
    rvdp.Add("Page", pageno);
<li@css>
@hh.ActionLink(pageno.ToString(), pageActionName, rvdp)
</li>
    if (ix >= maxPageLinks) { break; }
}
<li>
@{ RouteValueDictionary rvdpX = new RouteValueDictionary(rvd);
   rvdpX.Add("Page", grid.PageCount);
}
@hh.ActionLink(">>", pageActionName, rvdpX)
</li>
</ul>
}
</div>
}
@helper DoAjaxPager(System.Web.Mvc.AjaxHelper aa, System.Web.Mvc.Ajax.AjaxOptions aopts, System.Web.Mvc.HtmlHelper hh, string pageActionName, WebGrid grid, int maxPageLinks, object rvd) {
<div class="pager">
<div class="pageof">Page <b>@(grid.PageIndex + 1)</b> of <b>@grid.PageCount</b></div>
@if (grid.PageCount > 1) {
<ul>
<li>
@{ RouteValueDictionary rvdp1 = new RouteValueDictionary(rvd);
   rvdp1.Add("Page", 1);
}
@aa.ActionLink("<<", pageActionName, rvdp1, aopts)
</li>
@{ int start = Math.Max(0, grid.PageIndex - maxPageLinks / 2); }
@for (int ix = 0; ix + start < grid.PageCount; ix++) {
    int pageno = start + ix + 1;
    var css = hh.Raw(pageno - 1 == grid.PageIndex ? " class=\"highlighted\"" : "");
    RouteValueDictionary rvdp = new RouteValueDictionary(rvd);
    rvdp.Add("Page", pageno);
<li@css>
@aa.ActionLink(pageno.ToString(), pageActionName, rvdp, aopts)
</li>
    if (ix >= maxPageLinks) { break; }
}
<li>
@{ RouteValueDictionary rvdpX = new RouteValueDictionary(rvd);
   rvdpX.Add("Page", grid.PageCount);
}
@aa.ActionLink(">>", pageActionName, rvdpX, aopts)
</li>
</ul>
}
</div>
}

视图:

<center>
@LocalHelpers.DoPager(Html, "Index", grid, 10, new { CurrentFilter = ViewBag.CurrentFilter })
</center>
@grid.Table(
    tableStyle: "centerit",
    columns: grid.Columns(
        grid.Column(format: @<span>@Html.ActionLink("Edit", "Edit", new { id = item.ID }) | @Html.ActionLink("Details", "Details", new { id = item.ID }) | @Html.ActionLink("Delete", "Delete", new { id = item.ID })</span>),
            grid.Column("PartNumber", "Part Number"),
            grid.Column("Description", "Description"),
            grid.Column("Regex", "Regex")
            )
        )
<center>
@LocalHelpers.DoPager(Html, "Index", grid, 10, new { CurrentFilter = ViewBag.CurrentFilter })
</center>

在我看来,我正在回收"CurrentFilter"以了解要过滤的内容.这连接到Controller Action(未图示).