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

本文关键字：表单 控制器 Ajax 何使用 模型 | 更新日期: 2023-09-27 18:01:53

我有一个视图，带有部分视图列表。

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

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

其中products为model sortChoice为$('#sortList').val()，即选中的或select中的选项

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

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>
相关文章：