Understanding the Options for a New Telerik ASP.NET MVC Project

After you’ve installed UI for ASP.NET MVC and you’ve had a chance to walk through and play with the demos, you’ll want to create your own project and get started writing your own code. So you go to the File menu and open the New Project dialog:



But what do you do with all these options? Do you just accept the defaults? Do you need to change anything, to support different project needs or environments? The list of checkboxes and drop-down lists can be a little overwhelming at first and it may not look like they matter, since your project will work if you just accept the defaults. But each of these options does matter, depending on the type of project you’re building and how you want the project setup.

Getting to the Project Configuration Wizard

Before I get to the options for setting up your new project, you should know how to get there. There are actually 2 different ways to start, but they both end up at the same place.

File > New > Project

You can use the “File” / “New” menu to open the New Project dialog.

Once in here, you can drill down to the Telerik menu under the project templates. This gives you the choice of a C# or VB project.



The Telerik Menu

The other option is to use the “Telerik” menu that the ASP.NET MVC helpers installed in to Visual Studio.

This menu option is really just a shortcut to take you in to the new project dialog that Visual Studio provides, with the Telerik templates options already open.

Your First Project

After you’ve selected your language for the new project, you’ll be taken to the Project Configuration Wizard screen.

If this is your first project and you are just experimenting, you may want to just accept the defaults by clicking the “Next” button.

The second part of the wizard gives you the option to include the Telerik DataAccess ORM which I won’t be covering here.

You can safely ignore this if you don’t have DataAccess installed, or don’t want to use it. Click the “Finish” button and your project will be generated from the template.

The Default Template Results

After generating the project, run it and you will see the standard ASP.NET MVC project template with one small change: the addition of an Kendo UI PanelBar on the homepage, telling you a bit about ASP.NET MVC in the center of the page.  Telerik UI for ASP.NET MVC is powered by Kendo UI, so you have access via Razor to any Kendo UI component.  Additionally the script and css references that it uses reflect it's use of Kendo UI.

You can view the project source and see the panel bar configuration in the “Views” / “Home” folder, and the index.cshtml file.

The Project Configuration Wizard Options

There’s a lot to look at with just the default project template applied. But before you get to the project, files and folders, you need to understand each of the options in the configuration wizard and how they affect the project.

The first field in the Project Configuration Wizard allows you to specify the version of UI for ASP.NET MVC that you want to use. 

Chances are you won’t have to change this option since it selects the currently installed version by default.

Add Referenced Assemblies To Solution

The next option allows you to copy all of the referenced assemblies for the extensions, in to your solution.

With this option checked, your solution will contain a copy of all the .dll files for the helpers and the Visual Studio project files will reference those copies. When this option is not checked, the references will work from the Global Assembly Cache.

If you are deploying to a server that does not have the helpers installed on them directly, you will want to check this box. This will let you deploy to any server that can run your app, and have all the files needed right there in your solution.

Target ASP.NET MVC Version

This option is fairly self explanatory.

Pick the version of ASP.NET MVC that you wish to target. The project wizard will reference that version of ASP.NET MVC, creating the appropriate files and default website layout and content.

View Engine

The View Engine option allows you to specify whether you want to use the older WebForms views or the newer Razor views with your project.

Your choice here will change the web.config settings to match the view engine selected, and also change the file and folder layout. You will not have controllers with WebForms, but will instead have code-behind.

Theme

The theme gives you a drop-list with all of the available Telerik ASP.NET MVC themes; it allows you to specify which one should be used by default.

Note that this does not change the theme of the ASP.NET MVC project. It only changes the Kendo UI theme. For example, selecting “default” vs “bootstrap” produces these differences in the panel bar of the homepage:

If you want to change the ASP.NET MVC theme, you will have to modify the HTML and CSS of the relevant files for that.

Copy Editor Templates

This option will copy predefined editor templates to your project in the ~/Views/Shared/EditorTemplates folder.

The editor templates are used with the @Html.EditorFor calls in your Razor files. Each of the editor templates is matched up to a specific type of input, which can either be inferred from the data type or specified as an option.

  <!-- infer the editor type from the data type -->
  @Html.EditorFor(model => model.MyValue)

  <!-- explicitly set the editor type -->
  @Html.EditorFor(model => model.AnotherValue, "DateTime")

When you include the editor templates (which I highly recommend doing), you will get easy and consistent Kendo UI controls in your pages by using the EditorFor method. You can customize the editor templates to your needs of course, but the basic templates provide the Kendo UI controls that you will want on your pages.

Check out Burke Holland’s post on the editor templates for more information on how to use them, and how to customize them.

Use CDN Support

The Kendo UI CDN - Content Delivery Network - makes it possible to distribute the Kendo UI JavaScript and CSS files to your users, from a server that is geographically near them. This can result in faster delivery of the files, making the page appear to load faster.

When you enable this, the <script> and <link> tags for Kendo UI’s JavaScript and CSS will no longer point to your project. Instead, they will point to the Kendo UI CDN.

Without the CDN:

With the CDN:

If you’re developing a website that is publically available, and have a user base around the world, then the CDN option is a good choice for delivering the Kendo UI scripts and CSS files. If you’re building an internal app, though, you may get better performance without the use of the CDN. Delivering content from a local network also allows more control of security and other aspects of the the application as well.

Also notice the next option, “Copy Global Resources”, is disabled when you have the “Use CDN Support” checked. This is because the CDN versions of the scripts include the globalization resources.

Copy Global Resources

This option copies the globalization / localization resources to your project, allowing multiple languages to be used.

When you select this option, files will be copied to the ~/Scripts/kendo/{version}/cultures folder in your project.

For more information on how to use the globalization resources, see the globalization help topic in the Kendo UI documentation.

Render Right-To-Left

Rendering Right-To-Left with Kendo UI is an option for RTL language support.

Select this option if you are developing a website that will show an RTL language. You may want to include the globalization resources (see the previous option), to get the language specific labels and other settings for RTL languages.

Add Test Project

The final option in the wizard will add an MSTest project to the solution.

The test project will have an empty test suite added to it, with a generic “UnitTest1” class and “TestMethod1” sitting in the suite.

using System;
using Microsoft.VisualStudio.TestTools.UnitTesting;

namespace KendoUIMvcApplication9Tests
{
  [TestClass]
  public class UnitTest1
  {
    [TestMethod]
    public void TestMethod1()
    {
    }
  }
}

If you’re not going to write any unit tests for your project, you won’t need this option selected. But why wouldn’t you write unit tests for your project? :)

That’s A Lot Of Options!

That certainly is a lot of options… but that’s one of the things that makes the MVC helpers so valuable! We’ve listened to you, dear developer, and we’ve added the core set of options that you need to support the varying and complex project types in your work place.

With this information in hand you should be able to navigate wizard’s choices and create a near-perfect solution in a matter of minutes instead of spending hours manually configuring everythiing.

If you need more information about Telerik ASP.NET MVC extensions, check out these additional resources:

• I Downloaded UI for ASP.NET MVC. Now What?
• Getting Started With UI for ASP.NET MVC (help article)
• Tutorials for UI for ASP.NET MVC