Creating Web Grid in asp view in MVC3

If you are using asp views and need to build a grid to show data, you can use WebGrid. The WebGrid will have several features like custom styles, sorting, paging. The Below is the code for Creating Web Grid in asp view in MVC3.

Code in Model

using System;
using System.Web;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel;
using System.Data.SqlClient;
using System.Web.Mvc;
using System.Drawing;
using System.Drawing.Imaging;
using System.Collections.Generic;
using System.Drawing.Text;
namespace DemoApp.Models
{
    public class DemoModel
    {
        [Display(Name = "Role Name")]
        public String Role { get; set; }
        public IEnumerable FlavorItems
        {
            get { return new SelectList(getRole(), "id", "Username"); }
        }
        public List getRole()
        {
            List Role = new List();
            SqlConnection connection = new SqlConnection
            (System.Configuration.ConfigurationManager.ConnectionStrings["cs"].ConnectionString);
            connection.Open();
            SqlCommand command = new SqlCommand("Select * from TBL_Login", connection);
            SqlDataReader rdr = command.ExecuteReader();
            while (rdr.Read())
            {
                Role.Add (new Role(){
                    id = int.Parse(rdr["id"].ToString()),
                    Username = rdr["Username"].ToString()   
                }) ; 
            }
            connection.Close();
            return Role;
        }
    }
    public class Role
    {
        public int id { get; set; }
        public string Username { get; set; }
    }
 
}

Code in Controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using DemoApp.Models;
namespace DemoApp.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        public ActionResult Index()
        {
            DemoApp.Models.DemoModel Model = new Models.DemoModel();
            return View(Model);
        }
        [HttpPost]
        public ActionResult Index(DemoModel Model)
        {
            string role = Request.Form["Role"];
            return View(Model);
        }
    }
}

Code in View

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<DemoApp.Models.DemoModel>" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <title>Index</title>
    <style type="text/css">
    .webGrid { margin: 4px; border-collapse: collapse; width: 500px;  background-color:#B4CFC3;}
    .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}
</style> 
</head>
<body>
    <div>
       <%using ( Html.BeginForm("Index", "Home", FormMethod.Post)){ %>
        <%: Html.LabelFor(m => m.Role)%>
        <%: Html.DropDownList("Role", Model.FlavorItems)%>
        <%: Html.ValidationMessageFor(m => m.Role)%>
        <% var grid = new WebGrid(source:Model.getRole(), defaultSort: "id", rowsPerPage: 2); %>
        <input type="submit" value="Submit" />  
        <div>
        <%: grid.GetHtml(tableStyle: "grid",
               headerStyle: "head",
               alternatingRowStyle: "alt",
               columns: grid.Columns(
                   grid.Column("id"),
                   grid.Column("Username"))) %>
    </div>        
        <% } %>
    </div>
</body>
</html>
Rajat Jain
Rajat Jain

Latest posts by Rajat Jain (see all)

11 Comments
  1. veste the north face homme
    • admin
  2. barbour stövlar
    • admin
  3. ralph lauren skor
    • admin
  4. webpage
  5. barbour återförsäljare
  6. parajumpers-kodiak.cqwawa.net
  7. Lamar
  8. parajumpers kodiak women

Leave a Reply