Click here to Skip to main content
15,867,488 members
Articles / Web Development / HTML

Using MVC Grid In MVC

Rate me:
Please Sign up or sign in to vote.
4.80/5 (2 votes)
14 Dec 2015CPOL4 min read 9.3K   5   2
Using MVC grid in MVC

In this post, we will see how we can develop a MVC grid in our MVC application. There are so many grids available in the industries, most of them are useful. Here, we are going to use a grid called MVC grid, which uses bootstrap and jQuery. We will create some dynamic data using list first, once it is done, we will send this data to the MVC grid. Sounds good? I hope you will like this article.

Background

I have been working with the Grid controls for a long long time. So far, I have worked with jQX Grid, jQ Grid, jQuery Datatables, Pivot tables, KO grid, etc. It is always interesting to work with some controls. I always loved it. recently I worked with MVC grid. So I thought of sharing that experience with you all.

Create a MVC Application

First, we will start with creating an MVC application. Open your Visual Studio, then click File->New->Project. Name your project.

Install MVC Grid

The next step we are going to do is, install the MVC grid to our project. To install, please right click your solution and click on Manage NuGet packages.

Select NuGet Package

Select NuGet Package

Now you can see a new window, please search for MVC grid in the search box. And then click Install.

Install_MVC_Grid_To_Project
Install_MVC_Grid_To_Project

Once you installed, you can see there is a new reference file that has been added (GridMVC), you can also notice that two views are created (_Grig.cshtml, _GridPager.cshtml) and one CSS file and some scripts. Now, we will move to our next step.

Dependencies

As I said before, MVC grid uses bootstrap for design. So the next thing we need to is to install bootstrap in our project. For that, go to NuGet packages again and search for bootstrap.

Install_Bootstrap_To_Project

Install_Bootstrap_To_Project

You can see some new CSS files and scripts have been added to our project. So the set up has been done. Now what we need to do is to move on to the coding part.

Create a Controller

Now, we can create a new controller, in my case I created a controller ‘HomeController’. In my controller, I am going to call a model action which will return some dynamic data. See the code below.

C#
public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            Test t = new Test();
            var myList= t.GetData();
            return View(myList);
        }
    }

As you can see, I am creating an instance of my model Test, now we will create our model class. Shall we?

Create Model

I have create a model class with the name Test. Here, I am creating some data dynamically using a for loop and assign those values to a list. Please see the codes below.

C#
namespace AsyncActions.Models
{
    public class Test
    {
        public List<Customer> GetData()
        {
            try
            {
                List<Customer> cst = new List<Customer>();
                for (int i = 0; i < 100; i++)
                {
                    Customer c = new Customer();
                    c.CustomerID = i;
                    c.CustomerCode = "CST" + i;
                    cst.Add(c);
                }
                return cst;
            }
            catch (Exception)
            {
                throw new NotImplementedException();
            }

        }
    }
    public class Customer
    {
        public int CustomerID { get; set; }
        public string CustomerCode { get; set; }
    }
}

As you can see, I am creating a list of type Customer. Is that fine? Now what is pending? Yes, a view.

Create a Strongly Typed View

Now, we are going to create a strongly typed view.

Create_Strongly_Typed_View

Create_Strongly_Typed_View

When you create a view as strongly typed view, your view header will be as follows. @model List<asyncactions.models.customer>

So our view is ready, now we can do some code in our view to populate our grid. Are you ready? First thing is you need to include the needed references to our view, you can do this in the file called Layout.cshtml. Here, I am going to add those references directly to the view.

HTML
<link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<link href="~/Content/Gridmvc.css" rel="stylesheet" />
<script src="~/Scripts/gridmvc.min.js"></script>

Add the grid namespace

You can add the grid namespace as follows:

HTML
@using GridMvc.Html

Next thing is to add grid implementation.

MVC Grid Implementation

To add an MVC grid as our requirement, you need to add the code as below:

HTML
@Html.Grid(Model).Columns(columns =>
           {
               columns.Add(foo => foo.CustomerID).Titled
		("Customer ID").SetWidth(50).Sortable(true).Filterable(true);
               columns.Add(foo => foo.CustomerCode).Titled
		("Customer Code").SetWidth(50).Sortable(true).Filterable(true);
           }).WithPaging(20)

As you can see, we are using the columns Customer.CustomerID and Customer.CustomerCode.

Output

MVC_Grid_With_Dynamic_Data

MVC_Grid_With_Dynamic_Data

Add More Grid Features

  • To set the paging, we can use the option WithPaging(20):
  • To add title, we can use Titled property.
  • To set width, we can use SetWidth property.
  • To set sort, we can use Sortable property.
  • To set filter, we can use Filterable property.

You can always see the additional options here.

Conclusion

Did I miss anything that you may think is needed? Could you find this post useful? I hope you liked this article. Please share your valuable suggestions and feedback.

Your Turn. What Do You Think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, ASP.NET Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

This article was originally posted at http://sibeeshpassion.com/using-mvc-grid-in-mvc

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
Germany Germany
I am Sibeesh Venu, an engineer by profession and writer by passion. I’m neither an expert nor a guru. I have been awarded Microsoft MVP 3 times, C# Corner MVP 5 times, DZone MVB. I always love to learn new technologies, and I strongly believe that the one who stops learning is old.

My Blog: Sibeesh Passion
My Website: Sibeesh Venu

Comments and Discussions

 
GeneralMy vote of 4 Pin
Omar Nasri22-Dec-15 5:44
professionalOmar Nasri22-Dec-15 5:44 
GeneralRe: My vote of 4 Pin
Sibeesh Passion23-Dec-15 17:15
professionalSibeesh Passion23-Dec-15 17:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.