asp.net mvc 3 webgrid 排序仍然存在 ?sortdir=ASC

Question

我正在 asp.net mvc 中尝试一些网格。 Microsoft 在 mvc 3 的预发行版中也有一个网格，所以我想我会尝试一下。

基本功能很容易实现，但是当涉及到排序时，我遇到了一些问题。 网格按照 url 进行排序。在 url 中，您可以按以下方式获得排序列和排序方向： ?sortdir=ASC&sort=ABONNMENT

现在您可能会期望在对特定列进行排序后，该列上的 sortdir 查询字符串将更改为 ?sortdir=DESC 但事实并非如此。它保留 ?sortdir=ASC 。 有谁知道这是一个错误还是一个功能，以及如何解决这个问题？

另一个非常烦人的事情：如果我单击排序链接，就会完成 httpget 请求。 因此我失去了我的模型。因为页面上可以过滤网格（搜索功能），所以我想将其保留在模型中。 这会更容易&在我看来，将这些数据放入模型状态比将其存储在会话状态中更干净的解决方案。 是否可以更改排序标头链接的行为，以便执行 http post？

对此有什么想法或想法吗？ Tnx 寻求帮助。

greetz, Koen

视图的代码如下：

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<table>
    <tr>
        <td>
            <h1 class="normal">List of subscription</h1>
        </td>
        <td>

        </td>
    </tr>
</table>
<% using (Html.BeginForm("List", "Subscription", FormMethod.Post)) { %>

<table border="0" cellpadding="0" cellspacing="5">
    <tr>
        <td>
            Search By
        </td>
        <td>
            <%: Html.DropDownListFor(m => m.SearchByColumn, Ogone.FrontEnd.Web.Controllers.SubscriptionController.SubscriptionSearchList) %>
        </td>
        <td>
            <%: Html.TextBoxFor(m => m.SearchByText) %>
        </td>
        <td>
            <input name="button" type="submit" value="Search" />
        </td>
    </tr>
</table>

<div>
<%  
var grid = new System.Web.Helpers.WebGrid(Model.SubscriptionList,  
              columnNames: new List<string>(){"Title"},  
              canPage:false);  
 %> 
<%= grid.GetHtml(columns: grid.Columns(
             grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.ID })),
             grid.Column("ID"),
             grid.Column("ISP"),
             grid.Column("ABONNEMENT"),
             grid.Column("MODE"),
             grid.Column("SETUPFEE"),
             grid.Column("MONTHLYFEE"))
             ) %>
</div>

Answer 1

发生这种情况是因为网格列名称必须与您的字段或属性相对应。在网格标题中生成 url 的方法将 url 查询字符串中的“排序”与有界列和网格列名称进行比较。他们三人一定是同一个人。如果列名称的定义配置不正确，则将无法正确生成 url。

无论如何..这里是一些正确定义的列名称的示例。

这里我们有示例域类要显示

public class Person
{
    public string FirstName;
    public string LastName;
    public Address LivesIn;
}

public class Address
{
    public string Country;
    public string City;
}

现在让我们显示列表

使用您的列名作为字段

grid.Column("FirstName"),
grid.Column("LastName"),
grid.Column("LivesIn.City"),
grid.Column("LivesIn.Country")

...所有列都有正确的排序网址

如果您在列名中输入错误，则会出现异常

grid.Column("FirstName"),
grid.Column("MyLastName"), <-- this throws exception
grid.Column("LivesIn.City"),
grid.Column("LivesIn.Country")

但是您可以使用格式并且不会抛出异常

grid.Column("FirstName"),
grid.Column("MyLastName", format: item => item.LastName</text>),
grid.Column("LivesIn.City"),
grid.Column("LivesIn.Country")

...但是 MyLastName 列的排序 url 会很糟糕！始终 sortDir=ASC

您需要使用好的列名来拥有正确的排序 url 和自定义格式，所以……

grid.Column("FirstName"),
grid.Column("LastName", format: item => item.LastName),
grid.Column("LivesIn.City"),
grid.Column("LivesIn.Country")

一切都可以

复杂类型怎么样？

grid.Column("FirstName"),
grid.Column("LastName"),
grid.Column("LivesIn.MyNonExistingField", format: item => item.LivesIn.City),
grid.Column("LivesIn.Country")

....哇...一切都好..那是bug的孩子..列“LivesIn.MyNonExistingField”有正确的排序网址。

好的...如果我们不想暴露我们的域结构怎么办？然后我们需要在绑定期间添加列名称列表

var grid = new WebGrid(persons, columnNames: new [] { "Foo" });
-- or --
grid.Bind(persons, columnNames: new [] { "Foo" });

grid.Column("Foo", format: item => item.FirstName),
grid.Column("LastName"),
grid.Column("LivesIn.MyNonExistingField", format: item => item.LivesIn.City),
grid.Column("LivesIn.Country")

