如何使用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>