In this demo you will learn how to use grid mvc. I hope this will help you.
Prerequisite
- Visual Studio 2013
- I downloaded Entity Framework 6.1 just to update the default entity framework in MVC.3. Grid.MVC , you may check samples here : http://gridmvc.codeplex.com/wikipage?title=Quick%20start&referringTitle=Documentation
Let's get started.
Step 1: First Create new project in visual studio choose c# for this demo I named the project as UsingGridMvc.
After that you may right click the project and choose Manage Nuget Packages see image below.
Step 2: Update/Download Entity Framework to 6.1 (this is for my own reason, I always update my entity before working with any project.)
Step 3: Download grid.mvc from nuget package.
Step 4: Now since were done with our prerequisite. Create a Controller,
Right click the folder Controller choose Add then Controller.
in this demo I named the controller as DisplayDataController.
Step 5: Double click the DisplayDataController.cs Inside on it right click the public ActionResult Index() method then choose Add View.
Step 6: Name the your view anything you want, In this demo I named the view as Index
Step 7: Inside the View folder you may see the DisplayData folder Double click the Index.cstml file.
And add this code under the ViewBag.Title = "Index"
Layout = "~/Views/Shared/_Layout.cshtml";
Script should be like this.
- @{
- ViewBag.Title = "Index";
- Layout = "~/Views/Shared/_Layout.cshtml";
- }
Step 8: Now lets create a temporary Model Class / Properties.
Right click the Model Folder then choose Add then New Item
In this demo I named the class as Person.
Double click the Person.cs Class Inside the Model Folder, Inside the class Person should be like this.
Or you may copy this code.
- namespace UsingGridMvc.Models
- {
- public class Person
- {
- public string Fname { get; set; }
- public string Lname { get; set; }
- public int Age { get; set; }
- public DateTime Bdate { get; set; }
- }
- }
- Step 9: Go back to
Your Controller which is DisplayDataController.cs
Add the ff. Code. In this demo I just use this kind of code.
As you can see I declare the var person = new List<Person> (); and I created some dummy data which I added into the person (List). then return into our
View.
You may Copy this Code:
- public class DisplayDataController : Controller
- {
-
- public ActionResult Index()
- {
- var person = new List<Person>();
- var data1 = new Person {
- Fname = "John",
- Lname = "Wane",
- Age = 26,
- Bdate = DateTime.Parse("02/26/1988")
- };
- person.Add(data1);
- var data2 = new Person
- {
- Fname = "Bill",
- Lname = "Cuber",
- Age = 28,
- Bdate = DateTime.Parse("01/01/1980")
- };
- person.Add(data2);
- var data3 = new Person
- {
- Fname = "Mike",
- Lname = "Burger",
- Age = 22,
- Bdate = DateTime.Parse("05/22/1990")
- };
- person.Add(data3);
- return View(person.ToList());
- }
- }
Step 10: Go back you your Index.cshtml Script which located in View Folder inside the DisplayData folder.
Paste the ff. code.
- @using GridMvc.Html
- @model List<UsingGridMvc.Models.Person>
- <h2>Display Data and Sortable column with Grid MVC</h2>
- @Html.Grid(Model).Columns(columns =>
- {
- columns.Add(data => data.Fname).Titled("First Name").SetWidth(110);
- columns.Add(data => data.Lname).Titled("Last Name").SetWidth(110);
- columns.Add(data => data.Age).Titled("Age").Sortable(true);
- columns.Add(data => data.Bdate).Titled("Birth Date").Sortable(true);
- }).WithPaging(20)
Script and Code should be like this.
Note: Kindly read the documentation and tutorials for Grid.Mvc so you can manipulate the design size etc. regarding Grid.Mvc.
Step 11: Rebuild the project and Hit ctrl+f5 to run the program w/o debugging.
It should be like the image below.
NOTE: In this demo our sorted list or column are Age and Birth Date
Click Age column the Image should be like this.
There you go hope you enjoy and learn something.
Rock and Roll! #GodBless... #HappyCoding
Varun BindraPosted Apr 11, 2020, 6:06 AM
Hi, Please explain the feature of date filtering using date picker
Ramakrishna GPosted Dec 19, 2017, 6:01 AM
By default grid mvc is doing string sorting. Is there any option to override its default sorting? If there I would like to override to alphanumeric sorting.
Azib ZafarPosted Dec 16, 2015, 12:56 AM
if we perform some updation on Grid like John update to Smith then Model is also updated auto or not...?? if not then how to retrieve the data from Grid...???
Manish Kumar ChoudharyPosted Dec 19, 2014, 5:42 AM
nice..
sagar jagPosted Dec 19, 2014, 5:07 AM
By using @using GridMvc.Html in the view i m getting error called cant find namespace for this line so what should be done to fix this issue can u help me plss..