jquery - 修改列表以在视图中使用日期排序

Question

当用户单击排序链接时，我有这个 jquery 函数可以根据日期时间重新排列列表

 $('#sort-date-added').click(function () {
            '@Model.HomeProducts' = '@Model.HomeProducts.OrderBy(x => x.LastModifiedDate)';
            alert('xx');
        $.each('@Model.HomeProducts', function (index) {
            alert('@Model.HomeProducts.ElementAt(index).Name');
            //x++;
        });
  });

这是排序链接

<p><a id="sort-date-added" href="#">Sort by Date Added</a></p>

但它不起作用，有谁知道为什么，有人可以帮助解决这个解决方案或更好的解决方案吗？

Answer 1

如果我是你，我会做以下事情：

主视图：

<p><a id="sort-date-added" href="#">Sort by Date Added</a></p>
<div id="list">
    @Html.Partial("_ProductsList", Model)
</div>

部分视图“_ProductsList”：

<ul>
@foreach(var item in Model.HomeProducts)
{
   <li>@item.Name</li>
}
</ul>

JS：

$(document).ready(function(){

     var ajaxOrderByDate = $.post(
                            'Home/GetOrderedProducts/', { 
                                 orderType: 1
                            });

     $('#sort-date-added').on('click', function () {
          ajaxOrderByDate.done(function(data){
                            $('#list').html(data);
                         })
                         .fail(function(){
                            console.log("error");
                         });
     }

});

HomeController 中的 ASP.NET 或其他：

[HttpPost]
public ActionResult GetOrderedProducts(int orderType)
{
     switch(orderType)
     {
          case 1:
            //order by date
     }

     return PartialView("_ProductsList", Model);
}

您可以为您订购的字段创建一个枚举。

基本上这个想法是创建一个包含列表的局部视图，并在服务器上对该列表的元素进行排序。您可以通过 ajax 仅重新呈现列表来更新视图。我认为这是最好的方法。