一个过滤用的WebGrid在MVC4一个DropDownList [英] Filtering a WebGrid with a DropDownList in MVC4

问题描述

我使用的是的WebGrid，这是我结合包含关于交付的信息对象的名单。我希望能够过滤说使用的WebGrid客户包含一个DropDownList。当我在DropDownList选择一个客户的转换方法发送一个Ajax调用这应该得到的的WebGrid新的项目。

电话是成功的，但没有任何反应。该的WebGrid不会有任何变化。我甚至尝试发送一个Ajax调用相同的排序列表时发送的。但没有任何反应。

我在做什么错在这里？

视图模型：

 公共类DeliveriesViewModel：PageViewModel＆LT; D​​eliveriesPage＆GT;
{
    公共DeliveriesViewModel（DeliveriesPage当前页）：基地（当前页）
    {
        DeliveryItems =新的List＆LT; D​​eliveryItem＆GT;（）;
    }    公开名单＆LT; D​​eliveryItem＆GT; DeliveryItems {搞定;组; }
    公开名单＆LT; SelectListItem＆GT;客户{搞定;组; }
}
 

控制器：

 公众的ActionResult指数（DeliveriesPage当前页，串客）
    {        VAR模型=新DeliveriesViewModel（当前页）;
        model.Customers = _deliveryService.GetCustomers（）;
        model.DeliveryItems =客户== NULL？ _deliveryService.GetDeliveryItems（）：_deliveryService.GetDeliveryItems（客户）;        返回查看（模型）;
    }
 

查看：

  @model DeliveriesViewModel
＆LT; H1＆GT; @ Model.CurrentPage.PageName＆LT; / H1＆GT;@ Html.DropDownList（customerDropDown，Model.Customers）
@ Html.Partial（_电网，模型）
＆LT;脚本类型=文/ JavaScript的＆GT;
    $（＃customerDropDown）。改变（函数（）{
        $获得（+ $（＃customerDropDown）VAL（）客户=？）;
    }）;
＆LT; / SCRIPT＆GT;
 

_grid局部视图：

  @model DeliveriesViewModel
@ {
    VAR电网=新的WebGrid（Model.DeliveryItems，canPage：真的，canSort：真的，ajaxUpdateContainerId：集装箱格）;
}＆LT; D​​IV ID =容器网＆GT;
@ grid.GetHtml（
    列：grid.Columns（
        grid.Column（DeliveryId），
        grid.Column（客户名称），
        grid.Column（ShipNumber），
        grid.Column（货主名称），
        grid.Column（产品），
        grid.Column（PlannedWeight），
        grid.Column（TotalWeight），
        grid.Column（ShipStatus），
        grid.Column（TransportTo），
        grid.Column（TransportFrom），
        grid.Column（RevDate），
        grid.Column（ShipStemDept），
        grid.Column（施prealDept），
        grid.Column（ShipStemArr），
        grid.Column（施prealArr），
        grid.Column（TranspMonth），
        grid.Column（TranspYear）
        ））
＆LT; / DIV＆GT;
 

解决方案

$得到。（+ $（＃customerDropDown）VAL（）客户=？）; 发送一个AJAX调用服务器，这就是它。您还没有订阅成功回调以更新您的DOM。因此，这并不奇怪，的什么也没有发生的

因此​​，尝试这样的：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    $（'＃customerDropDown'）。改变（函数（）{
        VAR URL ='@ Url.Action（指数）';
        $获得（网址：{客户：$（本）.VAL（）}，功能（结果）{
            $（'＃集装箱网）HTML（结果）;
        }）;
    }）;
＆LT; / SCRIPT＆GT;
 

请注意如何我已经使用了UrlHelper计算正确的URL到您的控制器动作，我则通过下拉列表中选择的值作为第二个参数 $。获得方法和最后但并非最不重要的我已经订阅了Ajax请求的成功回调和更新由控制器操作返回的结果＃集装箱格 DIV。

此外，由于您所呼叫的AJAX这个动作，你应该只返回从它PartialView，而不是一个完整的视图。这种局部视图应该包含您的网格。否则，你将最终注入DIV布局重复

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.

这篇关于一个过滤用的WebGrid在MVC4一个DropDownList的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！