UI for ASP.NET MVC

Get Up & Running with Telerik UI for ASP.NET MVC Project Templates

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

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:

UI for ASP.NET MVC Controls

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:

Visual Studio New Project Dialog

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:

UI for ASP.NET MVC 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.

UI for ASP.NET MVC -  Standard Project Type

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:

UI for ASP.NET MVC - Grid & Menu Project Type

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.

UI for ASP.NET MVC - Mobile with Ajax Navigation

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s