How to send Model to controller by using Ajax,without using form?

Question

I have view,with list of partial views.

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

When i choose element in dropdown list,i want to send model to controller by using ajax.Something like this.

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

Can i do this by ajax,or is there better approach?Without using form,i tried to find solution,but in internet ,solutions with using forms only. Here is code of Action method to which i want to send model.

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

where products is model sortChoice is $('#sortList').val() ie selected sor option from select.

Answer 1

You basically need to create an action method which accepts a parameter for the dropdown selection value. Based on this value,you need to sort your data set and send that to a partial view. You can return the partial view result from your action method.

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

Assuming your SortProductsByFilter partial view is strongly typed to list of Product and it has the needed markup.

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

Now you just need to send the selected option in your ajax call.

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

Assuming result is the Id of the container div where you show the results.

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