Вопрос об использовании 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> 

теперь мне нужно обновить и отфильтровать _productsFilteredPartial по Ajax Ajax .BeginForm и фильтрации продуктов на изменение списка на основе каждого значения параметра (@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> 

, но это больше для генерации ссылок и не знает, как передать значение из выбранной опции выпадающего списка на частичный вид. Не могли бы вы дать мне знать, как это исправить?

Answer 1

Я не думаю, что ваш код действителен! Вы смешиваете javascript и asp.net ajax методы-помощники неправильно!

В идеале вы должны послушать событие изменения элемента SELECT и отправить выбранное значение параметра на сервер, где ваш метод действия вернет результат частичного просмотра для сетки.

Так что в вашем главном окне, вам нужно будет включать в себя частичный вид в контейнере DIV

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

Теперь в яваскрипта части, вы можете использовать метод загрузки JQuery для обновления таблицы результатов

$(function(){ 

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

}); 

Предполагая, что у вас есть метод действия FilteredProducts в HomeController, который принимает категорию и возвращает результат частичного просмотра.

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