AJAX send value to controller and return query results

Question

I want to pass a value to my controller and execute a query. I would then like to return the values from the query to my jquery function so I can then assign these values to various text boxes. I can't figure out how to get the data back to jquery. I have only done ajax calls thats have returned a partial view. I am working in ASP.NET

Answer 1

You can use ajax call inside a function like below, you can call this function whenever you need..

             function(id){
                     $.ajax({
                                url: "Your Controller/Method path",
                                data: JSON.stringify({
                                    id: id
                                }),
                                dataType: "json",
                                type: "POST",
                                async: false,
                                contentType: "application/json; charset=utf-8",
                                success: function (data) {
                               if(data.success){
                            //Here you will get the value from the Controller if successfully executed 
                           // you get values from data and you can assign those values to the textboxes based on your requirement..             
                              } 
                            }
                           })
                         }

Controller Method:

        public JsonResult functionName(int id)
        {
          JsonResult result = null;

          try
            {
              var queryValue;
              //here you can put your query and assign it to queryValue and return it back to the UI.
              result = Json(new { success = true, data = queryValue }, JsonRequestBehavior.AllowGet);
            }
          catch (Exception ex)
            {
              result = Json(new { success = false, message = ex.Message }, JsonRequestBehavior.AllowGet);
            }
         return result;
      }

   }

hope this will help you..

Answer 2

Your best bet is to use Json.

Create a C# model server side:

var result = new ResultModel
                 {
                    Item1 = "This is a result",
                    Item2 = "Another thing to return",
                    Item3 = 5,
                    ItemArray = new List<string>{ "Thing 1", "Thing 2" }
                 };

return Json(result);

/* Server-side you don't *have* to use a model; an anonymous object is also fine, eg:
 * return Json(new { Item1 = "This is a result" }); etc.
 */

And then your Ajax success function will be ready to accept this Json result:

$.post(url, data, function(json) {
      $("#textBox1").val(json.Item1);
      $("#textBox2").val(json.Item2);
      // etc....
};

This assumes you're using jquery. Other frameworks have different client-side syntax. Doing Ajax using something like jquery is much nicer than coding it yourself.

jQuery can usually work out whether you're sending back json or html, but if you get strange results you might need to substitute $.post for $.ajax and specify that you're expecting json in return.