Implementing MVC GRID in ASP.NET MVC application

Datetime:2016-08-23 04:37:15          Topic: ASP.NET MVC           Share

Hi every one in previous post i explained about How to Install MVCGrid in ASP.NET MVC application using both manual and Nuget package installation.In this post i am going to explain about Implementing BasicMVCGrid.Before get started with this tutorial refer above link to understand the installation of MVCGrid in ASP.NET MVC web application.

Implementing MVC GRID in ASP.NET MVC

1.Create a Visual studio application(Visual studio 2013 or 2015 are recommended because MVCGrid supports MVC3 or higher versions of ASP.NET MVC frameworks).

2.Take MVC template from Visual studio builtin templates to develop web application.

3.As usual create Table and insert some data in Data Base(SqlExpress LocalDB).

4.DB code i used for table schema is..

---For Table Schema
CREATE TABLE [dbo].[Customer] (
    [CustomerId] INT          IDENTITY (1, 1) NOT NULL,
    [FirstName]  VARCHAR (50) NOT NULL,
    [LastName]   VARCHAR (50) NOT NULL,
    [OrderDate]  DATE         NOT NULL,
    [Status]     VARCHAR (50) NOT NULL,
    PRIMARY KEY CLUSTERED ([CustomerId] ASC)
);
---Insert some data into table
SET IDENTITY_INSERT [dbo].[Customer] ON
INSERT INTO [dbo].[Customer] ([CustomerId], [FirstName], [LastName], [OrderDate], [Status]) VALUES (1, N'Raviteja', N'Swayampu', N'2016-12-12', N'Active')
INSERT INTO [dbo].[Customer] ([CustomerId], [FirstName], [LastName], [OrderDate], [Status]) VALUES (2, N'venkatesh ', N'Malli', N'2016-02-03', N'Inactive')
INSERT INTO [dbo].[Customer] ([CustomerId], [FirstName], [LastName], [OrderDate], [Status]) VALUES (3, N'Martin ', N'Lutherking', N'2016-03-04', N'Active')
INSERT INTO [dbo].[Customer] ([CustomerId], [FirstName], [LastName], [OrderDate], [Status]) VALUES (4, N'Abhraham ', N'Lincon', N'2016-04-03', N'Active')
INSERT INTO [dbo].[Customer] ([CustomerId], [FirstName], [LastName], [OrderDate], [Status]) VALUES (5, N'Jarj', N'Bush', N'2016-05-03', N'Inactive')
INSERT INTO [dbo].[Customer] ([CustomerId], [FirstName], [LastName], [OrderDate], [Status]) VALUES (6, N'Bharak', N'Obama', N'2016-07-03', N'Active')
INSERT INTO [dbo].[Customer] ([CustomerId], [FirstName], [LastName], [OrderDate], [Status]) VALUES (7, N'Hillay ', N'Clinton', N'2016-08-02', N'Active')
INSERT INTO [dbo].[Customer] ([CustomerId], [FirstName], [LastName], [OrderDate], [Status]) VALUES (8, N'Bill ', N'Clinton', N'2016-09-02', N'Inactive')
INSERT INTO [dbo].[Customer] ([CustomerId], [FirstName], [LastName], [OrderDate], [Status]) VALUES (9, N'Nepolian', N'Hill', N'2016-01-01', N'Active')
INSERT INTO [dbo].[Customer] ([CustomerId], [FirstName], [LastName], [OrderDate], [Status]) VALUES (10, N'Michal ', N'Farady', N'2016-05-03', N'Active')
INSERT INTO [dbo].[Customer] ([CustomerId], [FirstName], [LastName], [OrderDate], [Status]) VALUES (11, N'Thomas ', N'Edison', N'2016-05-31', N'Inactive')
INSERT INTO [dbo].[Customer] ([CustomerId], [FirstName], [LastName], [OrderDate], [Status]) VALUES (12, N'Mark ', N'Twain', N'2016-05-23', N'Active')
INSERT INTO [dbo].[Customer] ([CustomerId], [FirstName], [LastName], [OrderDate], [Status]) VALUES (13, N'Robert', N'Kiosaki', N'2016-09-30', N'Active')
INSERT INTO [dbo].[Customer] ([CustomerId], [FirstName], [LastName], [OrderDate], [Status]) VALUES (14, N'JK', N'Rollings', N'2016-03-14', N'Active')
SET IDENTITY_INSERT [dbo].[Customer] OFF

5.Now the data base side is completed.

Add ADO.NET Entity Data Model

1.Right click on Models folder--> Add --> New Item -->Select ADO.NET Entity Data Model(Under Data) --> name it -->Add --> select Add from Database (In Entity Data Model wizard) --> Next

2.Select Database --> give name for web.config.

