How to send parameters to Action from javascript function?

Question

I have a simple view that show a table of data, I want to sort one of its columns when the header is clicked by AJAX, I'm new to AJAX and JS, so this was my try in the view:

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

but when I click the header the sort parameter goes null in the action,

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

Yes I'm doing it wrong, but I revised it many times, I can't see logical error except that passing parameters in JavaScript is different than C#

Answer 1

Here is the simpliest way.You need to concatenate sort value to url, using query string.

Now, when you click header the sort parameter must goes with your value in the action.

Please try this:

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

Another way is to use this:

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

The @Url.Action returns just a string.

In Razor every content using a @ block is automatically HTML encoded by Razor.