en-USfr-FR

Using Infragistics grid control in an ASP.NET MVC 6 Web Application

This tutorial shows how to build an ASP.NET MVC6 project to use Ingragistic Ignite UI grid for ASP.NET MVC.

Prerequisites

  1. Visual Studio 2015

  2. Microsoft ASP.NET and Web Tools 2015 (RC1) 

Create an ASP.NET MVC 6 Web Site

  1. Select File => New Project

  2. Choose Templates=> Visual C# => Web => ASP.NET Web Application





If you don't want to deploy on Azure just uncheck “Host in the cloud”.


Add the appropriate project reference

  1. Add a reference to the “dnx451” Ignite UI MVC assembly which is found at this location

    <INSTALL_DIR>\Infragistics\2015.2\Ignite UI\MVC\MVC6\Bin\dnx451\Infragistics.Web.Mvc.dll



       
  2. Add a reference to the “dnxcore50” Ignite UI MVC assembly which is found at this location

    <INSTALL_DIR>\Infragistics\2015.2\Ignite UI\MVC\MVC6\Bin\dnxcore50\Infragistics.Web.Mvc.dll

  3. Add the “jquery-ui” bower package in using the right-click menu on the bower folder of dependencies of the project.

  1. Create a folder "Infragistics" in the "WebApplication1\src\WebApplication1\wwwroot\lib" folder
  2. Create a "css\structure" folder, a "css\themes\infragistics" and a "js" folder in it.
  3. copy the "<INSTALL_DIR>\Infragistics\2015.2\Ignite UI\css\theme\infragistics\infragistics.theme.css" file in the “themes” folder of the project.
  4. copy the "<INSTALL_DIR>\Infragistics\2015.2\Ignite UI\css\structure\infragistics.css" file in the “structure” folder of the project.

  5. copy the "<INSTALL_DIR>\Infragistics\2015.2\Ignite UI\js\ js\infragistics.core.js" file in the “js” folder of the project.

  6. copy the "<INSTALL_DIR>\Infragistics\2015.2\Ignite UI\js\ js\infragistics.lob.js" file in the “js” folder of the project

Add the appropriate style reference for the views

In the _Layout.cshtml” (that is used as the general template for the views) add the style reference

….

<html>

    <head>

        <meta charset="utf-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>@ViewData["Title"] - WebApplication1</title>

 

        <environment names="Development">

            <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />

            <link rel="stylesheet" href="~/css/site.css" />

            @* Ignite UI styles *@

            <link type="text/css" href="~/lib/Infragistics/css/theme/infragistics/infragistics.theme.css" rel="stylesheet" />

            <link type="text/css" href="~/lib/Infragistics/css/structure/infragistics.css" rel="stylesheet" />

       </environment>

        <environment names="Staging,Production">

            <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css"

                  asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"

                  asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />

            <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />

            @* Ignite UI  *@

            <link type="text/css" href="~/lib/Infragistics/css/theme/infragistics/infragistics.theme.css" rel="stylesheet" />

            <link type="text/css" href="~/lib/Infragistics/css/structure/infragistics.css" rel="stylesheet" />

        </environment>

…..

Add the menu command

  1. In the _Layout.cshtml” (that is used as the general template for the views) add the menu command.

....

        <div class="navbar navbar-inverse navbar-fixed-top">

            <div class="container">

                <div class="navbar-header">

                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                        <span class="sr-only">Toggle navigation</span>

                        <span class="icon-bar"></span>

                        <span class="icon-bar"></span>

                        <span class="icon-bar"></span>

                    </button>

                    <a asp-controller="Home" asp-action="Index" class="navbar-brand">WebApplication1</a>

                </div>

                <div class="navbar-collapse collapse">

                    <ul class="nav navbar-nav">

                        <li><a asp-controller="Movies" asp-action="Index">Movies</a></li>

                        <li><a asp-controller="Home" asp-action="Index">Home</a></li>

                        <li><a asp-controller="Home" asp-action="About">About</a></li>

                        <li><a asp-controller="Home" asp-action="Contact">Contact</a></li>

                    </ul>

                    @await Html.PartialAsync("_LoginPartial")

                </div>

            </div>

        </div>