3.Choose your Database objects(tables) and click finish.

4.Now Model is added to my project.

Implement Grid Definition in MVCGridConfig.cs

1.Go to App_Start folder --> replace MVCGridConfig.cs file with below code.(Grid configuration)

Note: Make sure that you had MVCGrid Installed in your application.You do not referInstalling MVCGrid

[assembly: WebActivatorEx.PreApplicationStartMethod(typeof(MVCGrid.MVCGridConfig), "RegisterGrids")]
namespace MVCGrid
{
    using System.Collections.Generic;
    using MVCGrid.Models;
    using MVCGrid.Web;
    using System;
    using System.Linq;
    public static class MVCGridConfig 
    {
        public static void RegisterGrids()
        {          
            MVCGridDefinitionTable.Add("SampleGrid", new MVCGridBuilder

  
   
 ()
                .WithAuthorizationType(AuthorizationType.AllowAnonymous)
                .AddColumns(cols =>
                {
                    // Add your columns here
                    cols.Add().WithColumnName("CustomerId")
                        .WithHeaderText("CustomerId")
                        // use the Value Expression to return the cell text for this column
                        .WithValueExpression(i => i.CustomerId.ToString()); 
                    cols.Add().WithColumnName("FirstName")
                        .WithHeaderText("FirstName")
                        .WithValueExpression(i => i.FirstName);
                    cols.Add().WithColumnName("LastName")
                        .WithHeaderText("LastName")
                        .WithValueExpression(i => i.LastName);
                    //Hiding Visibility of Column
                    cols.Add().WithColumnName("FullName")
                        .WithHeaderText("Full Name")
                        .WithValueTemplate("{Model.FirstName}{Model.LastName}")
                        .WithVisibility(visible: false, allowChangeVisibility: true)
                        .WithSorting(false);
                    cols.Add().WithColumnName("OrderDate")
                        .WithHeaderText("OrderDate")
                        .WithValueExpression(i => i.OrderDate.ToString());
                    cols.Add().WithColumnName("Status")
                        .WithHeaderText("Status")
                        .WithValueExpression(i => i.Status);                   
                })
                .WithRetrieveDataMethod((context) =>
                {
                    //Data source for MVCGrid
                    var ItemList = new QueryResult
 
   
    
  ();
                    using (DatabaseEntities db=new DatabaseEntities())
                    {
                        ItemList.Items = db.Customers.ToList();
                    }
                    return ItemList;
                })
            );            
        }
    }
}

 
   

  

2.I added name space to import functionality of MVCGrid.

using MVCGrid.Web;

3.I had given name as SampleGrid .using this i will call it in View page where i want to display Grid.

4.I bind the data source for grid in .WithRetrieveDataMethod like below.

.WithRetrieveDataMethod((context) =>
                {
                    //Data source for MVCGrid
                    var ItemList = new QueryResult();
                    using (DatabaseEntities db=new DatabaseEntities())
                    {
                        ItemList.Items = db.Customers.ToList();
                    }
                    return ItemList;
                })

5.we must pass the data to grid using QueryResult object.(I binded the data to ItemList QueryResult object).

Create Controller and Index action

1.Add Controller and name it .

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }

2.Create Index action method and add View to Index action method.

3.Replace the Index View code with below code.

<!--Add MVCGrid reference to view-->
@using MVCGrid.Web;
@{
    ViewBag.Title = "www.mitechdev.com";
}

<h2>MVC GRID in ASP.NET MVC5 Web application</h2>
<!--Call grid using name specified in MVCGridConfig.cs-->
@Html.MVCGrid("SampleGrid")

4.Now run the application and see the output ..

Multiple Grid Configuration

1.If your application contains number of grids.To set the default configuration for all grids Create a GridDefaults object and set the desired properties in it.

2.Check the below code for setting default properties for multiple grids.

//Default settings 
GridDefaults defaultSet1 = new GridDefaults()
{
    Paging = true,
    ItemsPerPage = 20,
    Sorting = true,
    NoResultsMessage = "Sorry, no results were found"
};
//sample grid
MVCGridDefinitionTable.Add("UsageExample",
    new MVCGridBuilder

  
   
 (defaultSet1) // pass in defaults object to ctor
    .AddColumns(cols =>
    {
        // add columns
    })
    .WithRetrieveDataMethod((context) =>
    {
        //get data
        return new QueryResult
 
   
    
  ();
    })
);

 
   

  

Download source code for this application Source Code (Visual Studio 2015 code)

Conclusion

I hope this tutorial is understandable for every reader.In next post i will explain about Implementation of MVCGrid in ASP.NET MVC application.If you are not subscribed to this blog subscribe .follow on Social networks for daily awesome updates[F acebook , twitter , google plus] .





About List