Binding DataTable from database in mvc4 asp.net

Introduction : This tutorial explain how to bind datatable from sql database to Simple html table here data can be display in html table. here we can use the viewbag to pass data controller to view.

Tool: visual studio 2012 and sql server database

DownLoad Complete Code Here : DownLoad

Step 1 : First you can create mvc4 web application and add database.

Step 2 : Now create model as following image
Model >> Add >> Class

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.ComponentModel.DataAnnotations;
namespace MvcApplication1.Models
{
    public class DAL
    {
        public int id { get; set; }
        [Required]
        public string Name { get; set; }
        public string City { get; set; }
        public string Education { get; set; }

        Publc SqlConnection con = new SqlConnection(@"Data Source=(LocalDB)\v11.0;AttachDbFilename=C:\Users\home\Desktop\MVC_Project\MvcGridview\MvcApplication1\App_Data\Database1.mdf;Integrated Security=True");


        public List<DAL> Select_data()
        {
            List<DAL> D = new List<DAL>();
            con.Open();
            SqlCommand cmd = new SqlCommand("select * from tbl_user", con);
            SqlDataReader dr = cmd.ExecuteReader();
            while (dr.Read())
            {
                DAL da = new DAL();
                da.id = Convert.ToInt32(dr["id"].ToString());
                da.Name = dr["Name"].ToString();
                da.City = dr["City"].ToString();
                da.Education = dr["Education"].ToString();
                D.Add(da);
            }
            con.Close();
            return D;
        }

Step 3 : Now add controller as following
controllers >> Add >> controller

public class ABCController : Controller
    {
        //
        // GET: /ABC/

        public ActionResult Index()
        {
            return View();
        }

public ActionResult TableData(DAL da)
        {
            var data = da.Select_data();
            ViewBag.users = data;
            return View();

        }
}

Step 4 : Now Add View as following and give name TableData.cshtml

@model MvcApplication1.Models.DAL

@{
    ViewBag.Title = "TableData";
}

<table id="tbl1">
    <thead>
        <th>ID</th>
        <th>Name</th>
        <th>City</th>
        <th>Education</th>

    </thead>

    @foreach (var item in ViewBag.users)
     {

        <tr>
            <td>@item.id
            </td>
            <td>@item.Name
            </td>
            <td>@item.City
            </td>
            <td>@item.Education
            </td>

        </tr>

    }

</table>

When you run project see output as following