jQuery Ajax GET and POST calls to Controller's Method in MVC
In
this blog post I am going to cover some really interesting stuff which is very
useful today in web application developments. You will learn how to make jQuery
Ajax GET and POST calls to controller methods.
When we use jQuery Ajax to access server (controller’s method) without reloading the web page we have two choices on how to pass the information for the request to the server (controller’s method). These two options are to use GET or POST.
Note: Before getting started with coding make sure, you are using jQuery library before the GET or POST script.
When we use jQuery Ajax to access server (controller’s method) without reloading the web page we have two choices on how to pass the information for the request to the server (controller’s method). These two options are to use GET or POST.
Note: Before getting started with coding make sure, you are using jQuery library before the GET or POST script.
GET
GET
is used to request data from a specified resource. With all the GET request we
pass the url which is compulsory, however it can take following overloads.
.get(
url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] ).done/.fail
Now,
let’s try to use GET in MVC application.
GET call to Controller’s Method which
will return string data
Let’s
imagine we have 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
page gets load, jQuery Ajax will generate an Ajax GET request/call. The first
parameter is the URL and second is data (this is an optional, even we can avoid
typing ‘null’) and third is success function when the response is received. The
success function takes one parameter ‘data’ that holds the string content and
we attached this content to a DOM element.
If
you want to generate Ajax GET request when user clicks button, we can use
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 following output.
GET call with parameter to Controller’s
Method which will return string data
Let’s
imagine we have 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 (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 name in 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 above looks like the following:
GET call with parameter to Controller’s
Method which will return JSON data
Controller’s
method we have used above returned simple strings. Now, to deal with complex
data we need JSON. The method given below will return JsonResult having
ContactName and Address of customer’s from NorthwindEntities. I am using
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);
}
Above
method will accept Id as parameter and will return ‘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 country name in textbox, jQuery
Ajax will generate an Ajax GET request/call. Notice that the ‘getJSON’ function
now contains URL in format ‘/Controller/ActionMethod/Key, here key (parameter)
is supplied country name. The result of the above looks like the following:
Using
Firebug we can sniff the response. A screen shot is shown below:
In
above example we have used textbox where we typed country name and clicked on
button to get the list of customers.
Alternatively,
we can populate the list of country in dropdownlist box and then when user will
select the country name from dropdownlist, we can display the list of
customers.
Here
is the controller that will populate the country list in dropdownlist box.
public ActionResult About()
{
var result = from r in db.Customers
select r.Country;
ViewBag.Country = result;
return View();
}
Now,
once we have list of country in dropdownlist box, we can implement Ajax GET request/call.
Here it is with 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 same like above textbox version.
POST
POST
is used to submit data to be processed to a specified resource. With all the POST
request we pass the url which is compulsory and data, however it can take following
overloads.
.post(
url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )
Now,
let’s try to use POST in MVC application.
POST call to Controller’s Method to
save textbox data (not form)
There
are various ways to POST form data to 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 user will click the button I want to save data via jQuery Ajax POST call. So,
here is the method accepting two parameters 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 above method to save data in database, it will also return the
response back to 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 above application it will look like following.
POST call to Controller’s Method to
save form data
In
above case we don’t have form, so I have used two individual properties/parameters
(name, address) with jQuery Ajax POST call and also on method side, but this
approach will be painful as number of properties increase. In this case we can
use model approach that will allow us working with intelisense. So, let’s go
and create ‘Subscription’ model class with two properties.
public class Subscription
{
public string Name { get; set; }
public string Address { get; set; }
}
Now,
once we have 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
same just using 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>
}
Noting
new, everything same just few changes allowed us to work with form.
Hope
this helps.
Very good post. Had some issues with the dropdownlist example. Couldn't get it to work without a strongly type View.
ReplyDeleteOh Its really helpful....
ReplyDeleteHi Abhimanyu,
ReplyDeleteYou have very genius solutions.
Thanks Jitender
someone tell me how to do this with MVC2
ReplyDeletehello.. In dropdwnlistfor example click function is not working at all. Guess u've to use change function. Also U've mentioned Id in click function but where is it in the control?
ReplyDeleteadd script in the layout of ajax library and jquery
Deletethank you!
ReplyDeleteYour post help me much!
great work dude...
ReplyDeletei trying to run your code but i was not get any output as show by you can i tell me where i have done the mistake..
ReplyDeleteGreat post!! clear and precise...
ReplyDeleteon success text file is downloading how to fix
ReplyDeletethank you!
ReplyDeleteexcellent!
Thank you; very helpful.
ReplyDeleteThank you! It helped me for the first mvc project.
ReplyDeleteHi Sir,
ReplyDeleteCould you please provide an example with view,model and controller for " GET call with parameter to Controller’s Method which will return string data "
I have textbox...when i enter some value and click on add button, it should add to checkbox within same page
Very Nice Article...Thank you so much
ReplyDeletethanks.great post
ReplyDeletethanks, thats what i need
ReplyDeletebut when i search a unique value, appears the information and lost quickle.
any idea whats happend?
Very helpful... actually this is exactly what I needed.
ReplyDeleteWOW..good work..
ReplyDeleteThank you so much!!! Really helped me!
ReplyDeleteVery Helpful article Thanks !!!
ReplyDeleteawesome buddy..
ReplyDeleteGood job
ReplyDeletegood work, it helped me a lot
ReplyDeleteI am facing an issue while posting json to controller, it's taking too much time (almost 2 mins).
ReplyDeletePlease advise if you have suggestion.
Content-Length: 1917270
i want to call a java class method on radio button click using jquery so please help me to solve this problem.....
ReplyDeleteHi Team,
ReplyDeleteIam trying for the past 2 days to pass the textbox values as parameters to Controller's method in MVC3 Razor..
below is my JQuery Code:
$(function () {
var txtName = document.getElementById('txtName');
var txtMail = document.getElementById('txtMail');
var txtMobile = document.getElementById('txtMobile');
var txtDOB = document.getElementById('txtDOB');
$('#dialog').dialog({
autoOpen: false,
width: 800,
height:700,
resizable: false,
cache: false,
title: 'Duplicate Candidates',
modal: true,
type: "post",
data: {
Name: txtName,Mail:txtMail,Mobile:txtMobile,DOB:txtDOB
},
open: function(event, ui) {
$(this).load("@Url.Action("SearchDuplicate", "Candidate")");
},
buttons: {
"Close": function () {
$('#dialog').dialog("close");
}
}
});
$("#btnValidate").click(function () {
$("#dialog").dialog("open");
//alert("Hi Dinesh alert working fine");
});
});
can we is there help me out........
I want this publisher email id how can i get it ?
ReplyDelete[email protected]
DeleteWhat jquery I need to install in my package for use this script!
ReplyDeletechulada, muchas gracias
ReplyDeleteI'm going to try the listbox examples. I'll let you know how it goes...
ReplyDeleteHi. i want to search based on Id if i enter id in textbox the total details display in the other textboxs from database in mvc3 please solve my prolem.
ReplyDeletehi. i want to display the details in textbox based on id from database .if i enter the userid the user details display in the other textboxes in mvc3. please help me
ReplyDeletegreat job........
ReplyDeletecan you please show how to update the particular row of the database when id is typed using jquery
ReplyDeleteI enjoyed reading you post. Usually writing skills is attained via practice: e. I am sharing it with my other friends on social networking sites, as the information is really very useful. Keep sharing your excellent work.
ReplyDeletesorif,
Clipping Path
While you are taking care of more important matters, one of our professional and scholarly writers essay writing services is busy providing you with good essay writing. College is supposed to be spent having fun, meeting new friends, and enjoying a carefree life that you just won’t have after graduation.
ReplyDeletesorif,
Clipping Path
Thank you sir
ReplyDeletegood
ReplyDeleteHello Abhimanyu
ReplyDeleteThanks for your help to learn mvc
Can please explain how to bind Nested Grid with expand and collapse
Thanks
Hello Abhimanyu
ReplyDeleteThanks for your help to learn mvc
Can please explain how to bind Nested Grid with expand and collapse
Thanks
Nice Article..
ReplyDeleteThanks
very helpful bro. easy and with nice examples keep it up bro
ReplyDeleteThanks Dude...
ReplyDeleteExcellent Job!!
ReplyDeletenice job :
ReplyDeleteOther than headache I got from constantly running animations this was a pretty nice tutorial :)
ReplyDeleteif .get and .post methods are not working use original ajax procedures like here...
ReplyDeletehttp://ajaxme.blogspot.in/2011/06/aspnet-mvc-using-jquery-ajax-to-call.html
good...informative..
ReplyDeleteThks alot, it's so nice :)
ReplyDeleteThanks, Nice Article
ReplyDeleteReally gud from starting point of view...
ReplyDeletegood explanation ..
ReplyDeleteVery good explanation...
ReplyDeleteReally gud
ReplyDeleteAwesome!!!
ReplyDeleteexcellent totorial. Can you please the code as well?
ReplyDelete