Filtering a WebGrid with a DropDownList in MVC4

I am using a WebGrid, which i bind to a List of objects containing information about deliveries. I want to be able to filter said WebGrid using a DropDownList containing Customers. When I select a Customer in the DropDownList the change-method sends an Ajax call which is supposed to get the new items for the WebGrid.

The call is successful, but nothing happens. The WebGrid doesn't change at all. I even tried sending an Ajax call identical to the ones sent when sorting the list. But nothing happens.

What am I doing wrong here?

ViewModel:

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; } 
}

Controller:

    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);
    }

View:

@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 partial View:

@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>

$.get("?Customer="+$("#customerDropDown").val()); sends an AJAX call to the server and that's about it. You haven't subscribed to the success callback in order to update your DOM. So it is not surprising that nothing happens.

So try like this:

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

Notice how I have used the UrlHelper to calculate the correct url to your controller action, I have then passed the selected value of the dropdown as second parameter to the $.get method and last but not least I have subscribed to the success callback of the ajax request and updated the #container-grid div with the results returned by the controller action.

Also since you are calling this action with AJAX, you should return only a PartialView from it and not an entire View. This partial view should contain your grid. Otherwise you will end up with duplicate layout injected into the div.

Model


 public class EmployerTestResultsModel
    {


        [Display(Name = "Employer List")]
        public IEnumerable&lt;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>

来源：https://stackoverflow.com/questions/15288936/filtering-a-webgrid-with-a-dropdownlist-in-mvc4

标签

asp.net-mvc

asp.net-mvc-4

webgrid