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.

7 Comments

Join the conversation! Your thoughts help the community grow.

Laxmidhar Sahoo6y ago
Thanks for a good naration
Jairo Vasquez8y ago
Use [FromBody] if you are dev in .net core 2.0 this help to avoid having null values when passing from ajax to controller method ;)
- sushruth Aeluguri8y ago
  Thank you!!!
Amit Makhija8y ago
How to Insert Date Using jQuery Ajax POST Method In ASP.NET MVC 5??
Shaikh Ateeque8y ago
Nice way of explanation..
Naresh Singhal8y ago
Fantastic !! Liked the way explained.....
Animesh Datta8y ago
Nice tip . keep posting