1

ユーザーがソートリンクをクリックしたときに日時に基づいてリストを再配置するこの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>

しかし、それは機能しません。誰もが理由を知っていますか?この解決策またはより良い解決策を手伝ってくれる人はいますか?

4

1 に答える 1

0

もし私があなたなら、次のようにします。

メイン ビュー:

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

J:

$(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 を介してリストのみを再レンダリングすることにより、ビューを更新します。これが最善のアプローチだと思います。

于 2013-03-28T15:14:25.723 に答える