ViewBagを使用して、ビューとJsonResultメソッドの間でデータを交換できますか？

Question

私は、これは私が発注に使用するヘッダーのリンクです JsonResult方法 を呼び出し、AJAXを通じて取り込まれます私の見解でテーブルのソート実装しています

：

<a style="cursor: pointer" onclick="getData('@Html.Raw(ViewBag.Sort == "asc" ? "desc" : "asc")')" id="sort">Title</a> 

JsonResult方法：

public JsonResult BooksData(string sort) 
{ 
    ViewBag.Sort = ViewBag.Sort == "desc" ? "asc" : "desc"; 
    var books = new List<Book>(); 
    if (sort == "asc") 
    { 
     books = db.Books.Include(b => b.Author).OrderBy(b => b.Title).ToList(); 
     ViewBag.Sort = "desc"; 

    } 
    else 
    { 
     books = db.Books.Include(b => b.Author).OrderByDescending(b => b.Title).ToList(); 
     ViewBag.Sort = "asc"; 

    } 
    return Json(books, JsonRequestBehavior.AllowGet); 
} 

getsData機能：

function getData(sort) { 
      var srt = sort; 
      $('#tbl>tbody').empty(); 

      $.ajax({ 
       type: 'GET', 
       url: '/Book/BooksData?sort=' + srt, 
       dataTtype: 'json', 
       success: function (data) { 
        $.each(data, function (index, val) { 
         $('#tbl>tbody').append('<tr><td>' + val.Title + '</td><td>' + val.Author.Name + '</td></tr>') 
        }); 
       } 
      }); 
     } 

けど番目eの値はViewBag.Sortで、常にascですか？

Answer 1

コードには多くの問題があります。まず@Html.Raw(ViewBag.Sort == ...)はかみそりのコードで、ビューは、あなたが最初のビューを生成し、GETメソッドでViewBag.Sortの値に応じて

<a style="cursor: pointer" onclick="getData("asc")" id="sort">Title</a> 

またはgetData("desc")を生成するように、クライアントに送信される前に、サーバー上で評価されます。いいえ、あなたはいつでもそれを変更しますので、ajaxコールは常にパラメータsortの同じ値を送信します。

その後、BooksData()メソッドでは、ロジックエラーが発生します（最終的には問題ありません）。あなたは前のセットにViewBag.Sortの値を持っていないので、その後、

ViewBag.Sort = ViewBag.Sort == "desc" ? "asc" : "desc"; 

はそうViewBag.Sortの値は常にあなたのelseブロックは、その後"asc"にリセットされます"desc"ある

ViewBag.Sort = null == "desc" ? "asc" : "desc"; 

に評価されます。

しかし、メソッドではビューではなくJsonResultが返されるため、ViewBagの値は失われ、その値はクライアントに返されません。

は、それが毎回切り替えることができるように、リンク

var currentSort = '@Html.Raw(ViewBag.Sort)' 
var url = '@Url.Action("BooksData", "Book")'; 
// handle the click event of the link 
$('#sort').click(function() { 
    // toggle the value 
    currentSort = currentSort == 'acs' ? 'desc' : 'asc'; 
    $('#tbl>tbody').empty(); 
    $.getJSON(url, { sort: currentSort }, function(data) { 
     $.each(data, function (index, val) { 
      .... // append table rows 
     }); 
    }); 
}); 

とコントローラをクリックし

<a href="#" style="cursor: pointer" id="sort">Title</a> 

にビューでコードを変更し、JavaScriptの変数にViewBag.Sortの初期値を代入

方法は次のとおりです。

public JsonResult BooksData(string sort) 
{ 
    if (sort == "asc") 
    { 
     var books = db.Books.Include(b => b.Author).OrderBy(b => b.Title); // no need for .ToList()` 
     return Json(books, JsonRequestBehavior.AllowGet); 
    } 
    else 
    { 
     var books = db.Books.Include(b => b.Author).OrderByDescending(b => b.Title); 
     return Json(books, JsonRequestBehavior.AllowGet); 
    } 
} 

たとえば、javascript/jqueryを使用してテーブル内の行を並べ替えるだけで、サーバを呼び出す余計なオーバーヘッドなしにクライアント上で「orting」を実行することができます。たとえば、Invert table rowsを参照してください。これは、他のユーザビューが最初に生成された後はビュー内で更新されません。