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

你基本上需要一个SELECT元素在视图中，并在使用时选择的东西，你可以发布选择的值到从数据库中获取数据时，你会使用这个值的操作方法。

你可以在你的GET操作创建一个新的视图模型

public class ListAndSearchVm 
{ 
    public IEnumerable<DRT.Models.Master> Data { set;get;} 
    public IEnumerable<SelectListItem> Statuses { set;get;} 
    public string SelectedStatus { set;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>