Wednesday, July 9, 2014

Webgrid in Asp.Net MVC 4

Webgrid in Asp.Net MVC 4

In this blog, I am going to tell how to show the content from database in the table or grid structure in mvc 4 using the Webgrid control.

Webgrid is used to display the content in the row column format just like table structure; Webgrid is similar to the gridview in and datagridview in windows form.

Step -1

First create a table named “Student” in the database with the following fields:

And insert some dummy data in the table to show in the webgrid.

Step -2

Now create an mvc 4 web application and add a model class named “Student” and write the below code in it:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebGridMvcApp.Models
    public class Student
        public string StudentId { get; set; }
        public string Name { get; set; }
        public string Age { get; set; }
        public string Address { get; set; }
        public string Course { get; set; }


Step -3

Now add a controller to the project and named “HomeController” and write the below code in it:
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebGridMvcApp.Models;

namespace WebGridMvcApp.Controllers
    public class HomeController : Controller
        // GET: /Home/

        public ActionResult Index()
            List<Student> student = new List<Student>();

            string ConnString = ConfigurationManager.ConnectionStrings["ConnString"].ConnectionString;
            SqlConnection conn = new SqlConnection(ConnString);
            SqlCommand cmd = new SqlCommand("Select * From StudentInformation",conn);
            SqlDataReader reader = cmd.ExecuteReader();
            while (reader.Read())
                student.Add(new Student {
                    StudentId = reader["StudentId"].ToString(),
                    Name = reader["Name"].ToString(),
                    Age = reader["Age"].ToString(),
                    Address = reader["Address"].ToString(),
                    Course = reader["Course"].ToString()


            return View(student);


Step -4

Now add a view to the project named “Index” and it will be strongly typed view like this:
@model IEnumerable<WebGridMvcApp.Models.Student>

    Layout = null;

    var grid = new WebGrid(Model, canPage: true, rowsPerPage: 10,
    selectionFieldName: "selectedRow", ajaxUpdateContainerId: "WebgridContent");

<!DOCTYPE html>

    <meta name="viewport" content="width=device-width" />
    <style type="text/css">
    .webGrid { margin: 4px; border-collapse: collapse; width: 500pxbackground-color:#6ec0de;}
    .header { background-color: #C1D4E6; font-weight: bold; color: #FFF; }
    .webGrid th, .webGrid td { border: 1px solid #C0C0C0; padding: 5px; }
    .alt { background-color: #E4E9F5; color: #000; }
    .gridHead a:hover {text-decoration:underline;}
    .description { width:auto}
    .select{background-color: #71857C}
        <div id="WebgridContent">
    @grid.GetHtml(tableStyle: "webGrid",
            headerStyle: "header",
            alternatingRowStyle: "alt",
            selectedRowStyle: "select",
            columns: grid.Columns(
            grid.Column("Name", "Name"),
            grid.Column("Age", "Age"),
            grid.Column("Address", "Address"),
            grid.Column("Course", "Course")

Step -5

Now add the connection string in web.config file like below:
  <add name="ConnString" connectionString="Data Source=Your data source name;Initial Catalog=Your database name;Integrated Security=true;"providerName="System.Data.SqlClient"/>


Run the application

No comments:

Post a Comment