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>')
                    });
                }
            });
        }

但ViewBag.Sort的值始终是asc？

Answer 1

您的代码存在许多问题。首先@Html.Raw(ViewBag.Sort == ...)是剃刀代码，在视图发送到客户端之前在服务器上进行评估，以便生成

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

或getData("desc")取决于最初生成视图的GET方法中ViewBag.Sort的值。不管你在哪里更改它，所以ajax调用总是为参数sort提交相同的值。

然后在BooksData()方法中，您有逻辑错误（尽管它们最终无关紧要）。因为之前没有为ViewBag.Sort设置值，所以

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

评估为

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

因此ViewBag.Sort的值始终为"desc"，然后您的else块会重置为"asc"。

但是您的方法返回JsonResult而不是视图，因此ViewBag值将丢失，其值永远不会返回给客户端。

将视图中的代码更改为

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

并将ViewBag.Sort的初始值分配给javascript变量，以便每次单击链接时都可以切换

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
        });
    });
});

然后控制器方法

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重新排序表中的行来调用服务器的额外开销 - 请参阅Invert table rows示例，虽然这意味着在视图首次生成后由其他用户添加到数据库的任何新记录都不会在视图中更新。

我可以使用ViewBag在view和JsonResult方法之间交换数据吗？

1 个答案: