MVC5、AJAX、C＃、MSSQLサーバーを使用したカスケードドロップダウンリスト

Question

私はWindowsフォームからのMVCと3層アーキテクチャーからの非常に新しいです。

データベースから占められたカスケードドロップダウンリスト（DDL）を使用して見つけようとしています。 MS SQL Server 2012、VS 2013

を使用しているIM

現在、ユーザーがDDLから複数の回答から選択できるユーザーアンケートに取り組んでいます。次の質問で回答を変更する必要がある選択によって異なります。

データベース：

表DDLStacks：

StackId | StackName
   1    | Berry
   2    | BerryColor
   3    ....

.

表DDLStackContents（SCIDスタックコンテンツID、インデックス作成目的）

SCId | StackId | GroupId | Key | Value
--------------------------------------
1 | 1 | Null | 1 | Grape
2 | 1 | Null | 2 | Avocado
3 | 1 | Null | 3 | Banana
4 | 2 | Null | 1 | Yellow
5 | 2 | Null | 2 | Green
6 | 2 | 1 | 3 | Red
7 | 2 | 1 | 4 | Orange
8...

.

手順：

   CREATE PROCEDURE [dbo].[spDLLSelect]
        @p_StackName_in VARCHAR(20),
        @p_GroupId_in Int = null
    AS 
    BEGIN
        SELECT [Key],Value FROM DDLStackContents
        WHERE StackID IN (SELECT StackId FROM DDLStacks WHERE StackName = @p_StackName_in)
        AND (GroupId = @p_GroupId_in OR @p_GroupId_in IS null) 
        Order By [Key] 
    END

.

DDLStacksを保持することができるように、DDLStackContentsはその質問に対する答えを可能にします。

グループがある場合、そのグループからの回答だけを選択できます。その他の特定のスタックに対するすべての回答。

今度はSPDLLSelectにアクセスするためのADO.NETエンティティデータモデルを作成しました。

今私のフルーツモデルはこれです

public class FruitModel
{
    public IEnumerable<SelectListItem> BerryList { get; set; }
    public IEnumerable<SelectListItem> BerryColorList { get; set; }

    [Display(Name = "Berry")]
    public byte? Berry { get; set; }

    [Display(Name = "BerryColor")]
    public byte? BerryColor { get; set; }
}

.

マイコントローラこれは、カラーを選択する必要があります。ベリーの種類によって異なります。バナナの場合、Avacadoがすべて選択した場合は、1。

public class HomeController : Controller
{
    public ActionResult Index()
    {
        CherryEntities db = new CherryEntities();
        var model = new FruitModel();
        model.BerryList = new SelectList(db.spDLLSelect("Berry", null), "Key", "Value");
        //model.BerryColorList = new SelectList(db.spDLLSelect("BerryColor", null), "Key", "Value");
        //model.BerryColorList = new SelectList(db.spDLLSelect("BerryColor", 1), "Key", "Value");
        return View(model);
    }
}   

.

これは私のビューです：

@using (Html.BeginForm("Register2", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{

<div class="form-group">
    @Html.LabelFor(m => m.Berry, new { @class = "col-md-2 control-label" })
    <div class="col-md-10" >
        @Html.DropDownListFor(m => m.Berry, Model.BerryList, "Please Select")
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(m => m.BerryColor, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.DropDownListFor(m => m.BerryColor, Model.BerryColorList, "Please Select")
    </div>
</div>

}

.

これは私の基本的なコーディングです、私はこの作業をするためにさまざまな方法を試しています、私はAjax強く型付けされたコードでこれをする適切な方法を見たいです。

部分的な視点を使用している可能性がありますか？何かご意見は？

Answer 1

あなたのビューが強く型付けされているモデルをすでに持っています。あなたがする必要があるのは、ドロップダウンリストに変更イベントを追加します（詳細は下記参照リンクを参照）。変更イベントでは、選択した値に従って値をロードできます。Berryが選択されている場合は、Berry I.e Grape、Arovadoの対応する値を取得する必要があります。

大きなデータセットがある場合に便利なJavaScriptを使用して値をロードできます。あるいは、すべてのデータでビューをプリロードすることができ、その場合は、UIで選択した質問に基づいて回答をフィルタリングする必要があります。

これを実際に達成する方法については MVC 4のカスケードドロップダウンリスト。あなたはあなたのニーズに基づいて同様の例を見つけることができます。