Create GridView using MVC and Razor.


Introduction : 
              Hi, here i will explain you how to create a GridView Like Structure in MVC Razor View engine.In Previous tutorial i have Explained you How to Insert Details into Database using MVC. Here Using the Same details I am retrieving  the same data from the Database and Displayed as a Grid.


Step 1 : Select  MVC  web application


Step 2 : Select Empty template with Razor view Engine.


Step 3 : Create the Database,Table for Which you are going to insert


Step 4 : Right Click on model folder add a class file to it.




Step 5 : Give the name to the class file created in Model folder. 


Step 6 : Start writing code to model.


  1. Create Property class for the details to insert.
  2. Create function for inserting details( DB Layer Coding )
Your model coding looks as below.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;

namespace GridInMVC.Models
{
 public class RegistrationDetails
  {
//creatinng property class for the details to insert
   public string Name { get; set; }
   public string EmailID { get; set; }
   public string Mobilenumber { get; set; }
   public string Address { get; set; }
   public DataSet Tempstore { get; set; }

   SqlConnection con = new SqlConnection("Your connection String");
   SqlCommand cmd = new SqlCommand();
  
//Creating function to retrive details
 public DataSet SelectAllStudents()
 {
  DataSet ds = new DataSet();
  cmd.CommandText = "select * from [Table]";
  cmd.Connection = con;
  try
   {
    con.Open();
    SqlDataAdapter da = new SqlDataAdapter(cmd);
    da.Fill(ds);
    return ds;
    }
   catch (Exception es)
   {
    throw es;
   }
  }
 }

}


Step 7 : Right Click on Controller folder and create new Controller.


Step 8: Give name to the controller followed by the text 'Controller'


Step 9 : Your basic controller Structure 


Step 9 : Write coding to your Controller


Your controller code looks as below

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using GridInMVC.Models;
using System.Data;

namespace GridInMVC.Controllers
{
    public class RegController : Controller
    {
        RegistrationDetails obj = new RegistrationDetails();
        public ActionResult ShowAllStudentDetails(RegistrationDetails RD)
        {
            RD.Tempstore = obj.SelectAllStudents();
            return View(RD);
        }
       
    }

}


Step 10 : Create view by placing your cursor near your ActionResult name as below.




Step 11 : Keep View name as it looks.  check strongly typed view select your model.


Step 12 : Add the below code to the view.

@model GridInMVC.Models.RegistrationDetails

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ShowAllStudentDetails</title>
    <style type="text/css">
        .as {
            border:1px dashed #CCCCCC;
        }

    </style>
</head>
<body>
<div>
<table border="1" cellpadding="0" cellspacing="0" style="border-color:#efefef"  width="50%">
<tr height="40px" >
<td>ID</td>
<td>Name</td>
<td>Email</td>
<td>Mobile</td>
<td>Address</td>
</tr>
  @{
   for (int i = 0; i < Model.Tempstore.Tables[0].Rows.Count; i++)
    {
  var ID = Model.Tempstore.Tables[0].Rows[i]["ID"].ToString();
  var Name = Model.Tempstore.Tables[0].Rows[i]["Name"].ToString();
  var Mobile = Model.Tempstore.Tables[0].Rows[i]["Email"].ToString();
  var Email = Model.Tempstore.Tables[0].Rows[i]["Mobile"].ToString();
  var Address = Model.Tempstore.Tables[0].Rows[i]["Address"].ToString();
    <tr>
       <td>@ID</td>
  <td>@Name</td>
       <td>@Mobile</td>
       <td>@Email</td>
       <td>@Address</td>
   </tr>
       }
     }
     </table>
     </div>
</body>
</html>


Your Coding part is completed. Now Run your Application,you will find an error that 'resource Cannot bee find' Now Change your URL As 'http://localhost:60622/Reg/ShowAllStudentDetails' to get Output.

To avoid this doing manually later tutorials you will see Routing concepts.