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

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将模型发送到控制器。这样的东西。

$('#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");
        }
    })
})

我可以通过ajax做到这一点，还是有更好的方法？没有使用表单，我试图找到解决方案，但在互联网上，只使用表单的解决方案。 这是我想要发送模型的Action方法的代码。

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

products是model sortChoice是$('#sortList').val()即从select中选择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局部视图被强类型化为Product列表，并且它具有所需的标记。

@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>