ASP.Net MVC 4 Razor——在webgrid上对搜索结果进行分页

本文关键字：搜索结果 分页 MVC Net Razor ASP webgrid | 更新日期: 2023-09-27 18:13:24

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

Actionmethod: 

  [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();
      }

Search Page 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/>
}

Results Display View:

    @{
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>
}
}

ASP.Net MVC 4 Razor——在webgrid上对搜索结果进行分页

既然您得到了请求的页码，并且您知道您正在查找的结果有多少，那么您只是缺少了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()无论有多少将显示在页面上。

使用WebGrid(表的过滤子集)进行分页和排序的问题已经解决。. NET网页框架:在WebGrid中显示搜索结果。

我曾尝试将其翻译为MVC，但我更适应Web页面，所以请宽容。

控制器

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);
}
<<p> 视图/em> 
@{
    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样本db;如果你想使用我的相同的数据库，你可以在这个链接中找到它。

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

根据Mike Brind的说法，"问题的答案就在脚本部分出现的jQuery代码片段中。处理程序附加到表头部和表脚区域中链接的onclick事件—或者排序和分页链接。当单击它们时，获取链接的值并将其提供给表单的action属性，然后使用POST提交表单，并通过返回false取消GET请求。这确保了在请求中保留分页和排序信息。QueryString集合，而任何表单字段值都在Request中传递。形成集合。 "

相关文章：