Post The Data To ASP.NET MVC Controller Using JQuery Ajax

Here, you will learn how to Post the Data to ASP.Net MVC controller using JQuery Ajax

This blog will demonstrate, how to post the data to ASP.Net MVC controller(s) using JQuery Ajax. For that, I have created one controller "JQueryAjaxCallController" with the post action method "AjaxPostCall" and a class "Employee" as below.

Controller 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace JQueryAjaxCallINMVC.Controllers {
    public class JQueryAjaxCallController: Controller {
        //
        // GET: /JQueryAjaxCall/
        public ActionResult Index() {
                return View();
            }
            [HttpPost]
        public JsonResult AjaxPostCall(Employee employeeData) {
            Employee employee = new Employee {
                Name = employeeData.Name,
                    Designation = employeeData.Designation,
                    Location = employeeData.Location
            };
            return Json(employee, JsonRequestBehavior.AllowGet);
        }
    }
    public class Employee {
        public string Name {
            get;
            set;
        }
        public string Designation {
            get;
            set;
        }
        public string Location {
            get;
            set;
        }
    }
}

View 

Next step is to add a View for the Controller and while adding it you will need to select the Employee class created earlier. 

 

Once you click the Add button, it will create strongly typed view with Employee model. Now we need to create Razor/Html controls to get the user input. Here, I used the HTML controls to get user input and we made a jQuery Ajax Post to call MVC controller in the below code.

@model JQueryAjaxCallINMVC.Controllers.Employee
@ {
    Layout = null;
} < html > < head > < meta name = "viewport"
content = "width=device-width" / > < title > JQUERY AJAX CALL < /title> < script type = "text/javascript"
src = "https://code.jquery.com/jquery-1.12.4.js" > < /script> < script type = "text/javascript" > $(function() {
    $("#btnPost").click(function() {
        var employee = new Object();
        employee.Name = $('#txtName').val();
        employee.Address = $('#txtDesignation').val();
        employee.Location = $('#txtLocation').val();
        if (employee != null) {
            $.ajax({
                type: "POST",
                url: "/JQueryAjaxCall/AjaxPostCall",
                data: JSON.stringify(employee),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(response) {
                    if (response != null) {
                        alert("Name : " + response.Name + ", Designation : " + response.Designation + ", Location :" + response.Location);
                    } else {
                        alert("Something went wrong");
                    }
                },
                failure: function(response) {
                    alert(response.responseText);
                },
                error: function(response) {
                    alert(response.responseText);
                }
            });
        }
    });
}); < /script> < /head> < body > < div style = "margin-left:20px" > JQuery Ajax POST call wtih ASP.NET MVC controller < /div> < br / > < div title = "PostPortion" > < input type = "text"
id = "txtName"
placeholder = "Name" / > < input type = "text"
id = "txtDesignation"
placeholder = "Designation" / > < input type = "text"
id = "txtLocation"
placeholder = "Location" / > < input type = "button"
id = "btnPost"
value = "Post Data" / > < /div> < /body> < /html>

Detailed Description

The JSON.stringify() method converts a JavaScript value to a JSON string. It's optional when we are just passing parameter(s) with Values(s) 

RouteConfig.Cs

You need to set your startup controller and view.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace JQueryAjaxCallINMVC {
    public class RouteConfig {
        public static void RegisterRoutes(RouteCollection routes) {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.MapRoute(name: "Default", url: "{controller}/{action}/{id}", defaults: new {
                controller = "JQueryAjaxCall", action = "Index", id = UrlParameter.Optional
            });
        }
    }
}

Now run your application 

 

Refer to the attached demo project and I hope it's helpful.