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. Avatar veste the north face homme
    • Avatar admin
  2. Avatar barbour stövlar
    • Avatar admin
  3. Avatar ralph lauren skor
    • Avatar admin
  4. Avatar webpage
  5. Avatar barbour återförsäljare
  6. Avatar parajumpers-kodiak.cqwawa.net
  7. Avatar Lamar
  8. Avatar parajumpers kodiak women

Leave a Reply

Your email address will not be published. Required fields are marked *