jQuery – Requests

jQuery have some in-built methods to communicate with server and this communication is we can say requests. Requests may be either Get or Post as per our scenario. Both requests are used either if we need to retrieve data from server or to submit/send data to server for further processing.

• GET: basically, used to receive some data from server with or without sending parameters and the data may be cashed.
  Syntax: $.get(URL, callback);
• POST: can also be used to receive data from server but it must contain some values to be post to server side.
  Syntax: $.post(URL, data, callback);

$.get()

To call simply get method and receive data from server we have two patterns written below:

var url = '@Url.Action("action_name", "controller_name")';
$.get(url).done(function (res) {
    //res is the response value from url
});
$.get(url, function (res, status) {
    //res is the response value from url
});

Top line of code is the definition of creating URL in MVC pattern. First parameter is the URL where the request will be hit and the second is callback where the response will receive after completing the request. We can send some query parameters like to filter the list or getting records on basis of some key-value. Below is the example of get method with parameters:

$.get(url, {query: '', query1: ''}, function (res, status) {
    //res is the response value from url
});

Second parameter is defining the values to be send with this get request. You can send single or multiple values as per your requirements.

$.post()

Submit data to server, post method also has two patterns same as get method. Actually, the only difference is handling the callback of method.

$.post(url, {param:''}).done(function (res) {
    //res is the response value from url
});
$.post(url, { param: '' }, function (res, status) {
    //res is the response value from url
});

.load()

There is another way of loading some html from server side or partial view. You can load html/partial view in any html tag by calling this load method. Below is an example of load method to load html from server side basis of input parameter:

$('selector').load(url, { Id: Id },  function (responseTxt, statusTxt, xhr) {
      if (statusTxt == "success"){
          //below code is used to show the modal after loading in div
          $("model selector").modal('show');

      } 
      if (statusTxt == "error")
          alert("Error: " + xhr.status + ": " + xhr.statusText);
});

In the above code we are loading a partial view having modal popup and after success we are showing that bootstrap modal. If it will not a popup we don’t need to show anything. In the controller’s action you need to return html either from html or partial view. Below is an example to return a partial view from server side:

public IActionResult GetPartialView()
{
    return PartialView("_PartialViewName");
}
public IActionResult GetPartialViewWithModel()
{
    return PartialView("_PartialViewName", model);
}

To return partial view from C# MVC above code snippet will work for you. To bind this partial view with a view model just pass the second parameter with view and that’s it.

While sending parameters with post request we can use single (as above) or collection of values i.e. model like below:

var obj = {
    name: 'john',
    age: 25,
    group: 'A',
    department: 'Science'
}
$.post(url, {param : obj}).done(function (res) {
    //res is the response value from url
});

To receive this object on server side there should be a class having all four properties with same name and in action parameter should have name param.

public class JQFormModel
    {
        public string name { get; set; }
        public int age { get; set; }
        public string group { get; set; }
        public string department { get; set; }
    }

//controller's action to receive this model
public IActionResult ReceiveModel(JQFormModel param)
{
    //we can use this model values to save 
    return Ok("found");
}

I will more elaborate these get and post request with example in my next posts.