Filtering a WebGrid with a DropDownList in MVC4

Question

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>

Answer 1

$.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.