As a team working on a project one of the key aspects of development is productivity. You want to get up & running with your project as fast as you can. You don’t want to spend time on some mundane things, rather you want to leapfrog your development. That’s almost every project teams #1 priority and wish. Today, in this blog post i will be talking about how our product known as “UI for ASP.NET MVC” can help you jump start your ASP.NET MVC (3 to 5) projects. Let’s get things rolling now.

About UI for ASP.NET MVC:

UI for ASP.NET MVC is one of our product suites which contains close to 70+ controls exclusively for ASP.NET MVC projects. Using UI for ASP.NET MVC you can build rich & responsive web apps for any device twice as fast you would do it with vanilla ASP.NET MVC controls (which is nothing but HTML).

Fig 1. UI for ASP.NET MVC

You will get as simple a control as Date Picker to as complex a control as Grid or Scheduler – all in one suite. These controls are HTML5 based client side UI controls which is powered by our flagship product – Kendo UI. Here is glimpse of all the controls you get with this suite:

Fig 2. UI for ASP.NET MVC Controls

You can visit the product overview page of UI for ASP.NET MVC here. We have a 30 day free trial available and i highly encourage you to download a trial edition and evaluate the suite. For the rest of the blog post i will assume that you have downloaded & installed the trial version of this product.

Installed Project Templates:

When you install UI for ASP.NET MVC product to your machine, we also install certain Visual Studio goodies along with the product. One such goodie is that of a Project Template. These are the templates you will see in the “New Project” dialog in Visual Studio. So go ahead and fire up a Visual Studio instance and select File > New Project. Here is the “New Project” dialog on my Visual Studio 2015:

Fig 3. Visual Studio New Project Dialog

In the Templates section on the left hand side – you will see Telerik as one of the nodes. Under Telerik you will find Web node. Selecting the Web node will display the list templates available for Web applications. Notice we have the following templates for ASP.NET MVC:

• Telerik C#/VB ASP.NET MVC Application
  Using this template you can create ASP.NET MVC based application with Telerik UI for ASP.NET MVC pre-configured.
• Kendo UI ASP.NET MVC 5 Application
  Using this template you can create a ASP.NET MVC based application with Telerik Kendo UI JavaScript library pre-configured.

In this blog post i will be focusing on “Telerik C# ASP.NET MVC Application” project template. Next, lets see what this project template provides in terms of speeding up our development.

Project Configuration Wizard:

First, in your Visual Studio instance, select File > New Project option. In the New Project dialog select Telerik > Web > Telerik C# ASP.NET MVC Application as the template. Give a name for your project and click OK. You will be presented with a Project Configuration Wizard. Below is a screenshot of the Project Configuration Wizard:

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

Lets go over the things presented in the wizard:

• UI for ASP.NET MVC Binary:
  Firstly, it identifies the version of UI for ASP.NET MVC installed on the machine and it will automatically reference that DLL in your project. In my case i have R2 2016 version of the product installed on my machine. The wizard defaults to that.
• Project Type:
  These are the types of ASP.NET MVC + UI for ASP.NET MVC projects you can quickly scaffold. At the moment we have the following project types available out of the box:
  • Empty
  • Standard
  • Grid & Menu
  • Mobile with Ajax Navigation
  • Mobile with Server Navigation
• ASP.NET MVC Version
  The version of ASP.NET MVC you want your project to target.
• Theme
  Kendo UI supports out of the box 15 themes. You select what Kendo UI theme you want for your project with this drop down list
• Editor Templates
  In ASP.NET MVC you can create custom editor templates for your edit screens. With this checkbox selection UI for ASP.NET MVC will copy certain Kendo UI based templates which will be used in your edit screens
• CDN Support
  Selecting this checkbox the template will use Kendo UI scripts from our CDNs instead of referencing it from your project itself.
• Global Resources:
  Copies all the global resources required by Kendo UI controls
• Render Right-to-Left
  Configures Kendo UI to be aware of Right-to-Left rendering
• Test Project
  You can ask the wizard to create a project for testing your MVC code. This will create a test project only and not the tests.

Next up lets check what each project type has to offer in terms of code.

Empty Project Type:

As the name goes – this project type will be literally empty. What the wizard does is – it adds reference to UI for ASP.NET MVC binary namely Kendo.Mvc.dll.  Also the Kendo UI Stylesheet & JavaScript files are put in right folders. There will not be any controllers or views created. This is a good starting point for your new project if you want to take control of rest of the things.

Standard Project Type:

When you select “Standard” as the project type in Project Creation Wizard you will get a standard ASP.NET MVC project we are all used to seeing so far. It will have a Home, About and Contact page. In the template apart from copying the Kendo.Mvc.dll & Kendo UI JS/Stylesheets – you will find Home/About/Contact pages created. This is a standard ASP.NET MVC template but spiced up with Kendo UI. In the home page you will see a UI for ASP.NET MVC control being placed namely PanelBar.Contact page contains an instance of Kendo UI TabStrip control.

Fig 5. UI for ASP.NET MVC – Standard Project Type

Grid & Menu Project Type:

As the name goes, when you select this project type wizard will create a project which makes use of Kendo UI Menu & Kendo UI Grid. You will have a page where a Kendo UI Menu & Kendo UI Grid is placed and Grid is loaded with some dummy data. Here is a screenshot of how this project type looks like in reality:

Fig 6. UI for ASP.NET MVC – Grid & Menu Project Type

Mobile with Ajax Navigation:

UI for Telerik ASP.NET MVC is powered by Kendo UI framework. Kendo UI contains a complete hybrid mobile framework which you can make use of to develop a mobile UI – be it in a web site of a Hybrid Mobile App. This project type creates a Mobile Web Site by making use of Kendo UI Mobile controls and the navigation is based on AJAX i.e. no complete page load when navigating between your mobile screens. Here is a screenshot of the website when viewed from a iPhone and a Android phone. Notice that the Kendo UI provides native look & feel depending on the device where the page is running.

Fig 7. UI for ASP.NET MVC – Mobile with Ajax Navigation

Mobile with Server Navigation:

This project type exactly the same as Mobile with  Ajax Navigation. But there is only one change and thats with the navigation. In this project template the navigation is a complete page reload when you navigate between the pages. Otherwise its the same UI as above.

Summary:

Being a developer from last 15 years its imperative for me to look out for productivity improvements areas and project template plays a key role in that. I hope this blog post has provided you the power of these project template which leapfrog your green field projects. If you already have our UI for ASP.NET MVC product do try out these project template. If you have not tried our UI for ASP.NET MVC you can always download a free trial of 30 days from our product site here. Do let us know your feedback/suggestion by posting a comment below.