Asp.net MVCはJQueryでリストボックスを作成しますか？

フォームのドロップダウンボックスにPayeesのリストがあります。私は、選択された受取人の項目に基づいて、ポストバックとそのすべてを使わずに、別のドロップダウンを設定したいと思います。Asp.net MVCはJQueryでリストボックスを作成しますか？

 private JsonResult GetCategories(int payeeId) 
    { 
     List<CategoryDto> cats = Services.CategoryServices.GetCategoriesByPayeeId(payeeId); 
     List<SelectListItem> items = new List<SelectListItem>(); 

     foreach(var cat in cats) 
     { 
      items.Add(new SelectListItem {Text = cat.Description, Value = cat.CategoryId.ToString()}); 
     } 

     return Json(items); 

    }

は今、私はこの仕事を得るために私のビューに追加するにはどのようなわからない午前：

だから、私は仕事をして私のコントローラのメソッドを作成しました。現時点で

、私が持っているすべてはこれです：彼らは罰金移入

<% using (Html.BeginForm()) 
    {%> 

    <p> 
    <%=Html.DropDownList("SelectedAccountId", Model.Accounts, "Select One..", null) %> 
    </p> 
    <p> 
    <%=Html.DropDownList("SelectedPayeeId", Model.Payees, "Select One...", null) %> 
    </p> 

         <input type="submit" value="Save" /> 
<% 
    }%>

...ユーザーがSelectedPayeeIdがドロップダウン選択したときに、それは、新しい移入すべきである（まだ作成されることを？） SelectedPayeeIdに基づいてカテゴリを保持するドロップダウン。

したがって、私は、JQuery関数を作成する必要があると思います（JQueryを実行していないので、どこに行ってもわからない）onChangeイベントの受取人ドロップダウンを監視しますか？そして、私が上で作成したメソッドを呼び出します。これは正しいと思いますか？もしそうなら、あなたはこれを達成するために私を導くことができますか？

出典

2011-01-29 Craig

あなたの推論は今までのところ全く音です。まず、View/Masterにjqueryライブラリを含めることにします。 http://jquery.com/からjqueryのコピーをダウンロードできます。ファイルをプロジェクトに追加し、ドキュメントの<head>に<script src="/path/to/jquery.js">を追加します。ビューに別のドロップダウンを追加したいと思うでしょう（おそらくあなたのモデルの別のプロパティ）。

<%=Html.DropDownList("SelectedCategoryId", null, "Select One...", new { style = "display:none;"}) %>

我々はそれの内側に選択するものがないので、最初は表示されないために、このドロップダウンのスタイルを設定しました：私たちは、この「SelectedCategoryId」を呼ぶことにします。後でそのコンテンツを生成した後に表示します。さて、どこかのページに、あなたは次のようになります<script>ブロックを含めることになるでしょう：

$(document).ready(function() { $('#SelectedPayeeId').change(function() { 
$.ajax({ 
    type: 'POST', 
    url: urlToYourControllerAction, 
    data: { payeeId: $(this).val() }, 
    success: function(data) { 
    var markup = ''; 
    for (var x = 0; x < data.length; x++) { 
     markup += '<option value="' + data[x].Value + '">'+data[x].Text+'</option>'; 
    } 
    $('#SelectedCategoryId').html(markup).show(); 
    } 
}); }); });

このコードは（これで「SelectedPayeeId」のIDを持つDOM要素の上に書かれた匿名関数をバインドしますあなたのドロップダウンの場合）。この関数は、あなたのメソッドのurlへのAJAX呼び出しを実行します。リクエストの結果（返されたJSON）を受け取ると、配列全体を反復処理し、ドキュメントに挿入するhtmlの文字列を作成します。最後に、htmlを 'SelectedCategoryId'要素に挿入し、ユーザーに表示されるように要素のスタイルを変更します。

私はこのコードを実行していませんが、（ほとんど）必要なものでなければなりません。 jQueryのドキュメントはhttp://docs.jquery.com/Main_Pageで利用可能であると私は上記に使用する機能が、ここで参照されている：あなたがする必要があると思います

出典

2011-01-29 03:32:55

GetCategoriesをaとします。あなたのコントローラー内のアクションハンドラーに対応するので、パブリックメソッドです。あなたのjqueryのコードは次のよう見ることができ

：

<script type="text/javascript"> 
    $(function() { 
$('#SelectedPayeeId').change(function() { 
      $.get('<%= Url.Action("GetCategories", "YourControllerName") %>', 
        {payeeId: $(this).val()}, 
        function(data) { 
         populateSelectWith($("#Category"), data); 

      }); 
     }); 
    //Place populateSelectWith method here 
}); 
</script> 
The populateSelectWith can fill your dropdown with data like: 

    function populateSelectWith($select, data) { 
    $select.html(''); 
    $select.append($('<option></option>').val('').html("MYDEFAULT VALUE")); 
    for (var index = 0; index < data.length; index++) { 
     var option = data[index]; 
     $select.append($('<option></option>').html(option)); 
     } 
    }

私はこのコードをテストしていませんが、私はそれは大丈夫実行し期待しています。

あなたは、サーバーにデータを投稿されていないのでhere を取得し、あなたが同様に[HTTPGET]属性

を使用してコントローラのアクションを飾る可能性があることができますjqueryのAJAXの構文を見つけることができます

出典

2011-01-29 03:38:58 WorldIsRound

Asp.net MVCはJQueryでリストボックスを作成しますか？

答えて

関連する問題