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#

Unless you have defined a specify route for "Book/BooksData/{sort}, then you need to add the value as a query string value, not a route value — user3559349
– user3559349, Commented Dec 15, 2016 at 21:39

Mihai Alexandru-Ionut · Accepted Answer · 2016-12-15 20:27:49Z

3

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.

edited Dec 15, 2016 at 20:27

answered Dec 15, 2016 at 19:30

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

mshwf Over a year ago

Thanks, It works, It seems forgot about the query string!

Mihai Alexandru-Ionut Over a year ago

@MohamedAhmed, don't forget to accept my answer in order to help other people.

mshwf Over a year ago

Is it possible in JS to write something like: var xx=zz=="foo"?"bar":"bar2"

Mihai Alexandru-Ionut Over a year ago

@MohamedAhmed, yes, it is possible. It is called conditional (ternary) operator.

user3559349 Over a year ago

Or as designed url: '@Url.Action("BooksData","Book")', data: { sort: srt }, ....

Collectives™ on Stack Overflow

How to send parameters to Action from javascript function?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related