GET and POST Calls to Controller's Method in MVC

.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] ).done/.fail

public string TellMeDate()  
{  
    return DateTime.Today.ToString();  
}

<p id="rData">  
</p>   
<script type="text/jscript">  
    var url = "/Home/TellMeDate";  
    $.get(url, null, function (data) {  
        $("#rData").html(data);  
    });  
</script>

<script type="text/jscript">  
    $('#ButtonID').click(function () {  
        var url = "/Home/TellMeDate";  
        $.get(url, null, function (data) {  
            $("#rData").html(data);  
        });  
    })  
</script>

public string WelcomeMsg(string input)  
{  
    if (!String.IsNullOrEmpty(input))  
        return "Please welcome " + input + ".";  
    else  
        return "Please enter your name.";  
} 

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

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);  
}

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

Using Firebug we can sniff the response. A screenshot is shown below.

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.

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.

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.