如何使用 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中文網其他相關文章！