..现在 Foo 列具有正确的排序 url

但要小心！还有另一个错误。

如果我们将手动列名称添加到绑定中，则将跳过所有列，直到找到手动列。示例：

var grid = new WebGrid(persons, columnNames: new [] { "Foo" });
-- or --
grid.Bind(persons, columnNames: new [] { "Foo" });

grid.Column("FirstName"),
grid.Column("Foo", format: item => item.LastName),
grid.Column("LivesIn.MyNonExistingField", format: item => item.LivesIn.City),
grid.Column("LivesIn.Country")

...列“FirstName”的排序 url 将无法正确生成...sortDir=ASC 始终...要解决此问题，还需要添加一个“FirstName”作为列名称，如下所示：

var grid = new WebGrid(persons, columnNames: new [] { "FirstName", "Foo" });
-- or --
grid.Bind(persons, columnNames: new [] { "FirstName", "Foo" });

grid.Column("FirstName"),
grid.Column("Foo", format: item => item.LastName),
grid.Column("LivesIn.MyNonExistingField", format: item => item.LivesIn.City),
grid.Column("LivesIn.Country")

@Kohen

删除您的列中的 columnNames此处代码

var grid = new System.Web.Helpers.WebGrid(Model.SubscriptionList,  
          columnNames: new List<string>(){"Title"},  
          canPage:false);

...或添加所有列名称，例如“ID”、“ISP”等

Answer 2

我一直在考虑解决该问题的方法，并且找到了一个。

我将一个额外的参数注入到查询字符串集合中。这样我就可以将搜索过滤器放入查询字符串中。

通常查询字符串集合是只读的，但我找到了一些代码来解决这个问题。

将参数添加到查询字符串的代码：

            public static void Add(string name, string value)
            {
                    NameValueCollection qs = System.Web.HttpContext.Current.Request.QueryString;
                    qs = (NameValueCollection)System.Web.HttpContext.Current.Request.GetType().GetField("_queryString", BindingFlags.NonPublic | BindingFlags.Instance).GetValue(System.Web.HttpContext.Current.Request);
                    PropertyInfo readOnlyInfo = qs.GetType().GetProperty("IsReadOnly", BindingFlags.NonPublic | BindingFlags.Instance);
                    readOnlyInfo.SetValue(qs, false, null);
                    qs[name] = value;
                    readOnlyInfo.SetValue(qs, true, null);
            }

新控制器代码：

            public ActionResult Index(string SearchFilter)
            {
                    // check querystring search
                    if (string.IsNullOrEmpty(SearchFilter) && !String.IsNullOrEmpty(Request.QueryString["search"]))
                            SearchFilter = Request.QueryString["search"];

                    var model = new Models.SubscriptionListModel { SearchFilter = SearchFilter };

                    if (string.IsNullOrEmpty(SearchFilter))
                    {
                            model.SubscriptionList = _subscriptionHandler.ReadWhereIdLessThanThousand();
                    }
                    else
                    {
                            // add search filter to the querystring
                            Common.QueryString.Add("search", SearchFilter);
                            model.SubscriptionList = _subscriptionHandler.ReadWhereContains(SearchFilter);
                    }

                    if (Request.IsAjaxRequest())
                    {
                            return View("SubscriptionList", model);
                    }
                    else
                    {
                            return View("Index", model);
                    }
            }

如果有人有更清晰的解决方案来解决此问题，仍然欢迎提出建议:-)

Answer 3

我不确定为什么 DESC 不切换为 ASC。我有一个类似的例子，它工作得很好。尝试使用 ajax 容器(ajaxUpdateContainerId)。这可能会有所帮助，如果没有其他办法的话，它可以解决您在 httpget 请求中遇到的问题，维护您的搜索结果。这是我所拥有的：（我正在使用剃刀，但应该很容易转换）。

只需添加新属性： ajaxUpdateContainerId: "div_name"

用 ID 为 div_name 的 div 包裹网格

@{
var grid = new System.Web.Helpers.WebGrid(Model.SubscriptionList, canPage:false, ajaxUpdateContainerId: "grid");  
}
<div id="grid">
    @grid.GetHtml(columns: grid.Columns(  
    grid.Column(format:(item) => Html.ActionLink("Edit", "Edit", new { id=item.Id })),
    grid.Column("ISP"),
    grid.Column("ABONNEMENT"))) 
</div>

祝你好运，希望它有所帮助！

Answer 4

我通过设置 'SortColumn' 属性在 MVC 4 中解决了这个问题。网格的值到“排序”查询字符串参数的值：

grid = new WebGrid(...
grid.Bind(Model...

grid.SortColumn = this.Request.QueryString["sort"];

@grid.GetHtml(columns:...

我注意到对于我的模型“SortColumn”道具中的“日期”列。无论“sort”查询字符串参数的值如何，都被设置为默认排序列的名称...