Developers always want to follow the latest technologies. Microsoft announced in June ASP.Net MVC 4 RC. Perhaps many of you are asking: how new versions of ASP.Net MVC work with existing components. This blog is a quick review how you can use Infragistics jQuery controls with MVC 4.
The latest NetAdvantage for jQuery Vol. 12.1 includes many new exciting components and many feature enhancements to existing controls. You could find a detailed information about the existing controls in the Infragistics jQuery blogs.
One of the advantages to using nice client components as those in NetAdvantage for jQuery is the ability to create quickly beautiful dashboards in your WEB applications using pre-defined styles and themes. ASP.Net MVC 4 offers better UI and possibility to easily create applications in Metro Style.
Before to start:
You need to install ASP.Net MVC 4 RC and NetAdvantage for jQuery Vol. 12.1. This demo is created with Visual Studio 2010Sp1. It is possible to create the project to create a similar manner and with Visual Studio 2012 RC
Scripts and styles references
In ASP.Net MVC4 you could place Infragistics css and js files in the same place like in ASP.Net MVC 3 projects.
Infragistics recommends :
- styles to be placed under /Content/Infragistics folder
You can use another location and change the path to your files
ASP.Net MVC4 – Bundling
What means Bundling: this is the process of combining all of your disparate js and css files into one file (one for js and one for css).
When you create a new ASP.NET MVC 4 application, you will find this code in the Application_Start() event in the Global.asax:
You could configure your bundle using BundleConfig,cs
The code below demonstrates you you could add to your bundle Infragistics script loader.
If you prefer to add script and styles references without bundling it is possible to use the script and styles references in the same way like in ASP.Net MVC 3. If you refer styles and scripts you need to know that the reference path starts from the site root – not from the current document location:
- /Scripts/Infragistics/js/[my resource] – MVC 4
- ../../Scripts/Infragistics/js/[my resource] – MVC 3
If you want to use MVC wrappers there is another step:
MVC wrappers reference
In ASP.Net MVC 4 it is possible to use libraries, build against MVC 3. You can add reference to:
[NetAdvantage for jQuery install path]\MVC\MVC3\Bin\Infragistics.Web.Mvc.dll
The sample application is an ASP.Net MVC 4 Application, that uses Northwind sample database via Entity Framework. In the sample are used Infragistics jQuery Grid, Chart and Map (igGrid, igDataChart and igMap).
Application has views with dashboards about Northwind customers:
- MVC dashboard (uses Infragistics MVC library)
Using Infragistics jQuery controls.
You could see below the HTML, which defines the view layout
Application start page
No worries! Everything works. Dashboard presents Northwind customers. When you select a specific customer from the grid you could see customer orders in the chart and his country (you will see a pushpin, that shows the county on the map).
Creating a dashboard using MVC Wrappers
The next step is to see how MVC libraries, built against MVC 3 work in ASP.Net MVC.4 projects. Infragistics.Web.Mvc library contains MVC wrappers of the Infragistics jQuery components. The whole logic is related with the application UI and you could use it without any issues in MVC 4 applications.
MVC Dashboard view demonstrates how you could use MVC wrappers.
The layout should be created like MVC 3 view layout with Razor – no changes!
When you are using live events there also no changes.
Congratulations! You have a real MVC 4 dashboard with the Infragistics jQuery controls.
If you want to move forward and start using ASP.Net MVC 4 you could use all your jQuery stuff and it’s MVC 3 wrappers.