ASP.NET MVC DropDownListFor

Question

私のモデルは次のようになります。ストアドプロシージャによって、ある時点で項目が移入されます。

public class myModel 
{ 
    public List<SelectListItem> myList { get; set; } 
    public List<myModel> modelList { get; set; } 
} 

ここは私のコントローラです。

[HttpGet] 
public ActionResult getMyListItems() 
{ 
    var viewModel = new myModel(); 
    viewModel.myList = viewModel.getMyList(); 
    viewModel.modelList = viewModel.getMyModelList(); 

    return View(viewModel); 
} 

ここまでは私の見解です。私はユーザーがmodelListの内容をフィルタできるように、ドロップダウンリストを作成しています。 SQLクエリのWHERE句のような種類。ユーザーがアイテムを選択して[送信]ボタンをクリックすると、フィルタが適用されますか？または、ボタンクリックイベントを必要とせずにアイテムがドロップダウンで実際に選択された後にこれが発生しますか？

@model SWAM2.Models.EmployeeOfcSpecKnow 
@using CommonCode.HtmlHelpers; 

@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 
    @Html.ValidationSummary(true) 

    <div class="editor-label"> 
     Filter by Column1 
    </div> 
    <div class="editor-field"> 
     @Html.DropDownListFor(model => Model.Column1, Model.myList, new { style = "width:400px" }) 
     @Html.ValidationMessageFor(model => model.Column1) 
    </div> 

    <div class="toppad10"> 
     <input type="submit" value="Apply Filter" /> 
    </div> 

    <table class="grayTable rowStriping"> 
     <thead> 
      <tr> 
       <th>Column1</th> 
       <th>Column2</th> 
       <th>Column3</th> 
      </tr> 
     </thead> 

    <tbody> 
     @foreach (var item in @Model.modelList) 
     { 
      <tr> 
       <td> 
        @Html.DisplayFor(modelItem => item.Column1) 
       </td> 
       <td> 
        @Html.DisplayFor(modelItem => item.Column2) 
       </td> 
       <td> 
        @Html.DisplayFor(modelItem => item.Column3) 
       </td> 
      </tr> 
     } 
    </tbody> 

    </table> 
} 

Answer 1

ドロップダウンリストの変更イベントを使用して達成できます。

は参照してください。これを行うには

on select change event - Html.DropDownListFor

onchange event for html.dropdownlist

Answer 2

一つの方法は、PartialViewResultを返し、あなたのコントローラ上のアクションを作成して、非同期的にそのアクションを呼び出すと、新たに取得するためにAJAXを使用することですフィルタリングされたリスト。私はjQueryの好む、

public PartialViewResult GetFilteredItems(string filter) 
{ 
    var viewModel = new myModel(); 
    viewModel.myList = viewModel.getMyList(); 
    viewModel.modelList = viewModel.getMyModelList(); 
    viewModel.ApplyFilter(filter); 
    return PartialView(viewModel); 
} 

とJavaScriptを使用してそれを呼び出す：この方法では、あなたが部分的に作成する必要があるだろうと

$("#dropDownListIdHere").change(function() { 
    $.ajax({ 
    url: "@Url.Action("GetFilteredItems")", 
    method: "GET", 
    data: { filter: $(this).val() }, 
    success: function (result) { 
      $("#listHolderIdHere").html(result); 
     } 
    }) 
}); 

注だから、たとえば、次のようなアクションを作成しますフィルターされた項目でレンダリングされる表を含むビュー・ファイル（コントローラー・アクションで名前を指定しない場合は、GetFilteredItemsという名前）。また、ドロップダウンにIDを割り当てる必要があります。また、部分ビューを配置するコンテナの種類に割り当てる必要があります。