jQuery Bootgrid - Ajax 使用 ASP.NET MVC 操作对参数进行排序

Question

我设法创建了一个 Api 控制器，它从我的存储库中检索数据，并通过 Bootgrid 和 Ajax 在我的视图中填充了一个网格。这是发送到 Api 的操作的请求数据示例，由 their Docs here 提供（查找 POST 正文请求选项卡）：

current=1&rowCount=10&sort[sender]=asc&searchPhrase=&id=b0df282a-0d67-40e5-8558-c9e93b7befed

这是一个例子URL:

http://localhost/api/SomeController?current=1&rowCount=10&sort%5BName%5D=asc&searchPhrase=&id=b0df282a-0d67-40e5-8558-c9e93b7befed

我创建了两个助手类来处理我必须 return 作为响应的数据，并对数据进行排序（因为它是一个数组）：

public class SortData
{
    public string Field { get; set; } // FIeld Name
    public string Type { get; set; } // ASC or DESC
}

public class BootgridResponseData<T> where T: class
{
    public int current { get; set; } // current page
    public int rowCount { get; set; } // rows per page
    public IEnumerable<T> rows { get; set; } // items
    public int total { get; set; } // total rows for whole query
}

因此，我的操作如下：

    public BootgridResponseData<SomeViewModel> Get(int current, int rowCount, List<SortData> sort, string searchPhrase, string id)
    {
       // get items and return a bootgrid response data with them...
    }

该方法被调用并且所有参数都正确地带有数据，除了 sort，它始终为 null。

我应该期待什么样的参数？我也尝试输入 object，但它仍然为空。

Answer 1

我也遇到过这个问题。你想多了。创建简单的模型来处理来自 jquery-bootgrid 的 post 调用很好，但您也可以只在 post 方法中使用简单的参数。至于排序，它看起来像一对 Key-Value，但没有正确序列化。

我最终尝试了一个 Dictionary 对象并且它有效。

这是我的签名：

[HttpPost]
public async Task<ActionResult> GetActiveDogs(int? current, int? rowCount, 
                Dictionary<string, string> sort, string searchPhrase = null)

Answer 2

我在将排序选项传递给我的网络服务时遇到了同样的问题。 Dictionary 对象也没有解决我的问题。为了解决这个问题，我为每个要通过 bootgrid 排序选项传递的字段创建了一个 class 保存字符串属性。查看代码摘录

class TestSort
{
   public string field1 { get; set; }
   public string field2 { get; set; }
   ...
}

我在我的网络服务中使用这个 class 作为排序选项参数。此 class 中由 bootgrid 选项引用的所有字段都设置为 "ASC" 或 "DESC"。其他的保持为空。

我添加了一个 'orderBy' 属性到这个 class 那 returns 一个非空字段的 orderby 子句。

Answer 3

进一步了解后，我看到 Bootgrid 有一个 requestHandler setting 允许您操作发送到服务器的数据。

我在 javascript 中是这样做的：

var grid = $("#my-grid").bootgrid({
        ajax: true,
        rowCount: 10,
        ajaxSettings: {
            method: "POST",
            cache: true
        },
        requestHandler: function (request) {
            // Scan the original sort object from Bootgrid...
            // and populate an array of "SortData"...
            request.sortItems = [];
            if (request.sort == null)
                return request;
            for (var property in request.sort) {
                if (request.sort.hasOwnProperty(property)) {
                    request.sortItems.push({ Field: property, Type: request.sort[property] });
                }
            }
            return request;
        },
        url: "/api/FooApi"
    });

然后我在 API 中创建了我的 post 动作，如下所示：

public class FooApiController : ApiController
{

    [HttpPost]
    public BootgridResponseData<FooModel> Get(BootgridRequestData model)
    {
        // This would come from some data store, using the request params...
        // I use PagedList to make pagination easier...
        IPagedList<FooModel> itemsPaged = store.GetPagedFoo();

        // Then return the response with data...
        return new BootgridResponseData<FooModel>()
        {
            current = model.current,
            rowCount = model.rowCount,
            rows = itemsPaged,
            total = itemsPaged.TotalItemCount
        };
    }
}

BootgridResponseData已经在我的问题中显示了。我刚刚添加了一个 BootgridRequestData 结构如下：

public class BootgridRequestData
{
    public int current { get; set; }
    public int rowCount { get; set; }
    public string searchPhrase { get; set; }
    public IEnumerable<SortData> sortItems { get; set; }
}

然后我什至可以使用我原来的 SortData 助手 class:

public class SortData
{
    public string Field { get; set; } // FIeld Name
    public string Type { get; set; } // ASC or DESC
}

Answer 4

接近 1。假设您有 table 列 "col1, col2, col3, ..."。你可以使用：

public ActionType Get(int current, int rowCount, Sort sort, string searchPhrase) {
    //sort.col1 == 'asc' (consider sorted by col1 in ascending order)
}

public class Sort
{
    public string col1 { get; set; }
    public string col2 { get; set; }
    public string col3 { get; set; }
    //... other columns
}

方法二 您可以使用删除参数并手动解析请求数据。我在这里使用 post 而不是 get.

[HttpPost]
public object Post(){
    string jsonContent = Request.Content.ReadAsStringAsync().Result;
    Dictionary<string, string> keyvalues = new Dictionary<string, string>();
    string[] keyvalue_strings = jsonContent.Split('&');
    string sort_column = "";
    string sort_direction = "";
    for (var i = 0; i< keyvalue_strings.Length; i++)
    {
        var a = keyvalue_strings[i].Split('=');
        a[0] = a[0].Replace("%5B", "[").Replace("%5D", "]");
        keyvalues.Add(a[0], (a[1]));
        if (a[0].Contains("sort"))
        {
            sort_column = a[0].Replace("sort[", "").Replace("]", "");
            sort_direction = a[1];
        }
    }
    //now you have keyvalues, sort_column, sort_direction.
    //...
}

jQuery Bootgrid - Ajax 使用 ASP.NET MVC 操作对参数进行排序

jQuery Bootgrid - Ajax Sort Parameter with ASP.NET MVC Actions

asp.net-mvc

json

model-binding

asp.net-web-api2

jquery-bootgrid