Back in April I started a series of posts related to using Kendo UI in ASP.NET MVC.  Last month the Kendo team released the first beta of Kendo UI for ASP.NET MVC.  So, long story short the blog posts on Kendo UI will continue but from this point forward they will move from implementing Kendo UI proper in ASP.NET MVC to using Kendo UI for ASP.NET MVC.

Kendo UI for ASP.NET MVC includes the complete Kendo UI suite (Web, Mobile, DataViz) plus a set .NET wrappers to be used with ASP.NET MVC that leverage exciting features of MVC such as data annotations, editor/display templates and validation.  Those of you still using the WebForms view engine are safe,  the wrappers work in both the Razor view engine and the WebForms view engine.

To get started download the Kendo UI for ASP.NET MVC bits and install them.  The bits include, what I would call, the Kendo UI core features plus all the ASP.NET MVC specific features so there is no need install both Kendo UI and Kendo UI for ASP.NET MVC.  If you already have Kendo UI core installed, don’t worry, the installer will adjust accordingly.

Once installed pull up the install location, for me it is “C:\Program Files (x86)\Telerik\Kendo UI for ASP.NET MVC Q2 2012 BETA”, and play around with the example projects by running “\Examples\StartExamples.exe”.

Now…let’s get it up and running in an ASP.NET MVC project.

NOTE: The Kendo UI for ASP.NET MVC documentation states that both MVC 3 and MVC 4 are supported even though the actual Kendo.MVC.dll resides in the “Mvc3” directory.

1. Create a new ASP.NET MVC 3 or 4 project
2. Add a reference to: [Kendo UI Directory]\Binaries\Mvc3\Kendo.Mvc.dll
3. Copy the contents of [Kendo UI Directory]\Scripts to the Scripts folder of your MVC project
4. Copy the contents of [Kendo UI Directory]\Content to the Content folder of your MVC project
5. Reference the Kendo UI scripts and and CSS files in your layout page.
   *Note: If your using ASP.NET MVC 4 I suggest creating a bundler package
   
   

   <link rel="stylesheet" href="@Url.Content("~/Content/kendo.common.min.css")">

   <link rel="stylesheet" href="@Url.Content("~/Content/kendo.default.min.css")">

   <script src="@Url.Content("~/Scripts/jquery.min.js")"></script>

   <script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script>

   <script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>

6. Add a reference to the Kendu.Mvc.UI namespace to the <namespaces> section of the web.config to allow your views to know about the Kendo HTML Helper extensions.

   <add namespace="Kendo.Mvc.UI"/>

7. Let’s test it out.  Open up Index.cshtml and create a Kendo UI control using the new HTML Helpers.
   

   @(Html.Kendo().DatePicker().Name("MyTestDatePicker"))

As with the previous parts of the series the code is available on GitHub.