将 JqGrid 值发布到 MVC 控制器

Posted 2023-05-09

【中文标题】将 JqGrid 值发布到 MVC 控制器

【英文标题】：Post JqGrid values to MVC controller

【发布时间】：2017-01-01 14:39:30

【问题描述】：

我有以下带有复选框列的 JqGrid：

$(document).ready(function() 
        $("#tblJQGrid").jqGrid(
            url: 'Home/GetDataForCompanyJqGrid',
            datatype: "json",
            mtype: 'GET',
            colNames: ['CompanyID', '', 'Offices'],
            colModel: [
             name: 'CompanyID', index:'CompanyID', key:true, hidden:true,
             name: 'check', index: 'check', width: 50, align: 'center', editable: true, edittype: 'checkbox', editoptions: value: "True:False", formatter: "checkbox", formatoptions: disabled: false,
             name: 'Description', index: 'CompanyName', width: 200, align: 'center' ],
            rowNum: 10,
            data: ,
            sortname: 'CompanyName',
            viewrecords: true,
            sortorder: "desc",
            height: "auto",
            caption: "List Offices:");
    );

我的 JqGrid 包含一个复选框列，如果选中行的复选框，我想将我的 CompanyID 列的值发布到我的 MVC 控制器。我尝试通过在我的 html 表单 action="@Url.Action("ExportData", "MyControler")" 中指定一个操作，首先将所有行的值发布到我的 MCV ActioResult，但我的 ActionResult 中只得到空值。 谁能帮助我了解如何将值从我的 jqgrid 发布到我的 MVC ActionResult？

【问题讨论】：

您的问题并不完全清楚。您是否使用来自服务器的某些值填充check，或者最初未选中所有复选框并且用户应该选择某人并且您需要将选定的 CompanyID 发送到服务器？我想您应该删除 name: 'check' 列并添加multiselect: true 选项。您使用 rowNum: 10 而没有 loadonce: true 选项。您是否在'Home/GetDataForCompanyJqGrid' 中实现了服务器端分页？如果它返回多于 10 行会怎样？ 'Home/GetDataForCompanyJqGrid'返回的数据是哪种格式的？

如果从'Home/GetDataForCompanyJqGrid'返回的数据格式类似于"CompanyID": 123, "CompanyName": "some name"的项目数组，那么您可以删除CompanyID列并使用jsonReader: id: "CompanyID" 。每个网格行（<tr> 元素）都有id 属性（rowid）。如果来自CompanyID 的值是唯一的，那么最好将这些值用作rowid。您可能会有只有一列的网格。

您使用（必须使用）哪个版本的 jqGrid 以及来自哪个 jqGrid 分支（free jqGrid、商业Guriddo jqGrid JS 或版本 GetDataForCompanyJqGrid 代码可以非常简单，javascript 也非常简单，您需要使用loadonce: true, multiselect: true, forceClientSorting: true, multiPageSelection: true。以the demo为基础。

是的，复选框最初没有被选中，用户必须选择一些，然后我想将选定的 CompanyID 发送到服务器。不需要分页，因为不会超过 6 行。我首先从数据库中读取 jqgrid 数据，也许这些信息对您有帮助，因为关于数据格式的问题。对不起，如果我不能给你尽可能多的详细信息，但这是我第一个使用 mvc、jqgrid 等的项目。

【参考方案1】：

我建议您使用multiselect: true 而不是name: 'check' 列。此外，您可以从控制器操作GetDataForCompanyJqGrid 以非常简单的形式返回数据，例如：

[
    "CompanyID": 123, "CompanyName": "Company name 1",
    "CompanyID": 345, "CompanyName": "Company name 2",
    ...
    "CompanyID": 456, "CompanyName": "Company name N"
]

并使用类似的代码

$("#tblJQGrid").jqGrid(
    url: 'Home/GetDataForCompanyJqGrid',
    datatype: "json",
    colNames: ['Offices'],
    colModel: [
         name: 'CompanyName', width: 200, align: 'center' 
    ],
    multiselect: true,
    jsonReader:  id: "CompanyID" ,
    rowNum: 1000, // no local paging
    viewrecords: true,
    height: "auto",
    caption: "List Offices:"
);

在$(document).ready 的内部。您可以使用$("#tblJQGrid").jqGrid("getGridParam", "selarrrow") 获取所选项目的 CompanyID 数组。您可以在页面上添加一个按钮并使用$("#tblJQGrid").jqGrid("getGridParam", "selarrrow") 然后将$.ajax 的信息发送到服务器。例如，您可以使用

var ids = $("#tblJQGrid").jqGrid("getGridParam", "selarrrow");
$.ajax(
    type: "POST",
    url: 'Home/ExportData',
    data: 
        selectedIds: ids.join() // send comma separated ids
        // ExportData action should have parameter with the name selectedIds
    
);

查看the old answer获取相应的代码示例。

【讨论】：

是否可以发送一个 selectedIds 数组？

@F***J：一切皆有可能，但在 JavaScript 代码中使用 ids.join() 和在 C# 代码中使用 var ids = selectedIds.Split(','); 会产生最简单明了的代码。这是我推荐你的方式。任何其他代码都需要更多的 C# 代码来自定义绑定，但它最终会做同样的事情。以the answer 为例。

你能给我举个例子吗，我的 ActionResult 应该是什么样子？因为我仍然只得到空值。我试过public ActionResult ExportData(string selectedIds)

@F***J：这有点困难，因为不清楚您使用哪个版本的 MVC 或 Web API。你用[HttpPost]吗？您是否确认您向服务器发布了正确的数据？您可以使用 IE/Chrome 的开发者工具的网络选项卡查看 HTTP 流量。

我想问题可能出在其他地方，因为我的表单中仍然指定了旧操作并使用提交按钮提交了表单，所以我认为它没有调用$.ajax。我应该先更改我的 Button，然后再试一次。