Learn to send Ajax Post and Get Request in MVC

Hi friends, today we are going to learn how to send Ajax post and get request in MVC.

Let’s get to know What is HTTP Get: If you want to retrieve data from server/client, then we use http get method. In http get only URL and headers are sent to the server. Since, HTTP Get request goes via URL, so it has a limitation for its length. It can’t be more than 255 characters long. In MVC when any view loads for the first time http get method is executed. In Http get data is sent using query string along with the URL. In MVC, we can define [HttpGet] attribute on controller action so the action method can only be accessed via http get method.

Now let’s see What is HTTP Post: If you want to post or send form data to server/client then we use http post method. Http Post method executes once you click on Submit button. The data is included in the body of the request. In MVC we can define [HttpPost] attribute on controller action so the action method can only accessed via http post method.

Similarly there are HTTP PUT and HTTP DELETE methods.

A PUT request is a way to upload a file to a server. Most servers don’t allow PUT requests, because of the security implications.

A DELETE request will delete a resource on the server. Like PUT, this method is rarely permitted on the server for obvious reasons.

So, let’s start with the example. We are using Ajax post and get method in below example.

– Open visual studio then click on file, New Project; Select asp.net MVC web applications and then, Internet Application.

– Now Open Index.cshtml inside View Home Folder and remove all the code and paste the code below in it.

<h1>Http get and post</h1>

<div class="clear">  <br /> </div>
<table>
    <thead>
        <tr> <th>Method</th>  <th>Action</th></tr>
    </thead>
    <tbody>
        <tr>
            <td>Http Get</td>
            <td><a href="javascript:;" onclick="GetData();">Click to Get</a></td>
        </tr>
        <tr>
            <td>Http Post</td>
            <td><a href="javascript:;" onclick="PostData();">Click to Post</a></td>
        </tr>
    </tbody>
</table>



<script type="text/javascript">
    function GetData() {
        $.ajax({
            type: 'GET',
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            url: "../Home/GetData" + "?test=1", 
            success: function (data) { alert('Successfully get method executed.') },
            error: function (a, jqXHR, exception) { }
        });
    }
    function PostData() {
        $.ajax({
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            url: "../Home/PostData",
            data: "{ 'test': '2'}",
            success: function (data) { alert(data) },
            error: function (a, jqXHR, exception) { }
        });
    }
</script>

<style type="text/css">
    table {  width: 100%;  border-collapse: collapse; } 
    tr:nth-of-type(odd) {  background: #eee; }
    th {  background: #333;  color: white; font-weight: bold; }
    td, th { padding: 6px; border: 1px solid #ccc;  text-align: left; }
</style> 

Now open HomeController file inside Controllers folder and add the code below in it

      [HttpGet]
        public ActionResult GetData(string test) {
            return Json("Successfully get method executed.",JsonRequestBehavior.AllowGet);
        }
        [HttpPost]
        public ActionResult PostData(string test)
        {
            return Json("Successfully post method executed.");
        }	

Now, run the application and see the output.

Summary: In above example, we have learnt how to send post and get request using ajax and MVC.