In this blog post i will be talking about one of our products named “UI for ASP.NET MVC”. As part of the product we provide certain productivity improvement things and in this blog post i will showcase one such feature namely – Project Templates. Using Project Templates you can jump start your ASP.NET MVC project using Kendo UI. We have a specific template which helps you create Dashboard within minutes. So lets take a lap around this Dashboard Project template now.

About “UI for ASP.NET MVC”:

Telerik UI for ASP.NET MVC is a set of Server-side wrappers that allow using the Kendo UI Widgets from C# or VB.NET code. A Server-side wrapper helps you with the following:

• Configure Kendo UI Widget  via the C# or VB.NET code. For e.g. set widget value, data source etc
• Renders the HTML & JavaScript needed to initialize a Kendo UI Widget. Widget options propagate to client side via the Widget initialization script

Pictorially, in a nut shell here is how a UI for ASP.NET MVC Server-side wrapper looks like:

Fig 1. UI for ASP.NET MVC Wrapper

Dashboard Project Template:

When you install Telerik UI for ASP.NET MVC product, we install a bunch of Visual Studio Project Templates. These templates will help you in creating a new project using our product. One such project template we have is that of “Kendo UI ASP.NET MVC 5 Application” template. As part of this project template we ship a Dashboard template which creates a static dashboard page just with a few clicks. Lets see how this is done.

1. Create New Project:

Fire up a Visual Studio instance and create a new project.

• Select File > New > Project in your Visual Studio.
• In the New Project dialog select Telerik > Web in the installed templates section.
• Next select “Kendo UI ASP.NET MVC 5 Application” project template
• Give your project a name and click OK.

Fig 2. Visual Studio New Project Dialog

2. Project Configuration Wizard:

Once you have clicked on OK button in New Project dialog, a Project Configuration Wizard will be show as below:

Fig 3. UI for ASP.NET MVC Project Configuration Wizard

This wizard provides you with different project types that can be created. The types supported are:

• Empty
• Standard
• Grid & Menu
• Angular JS
• Dashboard

I have selected Dashboard as that whats we need for this exercise. Also you can select what theme your site needs to be. I have selected Material theme supported by Kendo UI. This theme is used for styling the Kendo UI widgets. If you want to create a test project – you can check the “Add Test Project” checkbox. Click Finish and the wizard will create your new Dashboard project.

Dashboard Project Template Output:

After you click Finish in the Project Configuration Wizard, Visual Studio will go ahead and create your app. The source of the project created is nothing but that of a vanilla ASP.NET MVC project. The project configuration wizard knows where to look for Kendo UI javaScript & Stylesheets and would have copied them over to your project from wherever it was installed on your machine. You can find the Stylesheets in Content > kendo folder and JavaScript in Scripts > kendo folder. Now press F5 and run the project. Here is the output of the project we just created:

Fig 4. Telerik UI for ASP.NET MVC Dashboard

As you can see, we get a beautiful dashboard with static data. Lets take a closer look at different things in this dashboard:

• On top, we have the “Stats from” and “Stats to” filter which uses our DatePicker widget
• “Team Members” section is using our ListView widget. Clicking on different member will regenerate the dashboard.
• “Quarter to Date Sales” and “Monthly Average Sales” section is using our SparkLine Data Visualization widget
• “Representative Sales Vs Total Sales” section is using our Bar Chart Data Visualization widget.
• “Orders Schedule” section is using our Scheduler widget.

We used static JSON data to create this realistic dashboard. What you get is the ready made UI if this matches your requirement and reuse it for your purpose. You can then connect to your Service, get your real time data and bind it to the different widgets on page. Creating beautiful dashboards was never so easy. I hope you do agree with me.

Summary:

With Telerik UI for ASP.NET MVC, we ship project templates which help you in jump starting your project. These project templates ship with different project types and we saw how easy it is to build a Dashboard today. If you are excited about this why not give it a try. We have 30 day trial available and you can download it here.

Do let us know if you have any suggestion/feedback in the form of comments below.

Till next time – Happy Coding !