ASP.NET MVC DropDownListFor

Question

Mein Modell sieht in etwa so aus. Es wird zu einem bestimmten Zeitpunkt von einer gespeicherten Prozedur mit Elementen gefüllt.

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

Hier ist mein Controller.

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

    return View(viewModel); 
} 

Hier ist meine Ansicht so weit. Ich erstelle eine Dropdown-Liste, damit der Benutzer den Inhalt von ModelList filtern kann. Wie eine WHERE-Klausel in einer SQL-Abfrage. Sobald der Benutzer das Element auswählt und auf die Schaltfläche Senden klickt, wendet es den Filter an? Oder würde dies passieren, nachdem ein Element tatsächlich im Dropdown-Menü ausgewählt wurde, ohne dass ein Button-Klick-Ereignis erforderlich ist?

@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

Sie können dies erreichen, indem Sie das Ereignis dropdownlist change verwenden.

verweisen:

on select change event - Html.DropDownListFor

onchange event for html.dropdownlist

Answer 2

Eine Möglichkeit, dies durch die Schaffung einer Aktion auf dem Controller zu tun, ist, dass diese Aktion asynchron aufrufen und nutzen Sie die neu ein PartialViewResult und dann AJAX kehrt mit gefilterte Liste. So würde zum Beispiel eine Aktion wie folgt erstellen:

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

und nennen Sie es mit Hilfe von Javascript, ziehe ich jQuery:

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

Beachten Sie, dass mit dieser Methode müssten Sie eine Teil erstellen View-Datei (mit dem Namen GetFilteredItems, wenn Sie keinen Namen in der Controller-Aktion angeben möchten), die die Tabelle enthalten würde, die mit den gefilterten Elementen gerendert werden soll. Außerdem müssten Sie der Dropdown-Liste und einem Container, in den Sie Ihre Teilansicht einfügen möchten, eine ID zuweisen.