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.
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.
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.
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.
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.
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.
Chances are you won’t have to change this option since it
selects the currently installed version by default.
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.
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.
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.
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.
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.
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.
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.
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.
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 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: