articles

Home / DeveloperSection / Articles / Working with Json Objects using Ajax and Asp.Net Mvc 4

Working with Json Objects using Ajax and Asp.Net Mvc 4

Sumit Kesarwani7739 23-Aug-2014

In this article, I’m explaining how to work with json objects using ajax and asp.net mvc 4.

JSON stands for JavaScript Object Notation. JSON is a light-weight text based format for data exchange. Using JSON format you can pack the data that needs to be transferred between the client and the server.

Using JSON format you essentially represent objects. In that respect JSON is quite similar to JavaScript objects. However, it is important to remember that although JavaScript objects and JSON objects look quite similar these two formats are not exactly the same.

Example

Create a table named “Customer” in the database like this:

Working with Json Objects using Ajax and Asp.Net Mvc 4

Step 1

First create a basic asp.net mvc 4 application and add a class named “Customer”, and

write the below code in it:

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Web;
 
namespace JsonWithAjaxMvcApp.Models
{
    [Table("Customer")]
    public class Customer
    {
        [Key]
        public int CustID { get; set; }
        public string Name { get; set; }
        public string Address { get; set; }
        public string ContactNo { get; set; }
    }
}

 

Step 2

Now add another class named  “CustomerContext” like below:

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
 
namespace JsonWithAjaxMvcApp.Models
{
    public class CustomerContext : DbContext
    {
        public DbSet<Customer> Customers { get; set; }
    }
}

Step 3

Now add a controller named “HomeController” to the project and write the below code in it:

using JsonWithAjaxMvcApp.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace JsonWithAjaxMvcApp.Controllers
{
    public class HomeController : Controller
    {
 
        CustomerContext db = new CustomerContext();
 
        public ActionResult Index()
        {
            return View();
        }
 
        public JsonResult GetList()
        {
            return Json(db.Customers.ToList(), JsonRequestBehavior.AllowGet);
        }
 
    }
}

 

Step 4

Now add a view named “Index” and write the below code in it:

@{
    ViewBag.Title = "Index";
}
 
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script>
    $(function () {
        $.ajax({
            type: "Get",
            url: "/home/getlist",
            datatype: "Json",
            success: function (data) {
                $.each(data, function (index, value) {
                    $('#recordList').append('<li>' + value.Name + " " + value.Address + " " + value.ContactNo +'</li>');
                });
            }
        });
    });
</script>
 
<div>
    <strong>Records List</strong>
    <ul id="recordList">
    </ul>
</div>

 

Step 5

Now add the connection string in the web.config file like this:

<connectionStrings>
  <add name="CustomerContext" connectionString="Data Source=Uttam-PC4;Initial Catalog=SumitTesting;user id=sa;password=mindstick;" providerName="System.Data.SqlClient"/>
  </connectionStrings>

Output

Working with Json Objects using Ajax and Asp.Net Mvc 4

This will give you all the records from the table “Customer”.

 


Updated 07-Sep-2019

Leave Comment

Comments

Liked By