使用 ASP.Net MVC Ajax 和更改下拉列表

Question

我有一个名为 _productsFilteredPartial 的分部视图和一个产品下拉列表，例如

<div class="form-group">
    <label for="sel1"></label>
    <select class="form-control" id="cat">
        <option>Select From The List</option>
        @{
            DataEntities ctx = new DataEntities();
            var cat = ctx.Categories.OrderByDescending(p => p.CategoryName);
            foreach (var item in cat)
            {
                <option Value="@item.Id" >@item.Name</option>
            }
        }
    </select>
</div>

现在我需要通过 Ajax Ajax.BeginForm 更新和过滤 _productsFilteredPartial 并根据每个选项值（@item.Id ).

在 _productsFilteredPartial 我有

@model IEnumerable<Example.Models.NW.Product>
<table>
    <tr>
        <th>Product ID</th>
        <th>Product Name</th>
        <th>Supplier ID</th>
        <th>Category ID</th>
        <th>Unit Price</th>
    </tr>
@foreach (var item in Model) {
<tr>
    <td>@item.ProductID</td>
    <td>@item.ProductName</td>
    <td>@item.SupplierID</td>
    <td>@item.CategoryID</td>
    <td>@item.UnitPrice</td>
</tr>  
}
</table>

我试过了

<script language="JavaScript">
    $('#id').on('change', 'productsFilteredPartial',
      new AjaxOptions
    {
        HttpMethod = "GET",
        UpdateTargetId = "Filtered-Products",
        InsertionMode = InsertionMode.Replace,
        LoadingElementId = "loadingDisplay",

    }
    });
</script>

但这更适用于 link 代，并且不确定如何将值从下拉列表的选定选项传递到部分视图。我该如何解决这个问题？

Answer 1

我认为您的代码无效！您以错误的方式混合了 javascript 和 asp.net ajax 辅助方法！

理想情况下，您应该做的是，监听 SELECT 元素上的更改事件，并将选定的选项值发送到服务器，您的操作方法将在服务器上 return 网格的部分视图结果.

因此在您的主视图中，您需要将部分视图包含在容器中 div

<div id="grid">
 @Html.Partial("_productsFilteredPartial")
</div>

现在在javascript部分，可以使用jQuery加载方法来更新网格结果

$(function(){

   $("#cat").change(function(){
      var v=$(this).val();
      $("#grid").load('@Url.Action("FilteredProducts","Home")?cat='+v);
   });

});

假设您在 HomeController 中有一个名为 FilteredProducts 的操作方法，它接受类别和 return 部分视图结果。

public ActionResult FilteredProducts(string cat)
{
   var result = new List<Example.Models.NW.Product>();
   // to do : Load the list of products to result
   return PartialView("_productsFilteredPartial",result);
}

使用 ASP.Net MVC Ajax 和更改下拉列表

Using ASP.Net MVC Ajax and drop-down list on change

asp.net-mvc

asp.net-ajax