ViewBag을 사용하여 뷰와 JsonResult 메소드간에 데이터를 교환 할 수 있습니까?

Question

내가이 나는 순서에 사용하는 헤더 링크입니다 JsonResult 방법 를 호출 아약스를 통해 채워됩니다 내보기에 테이블에 대한 정렬을 구현하고있어

:

<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")를 생성 있도록 클라이언트로 전송되기 전에 서버에서 평가됩니다. 아약스 호출이 항상 매개 변수 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> 

에보기에서 코드를 변경하고 자바 스크립트 변수에 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); 
    } 
} 

예를 들어 Invert table rows을 참조하십시오. 이는 다른 사용자가 데이터베이스에 추가 한 새로운 레코드가 있음을 의미하기는하지만 javascript/jquery를 사용하여 테이블의 행을 다시 정렬하기 만하면 서버를 호출하는 데 추가 오버 헤드없이 클라이언트에서 'orting' 뷰가 처음 생성 된 후 뷰에서 업데이트되지 않습니다.