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

您可以使用dropdownlist更改事件來實現它。

參考：

on select change event - Html.DropDownListFor

onchange event for html.dropdownlist

Answer 2

的一種方式做到這一點是通過創建你的控制器上一個返回PartialViewResult，然後使用AJAX異步調用該操作的動作，並取得新過濾列表。因此，例如，您可以創建這樣一個動作：

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

和使用JavaScript調用它，我更喜歡的jQuery：

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

注意，使用這種方法，你需要創建一個部分查看文件（如果您不想在控制器操作中指定名稱，則命名爲GetFilteredItems），該文件將包含要使用已過濾項目呈現的表格。您還需要爲下拉列表分配一個ID，併爲您放置局部視圖的某種容器分配一個ID。