ASP.NET MVCを使用してJqGridの複数のテーブルから関連データを動的に表示する方法は?

複数の ASP.NET MVC テーブルからの関連データを JqGrid に動的に取り込む

このガイドでは、ASP.NET MVC アプリケーションの JqGrid 内の 2 つの関連するデータベース テーブルのデータを表示する方法を説明します。 テーブルはリンクされていますが、関係に使用できるのは ID 値のみです。

ソリューションの概要:

このアプローチには、必要なデータを JSON 形式で返すようにコントローラーを変更すること、JqGrid の位置データをフォーマットするヘルパー関数を作成すること、JqGrid の beforeProcessing イベントを使用して列オプションを動的に設定すること、および Bootstrap Select2 によるユーザー エクスペリエンスを強化することが含まれます。検索とフィルタリング。

1.コントローラーの変更:

コントローラー アクションは、両方のテーブル (例: Students と Locations) からデータを取得し、JSON 応答内に位置データを含める必要があります。

2.サーバー側のデータ形式:

ヘルパー関数は、位置データを JqGrid の editoptions.value および searchoptions.value と互換性のある形式に変換するために重要です。これには通常、場所を順序付けし、それらを「ID:Value;」として連結することが含まれます。

3.動的 JqGrid 列構成:

クライアント側の JavaScript コードで beforeProcessing イベントを使用して、サーバーの応答に基づいて JqGrid 列のオプションを動的に設定します。 これにより、列フォーマッタ、編集タイプ、その他の設定を実行時に調整できるようになります。

4. Bootstrap Select2 による拡張検索/フィルタリング:

Bootstrap Select2 を統合して、ドロップダウンの検索およびフィルター機能を向上させ、標準の選択要素と比較して高度な検索機能と優れたユーザー インターフェイスを提供します。

コントローラー コードの例:

<code class="language-csharp">public class HomeController : Controller
{
    // ... other controller actions ...

    public JsonResult Students()
    {
        var students = new List<Student> { /* ... your student data ... */ };
        var locations = new List<City> { /* ... your city data ... */ };

        var formattedLocations = locations.OrderBy(l => l.CNAME)
                                         .Aggregate("", (current, location) => current + $"{location.CID}:{location.CNAME};");

        // Remove trailing semicolon
        if (formattedLocations.EndsWith(";"))
        {
            formattedLocations = formattedLocations.Substring(0, formattedLocations.Length - 1);
        }

        return Json(new
        {
            colModelOptions = new
            {
                CITY = new
                {
                    formatter = "select",
                    edittype = "select",
                    editoptions = new { value = formattedLocations },
                    stype = "select",
                    searchoptions = new { sopt = new[] { "eq", "ne" }, value = $":Any;{formattedLocations}" }
                }
            },
            rows = students
        }, JsonRequestBehavior.AllowGet);
    }
}</code>

この例は、簡略化された構造を示しています。 Student クラスと City クラスとデータ取得を、特定のデータベース スキーマとデータ アクセス方法に合わせて調整します。 動的に提供される colModelOptions.

を処理するには、クライアント側の JqGrid 構成を必ず調整してください。

以上がASP.NET MVCを使用してJqGridの複数のテーブルから関連データを動的に表示する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。