Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Using MVC Grid In MVC

DZone's Guide to

Using MVC Grid In MVC

Using the MVC grid, which uses bootstrap and jQuery, to create dynamic data and manipulate it.

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

In this post we will see how we can develop an MVC grid in our MVC application. 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, and once it is done we will send this data to the MVC grid. 

Download Source Code

Download the source code from here: MVC_GRID_IN_MVC.rar

Background

I have been working with Grid controls for a long time. So far I have worked with jQX Grid, jQ Grid, jQuery Datatables, Pivot tables, KO grid, and others. It is always interesting to work with some controls. Recently I worked with MVC grid so I thought to share that experience.

Create an 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, installing the MVC grid to our project. To install, please right click your solution and click on Manage NuGet packages.

Image title

Select NuGet Package

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

Image title

Install_MVC_Grid_To_Project

Once you installed, you can see a new reference file has been added (GridMVC), and you 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. Next we need to install Bootstrap in our project. For that, go to NuGet packages again and search for Bootstrap.

Image title

Install_Bootstrap_To_Project

You can see some new CSS files and scripts has been added to our project. So the set up has been done, and now we need to move on to the coding.

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.

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. 

Create Model

I have created a model class with the name Test. Here I am creating some data dynamically using a for loop and assigning those values to a list. See the code below.

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. What's next? Yes, a view.

Create a Strongly Typed View

Now we are going to create a strongly typed view.

Image title

Create_Strongly_Typed_View

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

<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.


@using GridMvc.Html

To add a MVC grid as our requirement, you need to add the codes as below:

@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

Image title


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 .

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
mvc ,bootstrap ,javascript ,jquery

Published at DZone with permission of Sibeesh Venu, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}