web-dev-qa-db-ja.com

MVC3でのドロップダウンの選択に応じて部分ビューを読み込む

Asp.net mvc3を使用してfromを作成しようとしています。

いくつかのオプションを含むドロップダウンリストがあります。ドロップダウンリストでの選択に応じて、ページに挿入されるさまざまな部分ビューが必要です。

だが。これを送信アクションに依存させたくありません。選択リストから選択するとすぐに部分ビューが読み込まれるように機能します。

私はこのコードを持っています：

@using (Ajax.BeginForm("Create_AddEntity", new AjaxOptions { 
    UpdateTargetId = "entity_attributes", 
    InsertionMode = InsertionMode.Replace
    }
))
{
        <div class="editor-label">
            @Html.Label("Type")
        </div>
        <div class="editor-field">
            @Html.DropDownList("EntityTypeList", (SelectList)ViewData["Types"])
        </div>

        <div id="entity_attributes"></div>
        <p>
            <input type="submit" value="Create" />
        </p>
}

しかし、ドロップダウンリストの選択が変更されたときに、この部分的なビューの読み込みをトリガーする方法を理解できません。

この点は、「エンティティタイプ」によってフォームが異なるということです。そのため、ドロップダウンの選択に応じて、異なる部分ビューが読み込まれます。

誰かがポインタを持っていますか？

asp.net-mvc-3razorasp.net-ajax
16
Mikkel Nielsen

以下は、パーシャルを挿入したいビューであるとしましょう。

<html>
    <head><head>
    <body>
        <!-- Some stuff here. Dropdown and so on-->
        ....

        <!-- Place where you will insert your partial -->
        <div id="partialPlaceHolder" style="display:none;"> </div>
    </body>

</html>

ドロップダウンリストの変更イベントで、jquery ajax呼び出しを介して部分的に取得し、プレースホルダーにロードします。

/* This is change event for your dropdownlist */
$('#myDropDown').change( function() {

     /* Get the selected value of dropdownlist */
     var selectedID = $(this).val();

     /* Request the partial view with .get request. */
     $.get('/Controller/MyAction/' + selectedID , function(data) {

         /* data is the pure html returned from action method, load it to your page */
         $('#partialPlaceHolder').html(data);
         /* little fade in effect */
         $('#partialPlaceHolder').fadeIn('fast');
     });

});

そして、jqueryの上の/ Controller/MyActioninであるコントローラーアクションで、部分ビューを返します。

//
// GET: /Controller/MyAction/{id}

public ActionResult MyAction(int id)
{
   var partialViewModel = new PartialViewModel();
   // TODO: Populate the model (viewmodel) here using the id

   return PartialView("_MyPartial", partialViewModel );
}
37
emre nevayeshirazi

次のコードをプロジェクトのヘッダー（レイアウト）に追加します。周囲のフォームをトリガーするコンボボックス（選択ボックス）に「コンボボックス」を追加します。

$(document).ready(function () {
    $('.formcombo').change(function () {
        /* submit the parent form */
        $(this).parents("form").submit();
    });
});
0
JC Lizard