过滤器迷路中的WebGrid +分页+排序+过滤在.NET 4.0中 [英] Filter is getting lost in WebGrid + Paging + Sorting + Filtering in .NET 4.0
问题描述
我已经实现了一个的WebGrid。排序，分页和过滤不一起工作。当你独自一人使用他们他们的工作。当你把三，在同一时间，滤波不起作用。
症状：结果
筛选结果集，然后进行排序。
或
筛选结果集，然后进入下一个页面。
在这两种情况下，过滤器会丢失。但它确实页面和排序。
在code背后：
当操作方法是通过排序或分页叫，空显示每个过滤器的参数。
在操作方法是通过过滤器调用时，滤波器参数来通过。
这告诉我，当你启动排序或分页，它不是提交表单。
公众的ActionResult我的页面（INT？页，诠释？rowsPerPage，
串排序，串sortdir，
字符串订单编号，字符串的人，串产品）
我已经在SO和其他地方看了看周围。有很多的例子，人们问怎么办一种或另一种或所有三种。但我只看过<一个href=\"http://stackoverflow.com/questions/9235161/asp-net-mvc3-webgrid-ajax-filters-ajax-sorting-paging\">one我的问题的，所以我在这里张贴。 （他是未解决为好）
我有我的网页实现如下：
@using（Ajax.BeginForm（我的空间'，空，新AjaxOptions {InsertionMode = InsertionMode.Replace，UpdateTargetId =myGrid}，{新的id =过滤器}） ）
{
＆LT; DIV CLASS =右＆GT;
＆LT;选择一个id =rowsPerPageNAME =rowsPerPage＆GT;
＆LT;选项＆GT; 15℃; /选项＆GT;
＆LT;选项＆GT; 25℃/选项＆GT;
＆LT;选项＆GT; 50℃/选项＆GT;
＆LT;选项＆GT; 75℃/选项＆GT;
＆LT;选项＆GT; 100℃/选项＆GT;
＆LT; /选择＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =表＆GT;
＆LT; DIV CLASS =tablerow的＆GT;
＆LT; DIV CLASS =TableCell的＆GT;
订单号
＆LT; / DIV＆GT;
＆LT; DIV CLASS =TableCell的＆GT;
人
＆LT; / DIV＆GT;
＆LT; DIV CLASS =TableCell的＆GT;
产品
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =tablerow的＆GT;
＆LT; DIV CLASS =TableCell的＆GT;
＆LT;输入类型=文本ID =订单号码NAME =订单号码/＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =TableCell的＆GT;
＆LT;输入类型=文本ID =人NAME =人/＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =TableCell的＆GT;
＆LT;输入类型=文本ID =产品名称=产品/＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =TableCell的＆GT;
＆LT;输入类型=提交级=按钮值=搜索/＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;＆LT; BR /＆GT;＆LT; DIV ID =myGrid＆GT;
@ Html.Partial（_我的页面，模型）
＆LT; / DIV＆GT;}
栅格被实现为这样的局部视图：
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
resetUI（）;
}）;
＆LT; / SCRIPT＆GT;@ {
VAR电网=新的WebGrid（canPage：真，rowsPerPage：Model.rowsPerPage，canSort：真的，ajaxUpdateContainerId：网格，ajaxUpdateCallback：resetUI）;
grid.Bind（Model.rows，rowCount等：Model.TotalRecords，autoSortAndPage：假）;
@ grid.GetHtml（
TABLESTYLE：fancyTable
headerStyle：头，
footerStyle：页脚
rowStyle：行，
alternatingRowStyle：ALT，
模式：WebGridPagerModes.Numeric | WebGridPagerModes.Next previous，
nextText：下一步，
previousText：previous
htmlAttributes：新{ID =网格}，
列：grid.Columns（
grid.Column（订购日期，订购日期，格式为：@＆LT;文字和GT; @（（item.OrderDate = NULL）及及（item.OrderDate.ToString（MM / DD / YYYY）！ ？=01/01/0001）item.OrderDate.ToString（MM / DD / YYYY）：）＆LT; /文本＆GT;）
grid.Column（订单编号，订单号），
grid.Column（字段1字段1），
grid.Column（字段2，字段2），
grid.Column（人，人），
grid.Column（产品，产品），
grid.Column（格式：（项目）=＆GT; Html.ActionLink（查看，详细信息，新{ID = item.orderNumber}））
）
）;
}
在建立分页和排序环节，的WebGrid助手考虑到当前的URL所有的查询字符串参数 present 。它忽略了发布和路由值。而且，由于您的搜索表单的帖子，已经在这个表格中输入用户的值不在查询字符串present，所以它们不是分页的部分和排序链接，当你点击这些链接之一值被丢失。这是由设计。
因此，要解决这个问题的方法之一是替换你当作ajaxForm：
@using（Ajax.BeginForm（我的空间'，空，新AjaxOptions {InsertionMode = InsertionMode.Replace，UpdateTargetId =myGrid}，{新的id =过滤器}） ）
使用GET动词一个标准的HTML表单：
@using（Html.BeginForm（我的空间'，空，FormMethod.Get））
或使用GET动词Ajax表格：
@using（Ajax.BeginForm（我的空间'，空，新AjaxOptions {列举HTTPMethod =获取，InsertionMode = InsertionMode.Replace，UpdateTargetId =myGrid}，{新身份证=过滤器}））
现在，当用户需要过滤的东西并点击了搜索提交按钮，他在搜索表单将在查询字符串结束输入值和渲染的WebGrid助手时，将使用它们生成的排序和网页链接和当然，当你点击的值将被发送到服务器，这些链接。
如果你想在这个更多的控制，你可能会考虑更先进的网格控件，如 MvcContrib.Grid 或 Telerik的电网为ASP.NET MVC 。
I've implemented a WebGrid. Sorting, paging and filtering do not work together. They work when you use them alone. When you combine the three, at the same time, filtering doesn't work.
The symptom:
Filter the resultset, then sort.
or
Filter the resultset, then go to next page.
In both cases, the filter is lost. But it does page and sort.
In the code behind: When the action method is called via a sort or pagination, nulls show for each of the filter parameters.
When the action method is called via the filter, the filter parameters come through.
This tells me that when you initiate a sort or a pagination that it's not submitting the form.
public ActionResult MyPage(int? page, int? rowsPerPage,
string sort, string sortdir,
string orderNumber, string person, string product)
I've looked around on SO and elsewhere. There are plenty of examples and people asking how to do one or another or all three. But I have only seen one with my issue, so I'm posting it here. (his was unsolved as well)
I have my page implemented as follows:
@using (Ajax.BeginForm("MyPage", null, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "myGrid" }, new { id = "filter" }))
{
<div class="right">
<select id="rowsPerPage" name="rowsPerPage">
<option>15</option>
<option>25</option>
<option>50</option>
<option>75</option>
<option>100</option>
</select>
</div>
<div class="table">
<div class="tableRow">
<div class="tableCell">
Order Number
</div>
<div class="tableCell">
Person
</div>
<div class="tableCell">
Product
</div>
</div>
<div class="tableRow">
<div class="tableCell">
<input type="text" id="orderNumber" name="orderNumber" />
</div>
<div class="tableCell">
<input type="text" id="person" name="person" />
</div>
<div class="tableCell">
<input type="text" id="product" name="product" />
</div>
<div class="tableCell">
<input type="submit" class="button" value="Search" />
</div>
</div>
</div>
<br/>
<div id="myGrid">
@Html.Partial("_MyPage", Model)
</div>
}
The grid is implemented as a partial view like this:
<script type="text/javascript">
$(document).ready(function () {
resetUI();
});
</script>
@{
var grid = new WebGrid(canPage: true, rowsPerPage: Model.rowsPerPage, canSort: true, ajaxUpdateContainerId: "grid", ajaxUpdateCallback: "resetUI");
grid.Bind(Model.rows, rowCount: Model.TotalRecords, autoSortAndPage: false);
@grid.GetHtml(
tableStyle: "fancyTable",
headerStyle: "header",
footerStyle: "footer",
rowStyle: "row",
alternatingRowStyle: "alt",
mode: WebGridPagerModes.Numeric | WebGridPagerModes.NextPrevious,
nextText: "Next",
previousText: "Previous",
htmlAttributes: new { id = "grid" },
columns: grid.Columns(
grid.Column("OrderDate", "Order Date", format: @<text>@((item.OrderDate != null) && (item.OrderDate.ToString("MM/dd/yyyy") != "01/01/0001") ? item.OrderDate.ToString("MM/dd/yyyy") : "")</text>),
grid.Column("OrderNumber", "Order Number"),
grid.Column("Field1, "Field 1"),
grid.Column("Field2", "Field 2"),
grid.Column("Person", "Person"),
grid.Column("Product", "Product"),
grid.Column(format: (item) => Html.ActionLink("View", "Details", new { id = item.orderNumber }))
)
);
}
When building the pagination and sort links, the WebGrid helper takes into account all query string parameters present in the current url. It ignores POSTed and route values. And since your Search form POSTs, the values that have been entered by the user in this form are not present in the query string, so they are not part of the pagination and sort links and when you click on one of those links the values are lost. This is by design.
So one way to fix that is to replace your AjaxForm:
@using (Ajax.BeginForm("MyPage", null, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "myGrid" }, new { id = "filter" }))
with a standard HTML form using the GET verb:
@using (Html.BeginForm("MyPage", null, FormMethod.Get))
or an AJAX form using the GET verb:
@using (Ajax.BeginForm("MyPage", null, new AjaxOptions { HttpMethod = "Get", InsertionMode = InsertionMode.Replace, UpdateTargetId = "myGrid" }, new { id = "filter" }))
Now, when the user wants to filter something and hits the Search submit button the values he entered in the search form will end up in the query string and when rendering the WebGrid helper will use them to generate its Sort and Page links and of course when you click on those links the values will be sent to the server.
If you want more control over this you might consider more advanced grid controls such as MvcContrib.Grid or the Telerik Grid for ASP.NET MVC.
这篇关于过滤器迷路中的WebGrid +分页+排序+过滤在.NET 4.0中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
