[Using DataTable] Bind Json Data To Html Table Using Jquery In Mvc

In this tutorial, we will see how we can Bind JSON Data To Html Table Using JQuery In MVC.  In this process, we will use the Ajax Method to bind the data from the DataTable.

How to bind JSON data to table using Jquery in MVC

Steps to Bind Json Data To Html Table Using Jquery In Mvc 

  1. Add Controller.
  2. Add a action.
  3. Right Click on Action to add the views.
  4. Add Model Student.cs
  5. Create JsonResult Function to Call bind the data.
  6. Call JsonResult from Ajax on Razor View.

On HomeController

using System;

using System.Collections.Generic;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using AjaxDataTable.Models;

namespace AjaxDataTable.Controllers


    public class HomeController : Controller



        public ActionResult StudentList()


            ViewBag.Title = "Home Page";


            return View();



        public JsonResult GetJsonData()



            DataTable dt = new DataTable();

            dt.Columns.Add("ID", typeof(Int32));

            dt.Columns.Add("Name", typeof(string));

            dt.Columns.Add("Phone", typeof(string));

            dt.Columns.Add("EmailID", typeof(string));

            dt.Columns.Add("Address", typeof(string));


            dt.Rows.Add(1, "Jhon", "1234567890", "[email protected]", "UK");

            dt.Rows.Add(2, "Liam", "989898980", "[email protected]", "UK");

            dt.Rows.Add(3, "William", "65656565656", "[email protected]", "UK");

            dt.Rows.Add(4, "James", "9090786745", "[email protected]", "UK");


            List<Student> model = new List<Student>();

            if (dt.Rows.Count > 0)


                foreach (DataRow row in dt.Rows)


                    model.Add(new Student


                        ID = Convert.ToInt32(row["ID"]),

                        Name = Convert.ToString(row["Name"]),

                        Phone = Convert.ToString(row["Phone"]),

                        EmailID = Convert.ToString(row["EmailID"]),

                        Address = Convert.ToString(row["Address"])




            return Json(model);





On Student.cs Model

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace AjaxDataTable.Models


  public class Student


       public int ID { get; set; }

        public string Name { get; set; }

        public string Phone { get; set; }

        public string EmailID { get; set; }

        public string Address { get; set; }



On StudentList.cshtml


    ViewData["Title"] = "Bind json data to table using jquery in mvc –dotnettutorial.co.in";


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


    $(document).ready(function () {


            type: "POST",

            url: '@Url.Action("GetJsonData", "Home")',

            data: "[]",

            contentType: "application/json; charset=utf-8",

            dataType: "json",

            success: function (data)


              var output = data.map(i => "<tr><td>" + i.ID + "</td><td>" + i.Name + "</td><td>" + i.Phone + "</td><td>" + i.EmailID + "</td><td>" + i.Address + "</td></tr>");






<div class="text-center">

    <h1>Student List</h1>

    <table class="table table-bordered">

         <tr class="table-head">

            <th class="text-center">ID</th>

            <th class="text-center">Name</th>

            <th class="text-center">Phone</th>

            <th class="text-center">EmailID</th>

            <th class="text-center">Address</th>


        <tbody id="studentdata">



In this tutorial, we have learned how to bind Json Data To Html Table. If you have any doubt, feel free to comment below.

Post a Comment

Post a Comment (0)

Previous Post Next Post