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.

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.

Comments

  1. Very good post. Had some issues with the dropdownlist example. Couldn't get it to work without a strongly type View.

    ReplyDelete
  2. Oh Its really helpful....

    ReplyDelete
  3. Hi Abhimanyu,

    You have very genius solutions.

    Thanks Jitender

    ReplyDelete
  4. someone tell me how to do this with MVC2

    ReplyDelete
  5. hello.. 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?

    ReplyDelete
    Replies
    1. add script in the layout of ajax library and jquery

      Delete
  6. thank you!
    Your post help me much!

    ReplyDelete
  7. i 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..

    ReplyDelete
  8. Great post!! clear and precise...

    ReplyDelete
  9. on success text file is downloading how to fix

    ReplyDelete
  10. Thank you; very helpful.

    ReplyDelete
  11. Thank you! It helped me for the first mvc project.

    ReplyDelete
  12. Hi Sir,

    Could 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

    ReplyDelete
  13. Very Nice Article...Thank you so much

    ReplyDelete
  14. thanks, thats what i need
    but when i search a unique value, appears the information and lost quickle.
    any idea whats happend?

    ReplyDelete
  15. Very helpful... actually this is exactly what I needed.

    ReplyDelete
  16. Thank you so much!!! Really helped me!

    ReplyDelete
  17. Very Helpful article Thanks !!!

    ReplyDelete
  18. good work, it helped me a lot

    ReplyDelete
  19. I am facing an issue while posting json to controller, it's taking too much time (almost 2 mins).
    Please advise if you have suggestion.
    Content-Length: 1917270

    ReplyDelete
  20. i want to call a java class method on radio button click using jquery so please help me to solve this problem.....

    ReplyDelete
  21. Hi Team,

    Iam 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........

    ReplyDelete
  22. I want this publisher email id how can i get it ?

    ReplyDelete
  23. What jquery I need to install in my package for use this script!

    ReplyDelete
  24. I'm going to try the listbox examples. I'll let you know how it goes...

    ReplyDelete
  25. Hi. 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.

    ReplyDelete
  26. hi. 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

    ReplyDelete
  27. can you please show how to update the particular row of the database when id is typed using jquery

    ReplyDelete
  28. I 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.
    sorif,
    Clipping Path

    ReplyDelete
  29. 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.

    sorif,
    Clipping Path

    ReplyDelete
  30. Hello Abhimanyu
    Thanks for your help to learn mvc
    Can please explain how to bind Nested Grid with expand and collapse
    Thanks

    ReplyDelete
  31. Hello Abhimanyu
    Thanks for your help to learn mvc
    Can please explain how to bind Nested Grid with expand and collapse
    Thanks

    ReplyDelete
  32. very helpful bro. easy and with nice examples keep it up bro

    ReplyDelete
  33. Other than headache I got from constantly running animations this was a pretty nice tutorial :)

    ReplyDelete
  34. if .get and .post methods are not working use original ajax procedures like here...

    http://ajaxme.blogspot.in/2011/06/aspnet-mvc-using-jquery-ajax-to-call.html

    ReplyDelete
  35. Really gud from starting point of view...

    ReplyDelete
  36. excellent totorial. Can you please the code as well?

    ReplyDelete

Post a Comment

Popular posts from this blog

Migrating database from ASP.NET Identity to ASP.NET Core Identity

Customize User's Profile in ASP.NET Identity System