Displaying DataTables in Asp.Net MVC Razor Page

In this tutorial, we'll learn how to display a DataTable in an Asp.Net MVC razor.

Step 1: Set Up Your MVC Project

  1. Open Visual Studio: Launch Visual Studio, and create a new ASP.NET MVC project.

  2. Create a Controller: Right-click on the "Controllers" folder, select "Add," then "Controller." Choose "MVC 5 Controller - Empty" and name it as you wish.

  3. Create an Action Method: Inside your controller, create an action method that will return the DataTable to your view.

    using System.Data;
    using System.Web.Mvc;
    public class HomeController : Controller
        public ActionResult Index()
            DataTable dataTable = GetDataTableFromSource();
            return View(dataTable);
        private DataTable GetDataTableFromSource()
            DataTable dataTable = new DataTable();
            dataTable.Columns.Add("ID", typeof(int));
            dataTable.Columns.Add("Name", typeof(string));
            dataTable.Rows.Add(1, "John");
            dataTable.Rows.Add(2, "Alice");
            dataTable.Rows.Add(3, "Bob");
            return dataTable;

Step 2: Create a View

  1. Add a View: Right-click on the "Views" folder within your controller's folder, select "Add," then "View." Name the view as your action method (e.g., "Index").

  2. Use the DataTable in the View: In your view file (e.g., "Index.cshtml"), use the following code to display the DataTable.

    @using System.Data
    <table id="myTable">
            <!-- Render table headers -->
                @foreach (DataColumn column in Model.Columns)
            <!-- Render table rows -->
            @foreach (DataRow row in Model.Rows)
                    @foreach (var cell in row.ItemArray)

Step 3: Run Your Application

  1. Build Your Project: Click on the "Build" menu and select "Build Solution" to compile your project.

  2. Run Your Application: Press F5 or click on the "Start" button to run your application.

  3. View the DataTable: Navigate to the URL of your application, and you should see the DataTable displayed in your view.

Asp.Net Ajax Control Toolkit tutorials.

Give your valuable comments.

6 + 5 =

About Us | Terms of Use | Privacy Policy | Disclaimer | Contact Us Copyright © 2012-2024 CodingFusion
50+ C# Programs for beginners to practice