In this article, I am going to cover some really interesting material that is very useful today in web application development. You will learn how to make jQuery Ajax GET and POST calls to controller methods.
When we use jQuery Ajax to access a server (controller's method) without reloading the web page we have two choices for how to pass the information for the request to the server (controller's method). These two options are to use either GET or POST.
Note. Before beginning with the code, ensure you are using the jQuery library before the GET or POST script.
GET
GET is used to request data from a specified resource. With all the GET requests we pass the URL which is compulsory, however, it can take the following overloads.
.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] ).done/.fail
Now, let's try to use GET in the MVC application.
GET call to Controller's Method that will return string data
Let's imagine we have the following method in the controller:
public string TellMeDate()
{
return DateTime.Today.ToString();
}
This method will return string data (date-time) when we call it, let's make an async call using jQuery Ajax.
<p id="rData">
</p>
<script type="text/jscript">
var url = "/Home/TellMeDate";
$.get(url, null, function (data) {
$("#rData").html(data);
});
</script>
When the page gets loaded, jQuery Ajax will generate an Ajax GET request/call. The first parameter is the URL the second is data (this is optional, even if we can avoid typing "null") and the third is the success function when the response is received. The success function takes one parameter "data" that holds the string content and we attach this content to a DOM element.
If you want to generate an Ajax GET request when the user clicks a button then can use the following instead:
<script type="text/jscript">
$('#ButtonID').click(function () {
var url = "/Home/TellMeDate";
$.get(url, null, function (data) {
$("#rData").html(data);
});
})
</script>
If you run the application, you will see the following output.
![jQuery Ajax GET]()
GET call with a parameter to Controller's Method that will return string data.
Let's imagine we have the following method in the controller:
public string WelcomeMsg(string input)
{
if (!String.IsNullOrEmpty(input))
return "Please welcome " + input + ".";
else
return "Please enter your name.";
}
This method will accept a parameter and will return string data (a welcome message or instruction message) when we call it. Now, let's make an async call to this method using jQuery Ajax.
<p>
Enter you name @Html.TextBox("Name")
<input type="submit" id="SubmitName" value="Submit"/>
</p>
<script type="text/jscript">
$('#SubmitName').click(function () {
var url = "/Home/WelcomeMsg";
var name = $('#Name').val();
$.get(url, { input: name }, function (data) {
$("#rData").html(data);
});
})
</script>
As you can see, when we click the button after typing a name in the TextBox, jQuery Ajax will generate an Ajax GET request/call. Notice that the second parameter to the "get" function now contains a key { input: name } (parameter). This example supplies one parameter but can be extended to provide multiple parameters. The result of the preceding looks like the following.
![GET]()
GET call with a parameter to Controller's Method that will return JSON data
The Controller's method we used above returns simple strings. Now, to deal with complex data we need JSON. The following method will return a JsonResult having the customer's contact name and Address from NorthwindEntities. I am using the Northwind database and EF Database First approach in this sample.
public JsonResult CustomerList(string Id)
{
NorthwindEntities db = new NorthwindEntities();
var result = from r in db.Customers
where r.Country == Id
select new { r.ContactName, r.Address };
return Json(result, JsonRequestBehavior.AllowGet);
}
The above method will accept Id as a parameter and return a "JsonResult". This action method can be called using the following jQuery Ajax GET call.
<p id="rData">
</p>
<p>
Enter country name @Html.TextBox("Country")
<input type="submit" id="GetCustomers" value="Submit"/>
</p>
<script type="text/jscript">
$('#GetCustomers').click(function () {
$.getJSON('/Home/CustomerList/' + $('#Country').val(), function (data) {
var items = '<table><tr><th>Name</th><th>Address</th></tr>';
$.each(data, function (i, country) {
items += "<tr><td>" + country.ContactName + "</td><td>" + country.Address + "</td></tr>";
});
items += "</table>";
$('#rData').html(items);
});
})
</script>
As you can see, when we click the button after typing a country name in the TextBox, jQuery Ajax will generate an Ajax GET request/call. Notice that the "getJSON" function now contains a URL in the format "/Controller/ActionMethod/Key", here the key (parameter) is the supplied country name. The result of the preceding looks like the following.
![TextBox]()
Using Firebug we can sniff the response. A screenshot is shown below.
![Firebug]()
In the above example, we have used a TextBox where we typed the country name and clicked on a button to get the list of customers.
Alternatively, we can populate the list of countries in the dropdown list box and then when the user selects the country name from the dropdown list, we can display the list of customers.
![Dropdown list]()
Here is the controller that will populate the country list in the drop-down list box.
public ActionResult About()
{
var result = from r in db.Customers
select r.Country;
ViewBag.Country = result;
return View();
}
Now, once we have a list of countries in the dropdown list box, we can implement an Ajax GET request/call. Here it is with a complete view page.
@Html.DropDownListFor(model => model.Country, new SelectList(ViewBag.Country), "Select Country")
<p id="rData">
</p>
@section Scripts {
<script type="text/jscript">
$('#Country').click(function () {
$.getJSON('/Home/CustomerList/' + $('#Country').val(), function (data) {
var items = '<table><tr><th>Name</th><th>Address</th></tr>';
$.each(data, function (i, country) {
items += "<tr><td>" + country.ContactName + "</td><td>" + country.Address + "</td></tr>";
});
items += "</table>";
$('#rData').html(items);
});
})
</script>
}
Everything remains the same as in the TextBox version above.
POST
POST is used to submit data to be processed to a specified resource. With all the POST requests we pass the URL which is compulsory and the data, however, it can take the following overloads.
.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )
Now, let's try to use POST in an MVC application.
POST call to Controller's Method to save TextBox data (not form)
There are various ways to POST form data to a method but in the example given below, I'm not going to use any form. I will just use two textboxes and a submit button, when the user clicks the button I want to save the data using a jQuery Ajax POST call. So, here is the method accepting the two parameters for name and address.
[HttpPost]
public string SubmitSubscription(string Name, string Address)
{
if (!String.IsNullOrEmpty(Name) && !String.IsNullOrEmpty(Address))
//TODO: Save the data in database
return "Thank you " + Name + ". Record Saved.";
else
return "Please complete the form.";
}
We can implement the method above to save the data in the database, it will also return the response back to the client. Here is the jQuery Ajax POST function.
<h2>Subscription</h2>
<p>
Enter your name
<br />
@Html.TextBox("Name")
</p>
<p>
Enter your address
<br />
@Html.TextBox("Address")
</p>
<input type="button" value="Save" id="Save" />
<span id="msg" style="color:red;"/>
<script type="text/javascript">
$('#Save').click(function () {
var url = "/Home/SubmitSubscription";
var name = $("#Name").val();
var address = $("#Address").val();
$.post(url, { Name: name, Address: address }, function (data) {
$("#msg").html(data);
});
})
</script>
When you run the application above it will look like the following.
![Run the application]()
POST call to Controller's Method to save form data
In the case above we don't have a form, so I have used two individual properties/parameters (name and address) with a jQuery Ajax POST call and also on the method side, but this approach will be painful since the number of properties increases. In this case, we can use the model approach that will allow us to work with IntelliSense. So, let's go and create the "Subscription" model class with two properties.
public class Subscription
{
public string Name { get; set; }
public string Address { get; set; }
}
Now that we have the model we can create our controller method.
[HttpPost]
public string SubmitSubscription(Subscription subs)
{
if (!String.IsNullOrEmpty(subs.Name) && !String.IsNullOrEmpty(subs.Address))
//TODO: Save the data in database
return "Thank you " + subs.Name + ". Record Saved.";
else
return "Please complete the form.";
}
Still the same, just using a model instead of individual properties.
<h2>Subscription</h2>
<form id="subscriptionForm" action="/Home/SubmitSubscription" method="post">
<p>
Enter your name
<br />
@Html.TextBox("Name")
</p>
<p>
Enter your address
<br />
@Html.TextBox("Address")
</p>
<input type="button" value="Save" id="Save" />
<span id="msg" style="color:red;"/>
</form>
@section Scripts{
<script type="text/javascript">
$('#Save').click(function () {
var form = $("#subscriptionForm");
var url = form.attr("action");
var formData = form.serialize();
$.post(url, formData, function (data) {
$("#msg").html(data);
});
})
</script>
}
Nothing new, everything is the same, just a few changes that allow us to work with a form.
I hope this helps.