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 中国語 Web サイトの他の関連記事を参照してください。