This tutorial shows how to
build an ASP.NET MVC6 project to use Ingragistic Ignite UI grid for ASP.NET
MVC.
Prerequisites
-
Visual
Studio 2015
-
Microsoft
ASP.NET and Web Tools 2015 (RC1)
Create an ASP.NET MVC 6 Web Site
- Select File => New Project
-
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
- 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

- 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
- Add the “jquery-ui” bower package in using the right-click menu on the bower folder of dependencies of the project.

- Create a folder "Infragistics" in the "WebApplication1\src\WebApplication1\wwwroot\lib" folder
-
Create a "css\structure" folder, a "css\themes\infragistics" and a "js" folder in it.
-
copy the "<INSTALL_DIR>\Infragistics\2015.2\Ignite UI\css\theme\infragistics\infragistics.theme.css" file in the “themes” folder of the project.
-
copy the "<INSTALL_DIR>\Infragistics\2015.2\Ignite UI\css\structure\infragistics.css" file in the “structure” folder of the project.
-
copy the "<INSTALL_DIR>\Infragistics\2015.2\Ignite UI\js\ js\infragistics.core.js" file in the “js” folder of the project.
-
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
- 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
- In the _Layout.cshtml” (that is used as the general template for the views) add the script reference
- Add a reference to the “jquery-ui” script installed with bower.
- 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>© 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
-
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.
- 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.
