如何使用 jQuery $.post 和 ASP.NET MVC 正确填充 jqGrid 下拉列表？

使用 jQuery $.post 和 ASP.NET MVC 正确填充 jqGrid 下拉列表

本文解决了使用 jQuery 的 $.post 方法和 ASP.NET MVC 动态填充 jqGrid 下拉列表时的一个常见问题：由于数据格式不正确而收到“未定义”值。

问题： 发送到 jqGrid 的数据格式不正确，导致“未定义”下拉值。 jqGrid 需要特定的格式（例如 value: "FE:FedEx; IN:InTime; TN:TNT"），但请求可能会以不同的格式返回数据。

原始请求和响应：原始方法可能使用 $.post 来获取 JSON 数据。然而，JSON 结构与 jqGrid 的期望不符。 该解决方案涉及在值创建期间删除额外的引号并更改控制器对 ContentResult(sb.ToString()) 的响应。 这是一种不太稳健的方法。

更强大的解决方案：利用 dataUrl 和 buildSelect

更好的方法是使用 jqGrid 的 dataUrl 和 buildSelect 功能来获得更干净、更易于维护的代码。

dataUrl: 此属性指定以更简单的格式返回数据的 URL，适合解析。 格式不需要预先格式化为键值对字符串。

buildSelect: 此回调函数处理服务器的响应（最好是 JSON）并构造正确的下拉 HTML。这将数据检索与数据格式化分开，提高了代码组织和可读性。

示例实现：

控制器（ASP.NET MVC）：

<code class="language-csharp">public JsonResult GetDestinationList() {
    List<string> allDestinations = GetAllDestinations();
    return Json(allDestinations, JsonRequestBehavior.AllowGet);
}</code>

jqGrid 配置（JavaScript）：

<code class="language-javascript">{
    name: 'destinations',
    editable: true,
    edittype: 'select',
    editoptions: {
        dataUrl: '/YourController/GetDestinationList', // Replace with your controller action
        buildSelect: function(data) {
            var s = '';
            if (data.length) {
                for (var i = 0; i < data.length; i++) {
                    var ri = data[i]; // Assuming data is an array of strings
                    s += '<option value="' + ri + '">' + ri + '</option>';
                }
            }
            return s;
        }
    }
}</code>

这种修改后的方法为填充 jqGrid 下拉列表提供了更高效且可维护的解决方案。 服务器返回简单数据，客户端 buildSelect 函数处理格式化，从而更好地分离关注点。请记住将 /YourController/GetDestinationList 替换为控制器操作的实际 URL。

以上是如何使用 jQuery $.post 和 ASP.NET MVC 正确填充 jqGrid 下拉列表？的详细内容。更多信息请关注PHP中文网其他相关文章！