….



Add the appropriate script reference for the views

  1. In the _Layout.cshtml” (that is used as the general template for the views) add the script reference
  2. Add a reference to the “jquery-ui” script installed with bower.
  3. Move the “@RenderBody()” part after the scripts command.

….

        <environment names="Development">

            <script src="~/lib/jquery/dist/jquery.js"></script>

            <script src="~/lib/jquery-ui/jquery-ui.js"></script>

            <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>

            <script src="~/js/site.js" asp-append-version="true"></script>

            @* Ignite UI js *@

            <script src="~/lib/Infragistics/js/infragistics.core.js" asp-append-version="true"></script>

            <script src="~/lib/Infragistics/js/infragistics.lob.js"></script>

        </environment>

        <environment names="Staging,Production">

            <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"

                    asp-fallback-src="~/lib/jquery/dist/jquery.min.js"

                    asp-fallback-test="window.jQuery">

            </script>

            <script src="~/lib/jquery-ui/jquery-ui.js"></script>

           <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/bootstrap.min.js"

                    asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"

                    asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">

            </script>

            <script src="~/js/site.min.js" asp-append-version="true"></script>

            @* Ignite UI js *@

            <script src="~/lib/Infragistics/js/infragistics.core.js" asp-append-version="true"></script>

            <script src="~/lib/Infragistics/js/infragistics.lob.js"></script>

        </environment>

        <div class="container body-content">

            @RenderBody()

            <hr />

            <footer>

                <p>&copy; 2016 - WebApplication1</p>

            </footer>

        </div>

 

        @RenderSection("scripts", required: false)

….



Add the model

Under the Models folder, create a class “Movie.cs” and replace its content with:



using System;

 

namespace WebApplication1.Models

  {

  public class Movie

    {

    public int ID { get; set; }

    public string Title { get; set; }

    public DateTime ReleaseDate { get; set; }

    public string Genre { get; set; }

    public decimal Price { get; set; }

    public string Rating { get; set; }

    }

  }



Add the controller

  1. Add a controler “MoviesController” in using the “right-click” menu of the “Controllers” folder, choosing “Add controller=>MVC 6 controller with views and Entity Framework”. Select Movie as model. As we only want to experience the grid we just want to build a collection of movies without use of any datacontext. Of course you will hopefully replace it with you own data and datacontext later.
  2. Replace the content of the “MoviesController.cs” with

using Microsoft.AspNet.Mvc;

using WebApplication1.Models;

using System;

using System.Collections.Generic;

using System.Linq;

 

namespace WebApplication1.Controllers

  {

  public class MoviesController : Controller

    {

    List<Movie> movies = new List<Movie>();

 

    public MoviesController(ApplicationDbContext context)

      {

      movies.Add(new Movie

        {

        Title = "When Harry Met Sally",

        ReleaseDate = DateTime.Parse("1989-1-11"),

        Genre = "Romantic Comedy",

        Rating = "G",

        Price = 7.99M

        });

 

      movies.Add(new Movie

        {

        Title = "Ghostbusters ",

        ReleaseDate = DateTime.Parse("1984-3-13"),

        Genre = "Comedy",

        Rating = "G",

        Price = 8.99M

        });

      movies.Add(new Movie

        {

        Title = "The intouchables",

        ReleaseDate = DateTime.Parse("2011-11-2"),

        Genre = "Comedy",

        Rating = "G",

        Price = 9.99M

        });

      movies.Add(new Movie

        {

        Title = "Rio Bravo",

        ReleaseDate = DateTime.Parse("1959-4-15"),

        Genre = "Western",

        Rating = "G",

        Price = 3.99M

        });

      }

 

    // GET: Movies

    public IActionResult Index()

      {

      return View(movies.ToList().AsQueryable());

      }

     }

  }

Design the View

Replace the content of the “Index.cshtml” in the “Movies” folder in Views with

@using Infragistics.Web.Mvc

@model System.Linq.IQueryable<WebApplication1.Models.Movie>

 

<h2>Movies with Ingragistics Grid</h2>

 

@(Html.Infragistics()

      .Grid(Model)

      .DataBind()

      .Render())



Run

Run the Web application in your browser and enjoy.