In this article i am going to explain how to call controller actions using JQuery in Asp.Net MVC.
You can either use $.get or $.ajax functions to call mvc controller action methods using Jquery.
Example:
Assume you have following mvc controller and action method.
Above Employee Controller has one action method i.e., GetEmployee() which is returning serialized Employee data.
Now use the following JQuery code to call the above mvc action method
Method 1: Using $.get()
Method 2: Using $.ajax()
Note: I am using JSON.parse because controller action is returning serialized data. So we have to parse it to convert that to normal object.
Using POST we can submit the data to controller actions.
Assume you have following controller action which saves the submitted data to database.
Now use the following JQuery code to post data to controller action method.
Method 1: Using $.post()
Method 2: Using $.ajax()
In this way we call Asp.Net MVC controller actions using JQuery.
Get data from MVC Controller action method:
You can either use $.get or $.ajax functions to call mvc controller action methods using Jquery.
Example:
Assume you have following mvc controller and action method.
public class EmployeeController : Controller
{
public string GetEmployee()
{
var emp = new Employee() { Id = 1, Name = "John", Designation = "SE" };
return Newtonsoft.Json.JsonConvert.SerializeObject(emp);
}
}
{
public string GetEmployee()
{
var emp = new Employee() { Id = 1, Name = "John", Designation = "SE" };
return Newtonsoft.Json.JsonConvert.SerializeObject(emp);
}
}
Above Employee Controller has one action method i.e., GetEmployee() which is returning serialized Employee data.
Now use the following JQuery code to call the above mvc action method
Method 1: Using $.get()
$.get("/Employee/GetEmployee", function (data) {
var employee = JSON.parse(data);
alert(employee.Name);
});
var employee = JSON.parse(data);
alert(employee.Name);
});
Method 2: Using $.ajax()
$.ajax({
url: "/Employee/GetEmployee",
success: function (data) {
var employee = JSON.parse(data);
alert(employee.Name);
}
});
url: "/Employee/GetEmployee",
success: function (data) {
var employee = JSON.parse(data);
alert(employee.Name);
}
});
Note: I am using JSON.parse because controller action is returning serialized data. So we have to parse it to convert that to normal object.
Post data to MVC controller action methods using JQuery:
Using POST we can submit the data to controller actions.
Assume you have following controller action which saves the submitted data to database.
[HttpPost]
public bool SaveEmployee(Employee employee)
{
//your code to save employee to database
//return true if data saved succesfully
return true;
}
public bool SaveEmployee(Employee employee)
{
//your code to save employee to database
//return true if data saved succesfully
return true;
}
Now use the following JQuery code to post data to controller action method.
Method 1: Using $.post()
//create the employee object
var employee = { Name: "Dave", Id: 2, Designation: "Sales" };
$.post("Employee/SaveEmployee", employee, function (data) {
if (data == "True") { //change condition based on your return type
alert("Employee Saved succesfully");
}
});
var employee = { Name: "Dave", Id: 2, Designation: "Sales" };
$.post("Employee/SaveEmployee", employee, function (data) {
if (data == "True") { //change condition based on your return type
alert("Employee Saved succesfully");
}
});
Method 2: Using $.ajax()
//create the employee object
var employee = { Name: "Dave", Id: 2, Designation: "Sales" };
$.ajax({
url: "/Employee/SaveEmployee",
type: "POST",
data: employee,
success: function (data) {
if(data == "True") //change condition based on your return type
alert("Employee Saved");
}
});
var employee = { Name: "Dave", Id: 2, Designation: "Sales" };
$.ajax({
url: "/Employee/SaveEmployee",
type: "POST",
data: employee,
success: function (data) {
if(data == "True") //change condition based on your return type
alert("Employee Saved");
}
});
In this way we call Asp.Net MVC controller actions using JQuery.
For more posts on JQuery Visit: JQuery
No comments:
Post a Comment