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重新渲染列表来更新视图。我认为这是最好的方法。

修改要在View中查看日期的列表

1 个答案: