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

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>
<script>
    $(document).ready(function () {
        $.ajax({
            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>");
               $("#studentdata").html(output);
            }
        });
    });
</script>

<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>
        </tr>
        <tbody id="studentdata">
    </table>
</div>

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