如何使用Ajax将模型发送到控制器，而不使用表单？

Question

我有查看，部分视图列表。

<script src="~/Scripts/SortProducts.js" type="text/javascript"></script> 
     @using System.Collections.Generic; 
     @using OnlineShop.Models; 
    @model List<Product> 
    <div> 
     <select id="sortList"> 
      <option selected="selected" value="Sort products">Sort products</option> 
      <option value="from cheap to expensive">from cheap to expensive</option> 
      <option value="from expensive to cheap">from expensive to cheap</option> 
      <option value="Newest">Newest</option> 
      <option value="Oldest">Oldest</option> 
     </select> 
    </div> 
    <div> 
     <ul style="list-style-type:none"> 
      @foreach (Product prod in Model) 
      { 
      <li > 
       @Html.Action("showOneProduct", "ShowProducts", new { product=prod }) 
       <br/> 
      </li> 
      } 
     </ul> 

    </div> 

当我选择在下拉列表元素，我想送模型利用ajax.Something这样给控制器。

$('#sortList').change(function() { 
    alert("SortProducts work"); 
    $.ajax({ 
     url: '/ShowProducts/sortProductsByFilter', 
     type: 'POST', 
     data: ???, 
     success: function (partialView) { 
      $('#showProduct').html(partialView); 
      $('#showProduct').show(partialView);   
     }, 
     error: function() { 
      alert("SortProducts doesn't work"); 
     } 
    }) 
}) 

我能做到这一点阿贾克斯，还是有更好的方法吗？如果不使用形式，我试图找到解决方案，但在网上，只有使用表单解决方案。 这里是我想要发送模型的Action方法的代码。

[HttpPost] 
     public ActionResult sortProductsByFilter(List<Product> products,string sortChoice) 
      { 
       return PartialView(); 
      } 

其中productsmodel是是sortChoice从选择$('#sortList').val()即选择SOR选项。

Answer 1

你基本上需要建立一个接受的下拉选项值的参数的操作方法。根据此值，您需要对数据集进行排序并将其发送到局部视图。您可以从您的操作方法返回部分视图结果。

public ActionResult SortProductsByFilter(string order) 
{ 
    var productList = new List<Product>(); 
    // Based on value of order parameter, sort your result and set to productList 
    return PartialView(vm); 
} 

假设您的SortProductsByFilter局部视图是强类型的产品列表中，并且它所需的标记。

@model List<Product> 
<ul style="list-style-type:none"> 
    @foreach (Product prod in Model) 
    { 
     <li >@Html.Action("showOneProduct", "ShowProducts", new { product=prod })</li> 
    } 
</ul> 

现在你只需要在你的ajax调用中发送选择的选项。

$('#sortList').change(function() { 

    $.ajax({ 
     url: '/ShowProducts/sortProductsByFilter', //consider using Url.Acion to build this 
     type: 'GET', 
     data: { order :$(this).val()}, 
     success: function (partialView) { 
      $('#result').html(partialView);       
     }, 
     error: function() { 
      alert("SortProducts doesn't work"); 
     } 
    }) 
}) 

假设result为您展示的结果div容器的ID。

<div id="result"> 
    <ul style="list-style-type:none"> 
      @foreach (Product prod in Model) 
      { 
      <li >@Html.Action("showOneProduct", "ShowProducts", new { product=prod })</li> 
      } 
    </ul>  
</div>