Question

我创建了一个搜索页面，它返回要在webgrid上显示的对象列表。我正在使用webgrids默认分页。当我尝试翻页到搜索结果的第二页时出现问题 - 我被带回搜索页面。如何使用razor webgrid的deafult分页功能并通过搜索结果实现分页？

行动方法：

  [HttpPost]
    public ActionResult GetEmails(UserResponse response )
    {
        if (response.RefId != null)
        {
            int refID = Convert.ToInt32(response.RefType);
            var query = from c in db.tb_EmailQueue
                        where c.ReferenceTypeId == refID && c.ReferenceId.Contains(response.RefId)
                        select c;

            var results = new List<tb_EmailQueue>();

            results.AddRange(query);

            return View("Index", results);
        }
      return View();

      }

搜索页面视图：

    <body>
@using (Html.BeginForm())
         {
           @Html.DropDownListFor(x=> x.RefType, (IEnumerable<SelectListItem>)  ViewBag.Categories,"Please select reference type") 

    <br/>

    <p>Reference Type</p>
    @Html.TextBoxFor(x => x.RefId)
 <input type ="submit" value="Submit" />

}

@using (Html.BeginForm())
{
    @Html.TextBoxFor(x=>x.Date, new{@id="example1"})
    <input type ="submit" value="Submit" />
    <br/>

}

结果显示视图：

    @{
if (Model.Any())
{
    var grid = new WebGrid(Model, canPage: true, rowsPerPage: 100);


    @grid.GetHtml(tableStyle: "table table-striped table-bordered", columns: grid.Columns(
        grid.Column(header: "EmailQueueId",
                    columnName: "EmailQueueId",
                    format: item => Html.ActionLink(((int) item.EmailQueueId).ToString(), "Details", new {id = item.EmailQueueId})),
        grid.Column("QueueDateTime", canSort: true, format: @<text>@item.QueueDateTime.ToString("dd/MM/yy H:mm:ss")</text>),
        grid.Column("ReferenceTypeID"),
        grid.Column("ReferenceID"),
        grid.Column(header: "ToList",
                    columnName: "ToList",
                    format: @<input type ="text" value="@item.ToList"  title="@item.ToList" readonly="readonly"/>),
        grid.Column(header: "Subject",
                    columnName: "Subject",
                    format: @<input type ="text" value="@item.Subject" title ="@item.Subject" readonly="readonly"/>),
        grid.Column("FailureCount")
                                                                        ))
}

else
{
    <p>No records</p>
}
}

Answer 1

由于您返回了要求的页码，并且您知道要查找的结果数量，因此您只是错过了LINQ查询的一部分。我不使用SQL语法，所以请原谅这一点，尽管它应该很容易翻译成你的方法。

var query = (from c in db.tb_EmailQueue
            where c.ReferenceTypeId == refID && c.ReferenceId.Contains(response.RefId)
            select c).Skip((pageNumber - 1) * pageSize).Take(pageSize);

您想要(pageNumber - 1)，因为您的pageNumber将基于1，如果您正在寻找第一页，则不希望跳过任何内容(0 * pageSize)。有了这些结果，您只想Take()，但页面上会显示很多。

Answer 2

Mike Brind在本文中解决了使用WebGrid对表的过滤子集进行分页和排序的问题：Displaying Search Results In A WebGrid。

我曾试图在MVC中翻译它，但我对网页感觉更舒服，所以要宽容。

控制器的

public ActionResult Customers(string country)
{
    var search = (country == null ? "" : country);
    NORTHWNDEntities db = new NORTHWNDEntities();
    var query = from c in db.Customers
                where c.Country.Contains(search)
                select c;
    var results = new List<Customers>();
    results.AddRange(query);

    return View("Customers", results);
}

视图的

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

<hgroup class="title">
    <h1>Customers</h1>
</hgroup>

<section id="searchForm">
    @using (Html.BeginForm()){
        <p>
            Country: @Html.TextBox("Country", @Request["Country"]) 
            <input type="submit" />
        </p>
    }
</section>
<section>
    <div>
        @grid.GetHtml(columns:grid.Columns(
            grid.Column(columnName:"CompanyName",header:"Name"),
            grid.Column(columnName:"Address"),
            grid.Column(columnName:"City"),
            grid.Column(columnName:"Country")
        ))
    </div>
</section>

@section scripts{
    <script type="text/javascript">
   $(function(){
       $('th a, tfoot a').on('click', function () {
            $('form').attr('action', $(this).attr('href')).submit();
            return false;
        });
    });
    </script>
}

我使用了Northwind示例数据库;如果你想使用我的同一个数据库，你可以在this link找到它。

解决方案将搜索表单和WebGrid保持在同一页面中，因为每次更改分页或排序顺序时，都必须重新发布搜索条件以过滤表格。

根据Mike Brind的说法，“问题的答案在于脚本部分中出现的jQuery片段。处理程序附加到表头和桌脚区域中链接的onclick事件 - 单击它们时，获取链接的值并将其提供给表单的action属性，然后使用POST提交表单，并通过return false取消GET请求。这样可以确保分页和排序信息保留在Request.QueryString集合中，而任何表单字段值都在Request.Form集合中传递。“

ASP.Net MVC 4 Razor - 在webgrid上搜索搜索结果

2 个答案: