How to call Asp.Net MVC controller action method using JQuery

In this article i  am going to explain how to call controller actions using JQuery in Asp.Net MVC.

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

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

Method 2: Using $.ajax()

$.ajax({
        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;
        }

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

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

In this way we call Asp.Net MVC controller actions using JQuery.

For more posts on JQuery Visit: JQuery

Read more...