Get and display data using jQuery AJAX and JSON .net mvc example

jQuery AJAX is a powerful tool used for sending and receiving data asynchronously from the server without reloading the entire page. In this article, we will demonstrate how to use jQuery AJAX to retrieve JSON data from an Employee class and display it on a view in .NET MVC.

1. Create an Employee class

The first step is to create an Employee class with Name, Email, Age, and Phone properties. You can define the Employee class in your project's Models folder, as shown below:

public class Employee
{
   public string Name { get; set; }
   public string Email { get; set; }
   public int Age { get; set; }
   public string Phone { get; set; }
}

2. Create Controller

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetEmployeeData()
    {
        var employees = new List<Employee>
        {
            new Employee { Name = "John Doe", Email = "[email protected]", Age = 28, Phone = "123-456-7890" },
            new Employee { Name = "Jane Doe", Email = "[email protected]", Age = 35, Phone = "234-567-8901" },
            new Employee { Name = "Bob Smith", Email = "[email protected]", Age = 42, Phone = "345-678-9012" }
        };

        return Json(employees, JsonRequestBehavior.AllowGet);
    }
}

In the code above, we have created a controller called HomeController with two actions - Index() and GetEmployeeData(). The Index() action returns the view where we will display the data. The GetEmployeeData() action returns the JSON data from the Employee class. We have used the Json() method to serialize the employees list to JSON format and return it as a JsonResult. We have also specified the JsonRequestBehavior.AllowGet option to allow GET requests.

3. Create an AJAX request

Next, we will create an AJAX request using jQuery. In this example, we will retrieve data from the Employee class and return it in JSON format.

To create the AJAX request, add the following code to your view file or separate Jquery File:

In the code above, we have created an AJAX request using the $.ajax() method. We have specified the URL of the server-side action method that will return the JSON data. We have also specified the HTTP method as GET and the data type as JSON.

4. Display data on the view

In the success callback function of the AJAX request, we will display the data on the view. We will create an HTML table and append the data to the table rows.

To display the data, add the following code to the success callback function:

var html = '';
$.each(data, function (index, item) {
    html += '';
    html += '' + item.Name + '';
    html += '' + item.Email + '';
    html += '' + item.Age + '';
    html += '' + item.Phone + '';
    html += '';
});
$('#employeeTable').append(html);

In the code above, we have created an HTML table and used the $.each() method to iterate through the JSON data. We have then created table rows with the employee data and appended them to the table using the append() method.

To display the table on the view, add the following HTML code:

   

      

         
Name
         
Email
         
Age
         
Phone
      
   
   

   

In the code above, we have created an HTML table with headers for the Name, Email, Age, and Phone properties. We have also specified an empty tbody element where we will append the data.

Conclusion

In this article, we have demonstrated how to use jQuery AJAX to retrieve JSON data from an Employee class and display it on a view in .NET MVC. By using AJAX, we can retrieve data from the server without reloading the entire page, resulting in a better user experience.