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


ASP.NET MVC ASP.NET MVC 
Ratings:
2 Comment(s)
 3545  View(s)
Rate this:

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

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 { getset; }

        public string Name { getset; }

        public string Address { getset; }

        public string ContactNo { getset; }

    }

}

 

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 { getset; }

    }

}

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”.

 


Nice Article

By Chintoo Semi on   2 years ago
nice article                                                                                                                                          

nice article

By Chintoo Semi on   2 years ago
nice article        

Don't want to miss updates? Please click the below button!

Follow MindStick