jquery getJson not passing any values to controller

Question

I am trying to pass some text from a textbox to a controller to get JSON results like so

function invokeAction() {
        var searchText = $("#SearchTextBox").val();

        // Invoke MVC controller action
        $.getJSON("/Home/Results/" + searchText, bindResults);
    }

If I put an alert here I can see that searchText definately has a value, but when I put a break point on this controller action:

 public ActionResult Results(string search)
    {
        var r = from t in db.Restaurants
                where SqlMethods.Like(t.Name, "%" + search + "%") || SqlMethods.Like(t.Postcode, search + "%") || SqlMethods.Like(t.CuisineType.Type, search + "%")
                orderby t.Name ascending
                orderby t.Rating descending
                orderby t.NumOfViews
                    descending
                select t;

        return Json(r.ToList());
    }

The string passed in is null, yet when I check the http context in the debugger my searchtext is a part of the url.

As this is null the query returns no results.

Am I missing something here?

Answer 1

You will have to fix your route and replace {id} with {search} in order to get it to bind to the correct parameter - try something like this:

routes.MapRoute("search", "Home/Results/{search}", 
  new { controller = "Home", action = "Results" });

If you don't want to do that, you can do it like this by specifying the parametername as a standard querystring paramter

$.getJSON("/Home/Results?search=" + searchText,bindresults);

that will fix the binding.

Answer 2

I've had some problems returning json from services and I wasn't getting any calls back. it turned out that the json was malformed and I was able to test that and get those errors by handling the error option of the plain ajax call.

$.ajax({
  type: "GET",
  url: "Home/Results/",
  data: { search: searchText },
  dataType: "json",
  error: function(xhr, status, error) {
    // you may need to handle me if the json is invalid
    // this is the ajax object
  },
  success: function(json){
    alert( "Data Returned: " + json);
  }
});

Answer 3

I have tried this approach, it works very well, thanks a lot.

Answer 4

Here is an elaborated tutorial on how to work with jQuery.getJSON(). Hope it'll help you. JSONP First Timer