Databases
StackOverflow2013
Postsdbo
POFiltering a WebGrid with a DropDownList in MVC4
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFiltering a WebGrid with a DropDownList in MVC4
    text
    copied!<p>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.</p> <p>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.</p> <p>What am I doing wrong here?</p> <p>ViewModel:</p> <pre><code>public class DeliveriesViewModel : PageViewModel&lt;DeliveriesPage&gt; { public DeliveriesViewModel(DeliveriesPage currentPage) : base(currentPage) { DeliveryItems = new List&lt;DeliveryItem&gt;(); } public List&lt;DeliveryItem&gt; DeliveryItems { get; set; } public List&lt;SelectListItem&gt; Customers { get; set; } } </code></pre> <p>Controller:</p> <pre><code> 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); } </code></pre> <p>View: </p> <pre><code>@model DeliveriesViewModel &lt;h1&gt;@Model.CurrentPage.PageName&lt;/h1&gt; @Html.DropDownList("customerDropDown", Model.Customers) @Html.Partial("_grid", Model) &lt;script type="text/javascript"&gt; $("#customerDropDown").change(function () { $.get("?Customer="+$("#customerDropDown").val()); }); &lt;/script&gt; </code></pre> <p>_grid partial View:</p> <pre><code>@model DeliveriesViewModel @{ var grid = new WebGrid(Model.DeliveryItems, canPage:true, canSort: true, ajaxUpdateContainerId:"container-grid"); } &lt;div id="container-grid"&gt; @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") )) &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload