asp.net-mvc-3 - Asp.net Mvc3 webgrid 和分页

Question

我正在尝试学习Asp.net mvc。我知道它与形式不同，我可能需要改变我的思维方式。我的问题是关于 webgrid 的。当我将 webgrid 添加到我的页面并使用 Post 按下搜索按钮时，它会使用寻呼机等呈现表格。但是寻呼机上的链接不是发布表单，它们只是链接，我丢失了所有表单的数据。

Controller 有两种索引方法，一种用于 get，另一种用于 post。为了让我什么都不做，我只是在本例中创建新的 View 模型搜索类并将其设置为 View 。对于我的帖子方法，我抓取 View 模型进行搜索并设置填充 View 模型以进行查看。

问题: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>

这是我的 Controller :搜索发生在 Index Post 方法中，它只有我的 View 模型类。

    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 并订阅任何分页器链接的单击事件，然后获取所需页面的值，将其注入(inject)表单上的隐藏字段并将表单提交到服务器以便其他两个值也被发送。

因此，首先在 Search View 模型上添加一个 Page 可为 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;
    });
});