C# MVC фильтрация таблицы по выпадающему меню

Question

У меня есть представление, в котором есть таблица, отображающая значения. Я хотел бы добавить раскрывающийся список, который фильтрует результаты столбца состояния. Так, например, если я выберу «Обзор», появятся только записи с статусом «Обзор». Ниже я вижу свое мнение.

@model IEnumerable<DRT.Models.Master> 

@{ 
    ViewBag.Title = "Index"; 
} 

<h2>Index</h2> 

<p> 
    @Html.ActionLink("Create New", "Create") 
</p> 
<table class="table"> 
<tr> 
    <th> 
     @Html.DisplayNameFor(model => model.RequestType.Name) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.Reviewer.Name) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.Status.Name) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.ProjectName) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.ProjectLocation) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.Requestor) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.DateReceived) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.ReviewCompDate) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.ProjectFolerLink) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.ModellingReferralDate) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.ModellingReviewCompletionDate) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.SewerMaintenanceReferralDate) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.SewerMaintenanceReviewCompletionDate) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.FlowControlReferralDate) 
    </th> 
    <th></th> 
</tr> 

@foreach (var item in Model) { 
<tr> 
    <td> 
     @Html.DisplayFor(modelItem => item.RequestType.Name) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.Reviewer.Name) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.Status.Name) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.ProjectName) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.ProjectLocation) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.Requestor) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.DateReceived) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.ReviewCompDate) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.ProjectFolerLink) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.ProjectComments) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.DischargeLocationID) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.DischargeDistrict) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.SystemType) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.AffectedRequlator) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.StartDateOfDischarge) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.DurationOfDischarge) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.RequestFlowRate) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.ApprovedDischargeRate) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.DischargeLocationComments) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.ModellingReferralDate) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.ModellingReviewCompletionDate) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.SewerMaintenanceReferralDate) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.SewerMaintenanceReviewCompletionDate) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.FlowControlReferralDate) 
    </td> 
    <td> 
     @Html.ActionLink("Edit", "Edit", new { id=item.MasterId }) | 
     @Html.ActionLink("Details", "Details", new { id=item.MasterId }) | 
     @Html.ActionLink("Delete", "Delete", new { id=item.MasterId }) 
    </td> 
</tr> 
} 

</table> 

Answer 1

Вы в основном нужен ВЫБЕРИТЕ элемент, на ваш взгляд, и при использовании выбирает что-то, вы можете выбранное значение метода действия, где вы будете использовать это значение при получении данных из БД.

Вы можете создать новую модель представления

public class ListAndSearchVm 
{ 
    public IEnumerable<DRT.Models.Master> Data { set;get;} 
    public IEnumerable<SelectListItem> Statuses { set;get;} 
    public string SelectedStatus { set;get;} 
} 

Теперь в вашем GET действия, вам необходимо загрузить Statuses свойства модели представления и Data свойства. Имейте параметр, чтобы принять выбранное значение параметра из раскрывающегося списка фильтра состояния. Основываясь на значении этого параметра, получите отфильтрованные данные.

public ActionResult Index(string selectedStatus="") 
{ 
    var vm= new ListAndSearchVm(); 

    //Hard coding 2 items for demo. You can read this from your db table 
    vm.Statuses = new List<SelectListItem> { 
    new SelectListITem { Value="Open", Text="Open"}, 
    new SelectListITem { Value="Closed", Text="Closed"}, 
    }; 

    var data= dbContext.Masters; 
    if(!String.IsNullOrEmpty(selectedStatus)) 
    { 
    data = data.Where(f=>f.Status.Name==selectedSatatus); 
    }  
    vm.Data = data.ToList(); 
    return View(vm); 
} 

Теперь на ваш взгляд

@model ListAndSerchVm 
@using(Html.BeginForm("Index","YourControllerName",FormMethod.Get)) 
{ 
    <label> Select a status</label> 
    @Html.DropDownListFor(f=>f.SelectedStatus,Model.Statuses,"Select") 
    <input type="submit" value="Filter" /> 
} 
<table> 
<tr> 
    <th>Request type</th> 
    <th>Reviewer</th> 
    <th>Status</th> 
</tr> 
@foreach(var item in Model.Data) 
{ 
    <tr> 
     <td>@item.RequestType.Name)</td> 
     <td>@item.Reviewer.Name</td> 
     <td>@item.Status.Name</td> 
    </tr> 
} 
</table>