WebGridMVC simple usage in asp.net MVC

Today I will show you how you can use webgrid in Asp.net MVC application.

What is WebGrid

If you ever work with asp.net web forms then you have a nice idea about Grid control. Which is very rich and flexible control to show large amount of information in web page. But as you know Asp.net MVC has no such a facility of drag and drop controls in visual studio IDE so what is the solution if you want to use a webgrid?

Solution

you can use webgrid as a solution. web grid is a class which comes under NameSpace of system.web.Helpers. There is lot of properties available for your easiness. But in this Article i just show you how you can use WebGrid for small amount of data set.

Get Started

  • Create a new Asp.net MVC project in visual studio.
  • install webgridMVC from nuget.
  • open Tools->Nuget package manager->Package Manager Console and write following command.

Install-Package WebGridMvc

Now add a new controller in your asp.net web project. Name it WebGridController and add its corresponding view.

Now in your Controller you need to write some code to get Data for webgrid. you can create a simple dummy data list or fetch it from database. i populate a list of employees with first name, last name and hire date.

In my case i use Entity framework Database first on pubs Database. My this article will help you to learn usage of Entity framework with Database first approach.

WebGridController Code.

        public ActionResult Index()
        {

        using (pubsEntities dbContext=new pubsEntities())
        {
        var GetProducts = dbContext.employees.ToList();
        return View(GetProducts);
        }

        }
    

View Code

View contains our WebGridMVC logic.

        @model IEnumerable<MultipleFileUploads.Database.employee>
            @{
            ViewBag.Title = "Web Grid Demo";
            }

            <div class="table table-bordered">
                @if (Model.Count() > 0)
                {
                var Grid = new WebGrid(
                canPage: true,
                rowsPerPage: 10,
                canSort: true,
                Grid.Bind(Model, rowCount: Model.Count(), autoSortAndPage: true);
                Grid.Pager(WebGridPagerModes.Numeric);
                @Grid.GetHtml(htmlAttributes: new { id = "EmployeeTable" },
                fillEmptyRows: false,
                tableStyle: "table table-striped table-hover",
                mode: WebGridPagerModes.All,
                firstText: "First",
                previousText: "Previous",
                nextText: "Next",
                lastText: "Last",
                footerStyle: "webgridview",
                headerStyle: "grid-header-default",
                columns: Grid.Columns(
                Grid.Column("fname", "First Name"),
                Grid.Column("lname", "Last Name"),
                Grid.Column("hire_date", "Hire Date",format:(item)=>string.Format("{0:dd-MM-yyyy}",item.hire_date)))
                );

                }
            
  • @model describe view is strongly typed.
  • you can set webgrid properties according to your need. i set per page size 10 and auto sort and page to true.
  • Bind a Model to webgrid which contain our Data.
  • Grid.Column("fname", "First Name")
    this syntax used to bind data with webGrid. first parameter takes column name which you want to bind. and second one is Column header name.
  • you can modify data inside webgrid as you can see i change date format in hire_date column.

Result

Run your project and navigate to corresponding view. you can see a grid with pagination options and your mention columns.