如何从javascript函数向Action发送参数？

Question

我有一个显示数据表的简单视图，我想在 AJAX 单击标题时对其其中一个列进行排序，我是 AJAX 和 JS 的新手，所以这是我在视图中的尝试：

<table id="tbl" class="table">
    <tr>
        <th>
            <a style="cursor: pointer" onclick="getData('desc')" id="sort">Title</a>
        </th>
        <th>
            Author
        </th>
        <th></th>
    </tr>
</table>

@section scripts{
    <script type="text/javascript">
        $(document).ready(getData('asc'))
        function getData(sort) {
            var srt = sort;
            $.ajax({
                type: 'GET',
                url: '/Book/BooksData/' + srt,
                dataTtype: 'json',
                success: function (data) {
                    $("#tbl > tr").remove();
                    $.each(data, function (index, val) {
                        $('#tbl').append('<tr><td>' + val.Title + '</td><td>' + val.Author.Name + '</td></tr>')
                    });
                }
            });
        }
    </script>
}

但是当我单击标题时，sort 参数在操作中变为空，

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

    return Json(books, JsonRequestBehavior.AllowGet);
}

是的，我做错了，但是我修改了很多次，除了在JavaScript中传递参数与C#不同之外，我看不到逻辑错误

Answer 1

这是最简单的方法。您需要使用query 字符串将sort 值连接到url。

现在，当您单击标题时，排序参数必须与您在操作中的值一致。

请试试这个：

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

另一种方法是使用这个：

url: '@Url.Action("BooksData","Book")?sort=' + srt

@Url.Action 只返回一个字符串。

在Razor 中，每个使用@ 块的内容都会自动由Razor 进行HTML 编码。