在MVC4中使用DropDownList过滤WebGrid

Question

我正在使用WebGrid，该WebGrid绑定到包含关于传递信息的对象列表。我希望能够使用包含Customers的DropDownList过滤所述WebGrid。当我在DropDownList中选择一个Customer时，change-method会发送一个Ajax调用，该调用应该为WebGrid获取新项目。

通话成功，但没有任何反应。 WebGrid根本不会改变。我甚至尝试发送与排序列表时发送的Ajax调用相同的Ajax调用。但没有任何反应。

我在这里做错了什么？

视图模型：

public class DeliveriesViewModel : PageViewModel<DeliveriesPage> 
{ 
    public DeliveriesViewModel(DeliveriesPage currentPage) : base(currentPage) 
    { 
     DeliveryItems = new List<DeliveryItem>(); 
    } 

    public List<DeliveryItem> DeliveryItems { get; set; } 
    public List<SelectListItem> Customers { get; set; } 
} 

控制器：

public ActionResult Index(DeliveriesPage currentPage, string customer) 
    { 

     var model = new DeliveriesViewModel(currentPage); 
     model.Customers = _deliveryService.GetCustomers(); 
     model.DeliveryItems = customer == null ? _deliveryService.GetDeliveryItems() : _deliveryService.GetDeliveryItems(customer); 

     return View(model); 
    } 

检视：

@model DeliveriesViewModel 
<h1>@Model.CurrentPage.PageName</h1> 

@Html.DropDownList("customerDropDown", Model.Customers) 
@Html.Partial("_grid", Model) 
<script type="text/javascript"> 
    $("#customerDropDown").change(function() { 
     $.get("?Customer="+$("#customerDropDown").val()); 
    }); 
</script> 

_grid局部视图：

@model DeliveriesViewModel 
@{ 
    var grid = new WebGrid(Model.DeliveryItems, canPage:true, canSort: true, ajaxUpdateContainerId:"container-grid"); 
} 

<div id="container-grid"> 
@grid.GetHtml(
    columns: grid.Columns(
     grid.Column("DeliveryId"), 
     grid.Column("CustomerName"), 
     grid.Column("ShipNumber"), 
     grid.Column("ShipName"), 
     grid.Column("Product"), 
     grid.Column("PlannedWeight"), 
     grid.Column("TotalWeight"), 
     grid.Column("ShipStatus"), 
     grid.Column("TransportTo"), 
     grid.Column("TransportFrom"), 
     grid.Column("RevDate"), 
     grid.Column("ShipStemDept"), 
     grid.Column("ShipRealDept"), 
     grid.Column("ShipStemArr"), 
     grid.Column("ShipRealArr"), 
     grid.Column("TranspMonth"), 
     grid.Column("TranspYear") 
     )) 
</div> 

Answer 1

$.get("?Customer="+$("#customerDropDown").val());向服务器发送一个AJAX调用，这就是它。您尚未订阅成功回调以更新您的DOM。所以没有任何反应也就不足为奇了。

因此，尝试这样的：

<script type="text/javascript"> 
    $('#customerDropDown').change(function() { 
     var url = '@Url.Action("index")'; 
     $.get(url, { customer: $(this).val() }, function(result) { 
      $('#container-grid').html(result); 
     }); 
    }); 
</script> 

注意如何我已经使用了UrlHelper计算正确的URL到您的控制器动作，我已经然后下拉作为第二个参数的选定值传递给$.get方法最后但并非最不重要的是，我订阅了ajax请求的成功回调，并更新了控制器操作返回的结果#container-grid div。

此外，由于您使用AJAX调用此操作，因此您应该只返回一个PartialView，而不是整个View。这个局部视图应该包含你的网格。否则，你将最终注入div的重复布局。

Answer 2

Model 


public class EmployerTestResultsModel 
    { 


     [Display(Name = "Employer List")] 
     public IEnumerable<SelectListItem> EmployerList { get; set; } 

     [Required] 
     public string SelectedEmployerId { get; set; } 



     public List<EmployerTestResultsModel> EmployerGrid { get; set; } 

     public Int64 FileId { get; set; } 

     [Display(Name = "File Name")] 
     public string FileName { get; set; } 


     [DataType(DataType.Date)] 
     public DateTime Date { get; set; } 


     [Display(Name = "Scheme Id")] 
     public string SchemeId { get; set; } 


     public string Status { get; set; } 

     [Display(Name = "Validation Error Report")] 
     public string ValidationErrorReport { get; set; } 

} 




controller 



[HttpGet] 
     public ActionResult EmployerTestResults() 
     { 
      EmployerTestResultsModel model = new EmployerTestResultsModel(); 

      ViewBag.HideSection = true; 

      model.EmployerList = (from d in _context.Employers 
            select new System.Web.Mvc.SelectListItem 
            { 
             Text = d.EmployerName, 
             Value = d.EmployerId 
            }); 


      model.EmployerGrid = (from efd in _context.EmployerFileDatas 
      //      join efhd in _context.EmployerFileHeaderDetails on efd.FileDataIdentityKey equals efhd.FileDataIdentityKey 
            orderby efd.EmployerId , efd.Timestamp 
            select new EmployerTestResultsModel 
            { 
             FileId = efd.FileDataIdentityKey, 
             FileName = efd.FileName, 
             Date = efd.Timestamp, 
             //SchemeId = efhd.SchemeId, 
             Status = efd.ValidationStatus, 
             ValidationErrorReport = "View" 

            }).ToList(); 

      return View("EmployerTestResults", model); 
     } 



View: 


@model EFITestHarness.Models.EmployerTestResultsModel 
@using System.Web.Helpers; 
@{ 
    ViewBag.Title = "EmployerTestResults"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 

} 

&lt;script src="~/Scripts/jquery-1.7.1.js">&lt;/script> 
&lt;script src="~/Scripts/jquery.unobtrusive-ajax.js">&lt;/script> 


@using (Html.BeginForm("EmployerTestResults", "Home", FormMethod.Post, new { @class = "form-horizontal" })) 
{ 

    <div class="text-danger" style="font-size:large;"> 
     @Html.ValidationSummary(true) 

    </div> 



    <div class="form-group "> 
     @Html.LabelFor(s => s.EmployerList, null, new { @class = "col-md-2 control-label" }) 
     <div class="col-md-3"> 
      @Html.DropDownListFor(s => s.SelectedEmployerId, Model.EmployerList, "----All----", new { style = "width:250px", id = "ddl", @class = "dropdown1" }) 

      @Html.ValidationMessageFor(s => s.EmployerList, null, new { @class = "text-danger" }) 
     </div> 
    </div> 


    <div id="EmployeeViewGrid"> 

     @Html.Partial("~/Views/EmployerView.cshtml", Model.EmployerGrid) 
    </div> 

} 

&lt;script type="text/javascript"> 


       $('#ddl').change(function (e) { 

      var employer = $('#ddl').val();   
      $.get('@Url.Action("Filter")', { id: employer }, function (result) { 
       $('#EmployeeViewGrid').html(result); 

      }); 
      e.preventDefault(); 
     }); 

&lt;/script> 




Controller: 


[HttpGet] 
     public ActionResult Filter(string id) 
     { 
      EmployerTestResultsModel model = new EmployerTestResultsModel(); 


      List<EmployerTestResultsModel> objEmployerDetails = new List<EmployerTestResultsModel>(); 

      objEmployerDetails = _repository.getEmployerDetails(id); 

      model.EmployerGrid = objEmployerDetails;   

      return PartialView("~/Views/EmployerView.cshtml", model.EmployerGrid); 

     } 





partial View: 


@model IEnumerable<EFITestHarness.Models.EmployerTestResultsModel> 
@using System.Web.Helpers; 
@{ 
    ViewBag.Title = "EmployerTestResultsModel"; 
    //Layout = "~/Views/Shared/_Layout.cshtml"; 


} 
&lt;script src="~/Scripts/jquery-1.7.1.js">&lt;/script>  
    <div id="gridposition" style="overflow: scroll; height: 300px; overflow-x: hidden;"> 
     @{ 

      var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridposition"); grid.Pager(WebGridPagerModes.NextPrevious); 

    @grid.GetHtml(tableStyle: "webGrid", 
       footerStyle: "foot", 
       headerStyle: "webGridHeader", 
       alternatingRowStyle: "webGridAlt", 
       htmlAttributes: new { id = "positionGrid" }, 
       selectedRowStyle: "select", 
       fillEmptyRows: true, 
       columns: grid.Columns(
       grid.Column("FileName"), //the model fields to display 
       grid.Column("Date"), 
       grid.Column("SchemeId"), 
       grid.Column("Status"), 
       grid.Column("ValidationErrorReport", format: (item => Html.ActionLink((string)(@item.ValidationErrorReport).ToString(), "EmployerValidationResults", new { FileId = @item.FileId, @style = "color:blue;" }))) 



       )) 
     } 



    </div>