Telerik Web UI Products Support VS 2015 and ASP.NET vNext
Learn how you can use Telerik Kendo UI, UI for ASP.NET MVC and UI for ASP.NET AJAX products in the Visual Studio 2015 RTM with .NET 4.6 and .NET 5 version
In the beginning of this week, Microsoft announced the official versions of .NET 4.6 and Visual Studio 2015 RTM, as well as the new previews of ASP.NET 5 (Full and Core runtimes), ASP.NET MVC 6 (Beta5) and Entity Framework 7. These announcements mark a major milestone for the .NET dev community, and make the evolution of the .NET framework even more exciting for developers, going beyond the Windows world with the .NET Core cross-platform runtime.
I am happy to share that our Web UI products - Kendo UI, UI for ASP.NET MVC and UI for ASP.NET AJAX - already support the new .NET versions and Previews. In this blog post I'll try to describe how you can use each of these products in Visual Studio 2015 RTM, either with .NET 4.6 and MVC 5.x, or .NET 5 and MVC 6 Beta5.
Kendo UI in Visual Studio 2015
Kendo UI is our first-class client framework for building modern, responsive and high-performing web applications with HTML, JavaScripts and CSS. It is server platform agnostic, and you can use it in any version of Visual Studio as any other javascript library. Visual Studio 2015 makes no exception from this rule, hence you can use Kendo UI in VS 2015 RTM freely now.Also have in mind that we plan additional Visual Studio integration for Kendo UI, for which you can read in our Q3 Roadmap blog post.
UI for ASP.NET MVC in VS 2015 with .NET5 and MVC6 Beta5
I am proud to say that we are the first ISV which announces preliminary support for the ASP.NET 5 and MVC 6 Beta Preview versions with our Telerik UI for ASP.NET MVC product.
To begin, fire up a Visual Studio 2015 instance, go to File > New Project and select ASP.NET Web Application project type.
You will notice that on the next screen there's a new section called ASP.NET 5 Preview Templates. For our example we'll choose the Empty project template from this section.
After Visual Studio creates the project for you, you'll recognize a few differences in Solution Explorer from what you may be used to. I won't delve into much detail on this part now, as you can learn more on this topic from this MSDN article.
The most important parts you should take into account are that there are two sets of references:
(one for the full .NET runtime, and one for the .NET Core runtime)
and that the project configuration is defined via the project.json and global.json files, as opposed to previous .NET versions.
project.json
{ "webroot": "wwwroot", "version": "1.0.0-*", "dependencies": { "Microsoft.AspNet.Server.IIS": "1.0.0-beta5", "Microsoft.AspNet.Server.WebListener": "1.0.0-beta5" }, "commands": { "web": "Microsoft.AspNet.Hosting --config hosting.ini" }, "frameworks": { "dnx451": { }, "dnxcore50": { } }, "publishExclude": [ "node_modules", "bower_components", "**.xproj", "**.user", "**.vspscc" ], "exclude": [ "wwwroot", "node_modules", "bower_components" ]}global.json
{ "projects": [ "src", "test" ], "sdk": { "version": "1.0.0-beta5", "runtime": "clr", "architecture": "x86" }}The next step to include MVC in our project is to add the Microsoft.AspNet.MVC NuGet package as a dependency for our project. For this purpose we update the project.json file as follows:
"dependencies": { "Microsoft.AspNet.Mvc": "6.0.0-beta5", "Microsoft.AspNet.Server.IIS": "1.0.0-beta5", "Microsoft.AspNet.Server.WebListener": "1.0.0-beta5"},When you save the file, Visual Studio will automatically download the new package and place it in the References folder for all your project’s target frameworks.
The next step is to instruct ASP.NET to inject MVC as a dependency using its new dependency injection framework. This should be done at app startup by adding the following line to the ConfigureServices method in Startup.cs.
public void ConfigureServices(IServiceCollection services){ services.AddMvc();}After that, we have to modify the Configure method in Startup.cs to configure MVC’s default route. Bear in mind the default controller and action are now specified in the route syntax.
public void Configure(IApplicationBuilder app){ app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); });}When completing these steps, it is time to define the controllers and views in our app. First we have to create the Controllers and Views folders in our project:
Then we add the HomeController by right-clicking on the Controllers folder and selecting Add > New Item… and the the MVC Controller Class template.
The new HomeController class comes with an Index action by default, so now we can add the View to the Views folder. First we must create a Home folder inside Views to match the controller name, then Add > New Item… and selecting the MVC View Page template.
Now that we are ready with this setup, we can include the Telerik UI for ASP.NET MVC 6 Beta NuGet package in our app using the NuGet Package Manager in Visual Studio (From Tools > NuGet Package Manager > Package Manager Console, and type Install-Package Kendo.Mvc when the console pops up)
Once we do that, the references to Telerik UI for ASP.NET MVC should appear both nodes in Solution Explorer (DNX 4.5.1 and DNX Core 5.0).
and will add it as a dependency in the project.json file:
"dependencies": { "Microsoft.AspNet.Mvc": "6.0.0-beta5", "Microsoft.AspNet.Server.IIS": "1.0.0-beta5", "Microsoft.AspNet.Server.WebListener": "1.0.0-beta5", "Kendo.Mvc": "2015.2.723"},We also need to add references to the client resources (scripts and styles) used by the Kendo UI ASP.NET MVC server helpers. This can be done by using the Bower Package Manager in Visual Studio.
Here are the steps you need to perform to accomplish that:
1) Create bower.json file in the root of your app with the following definition
bower.json
{ "name": "BowerVS2015", "version": "0.0.0", "license": "MIT", "private": true, "dependencies": { "kendo-ui": "https://bower.telerik.com/bower-kendo-ui.git" }}2) Create netrc file with your Telerik Account credentials for accessing the Kendo UI Professional distribution on telerik.com, as depicted in this help article. Note that you can access the Kendo UI Core OS version without preparing a file with credentials, if this subset of Kendo UI is sufficient for your project.
3) Once you save the bower.json file and Visual Studio processes the dependencies via Bower, the relevant resources will be added to your project inside of bower_components folder, as presented below
*for Bower setup in Visual Studio please bear in mind this current known issue
Now, in order to be able to reference the styles and scripts from the public web server, you need to copy the /kendo-ui folder (without the /src folder in it, as you don't really need it for our sample) under the wwwroot physical folder of the app, which resides in the following default location:
C:\Users\%UserName%\Documents\Visual Studio 2015\Projects\%ProjectName%\src\%ProjectName%\wwwroot
The ConfigureServices method in Startup.cs also needs to be updated to have the Kendo UI internal services exposed, i.e.:
Startup.cs
public void ConfigureServices(IServiceCollection services){ services.AddMvc(); services.AddKendo();}Now we came to the point to include the code relevant to the ASP.NET server helpers, part of our UI for ASP.NET MVC product. In our example, we'll build an interface with grid, toolbar and buttons, which will automatically adapt to different screen sizes.
To do that, we first include the following definition in our MVC view:
Index.cshtml
@using Kendo.Mvc.UI@{ ViewBag.Title = "Home Page";}<!DOCTYPE html><html><head> <link rel="stylesheet" href="~/kendo-ui/styles/kendo.common-material.min.css" /> <link rel="stylesheet" href="~/kendo-ui/styles/kendo.rtl.css" /> <link rel="stylesheet" href="~/kendo-ui/styles/kendo.material.min.css" /> <script src="~/kendo-ui/js/jquery.min.js"></script> <script src="~/kendo-ui/js/kendo.all.min.js"></script> <script src="~/kendo-ui/js/kendo.aspnetmvc.min.js"></script></head><body><div> <div> <h1>Telerik UI for ASP.NET MVC 6 Demo Page</h1> @(Html.Kendo().ToolBar() .Name("Toolbar") .Items(items => { items.Add().Type(CommandType.Button).Text("Button"); items.Add().Type(CommandType.Button).Text("Toggle Button").Togglable(true); items.Add().Type(CommandType.SplitButton).Text("Insert").MenuButtons(menuButtons => { menuButtons.Add().Text("Insert above").Icon("insert-n"); menuButtons.Add().Text("Insert between").Icon("insert-m"); menuButtons.Add().Text("Insert below").Icon("insert-s"); }); items.Add().Type(CommandType.Separator); items.Add().Template("<label>Format:</label>"); items.Add().Template("<input id='dropdown' style='width: 150px;' />").Overflow(ShowInOverflowPopup.Never); items.Add().Type(CommandType.Separator); items.Add().Type(CommandType.ButtonGroup).Buttons(buttons => { buttons.Add().Text("Left").Togglable(true).Group("text-align").SpriteCssClass("k-tool-icon k-justifyLeft"); buttons.Add().Text("Center").Togglable(true).Group("text-align").SpriteCssClass("k-tool-icon k-justifyCenter"); buttons.Add().Text("Right").Togglable(true).Group("text-align").SpriteCssClass("k-tool-icon k-justifyRight"); }); items.Add().Type(CommandType.ButtonGroup).Buttons(buttons => { buttons.Add().Text("Bold").Togglable(true).SpriteCssClass("k-tool-icon k-bold").ShowText(ShowIn.Overflow); buttons.Add().Text("Italic").Togglable(true).SpriteCssClass("k-tool-icon k-italic").ShowText(ShowIn.Overflow); buttons.Add().Text("Underline").Togglable(true).SpriteCssClass("k-tool-icon k-underline").ShowText(ShowIn.Overflow); }); items.Add().Type(CommandType.Button).Text("Action").Overflow(ShowInOverflowPopup.Always); items.Add().Type(CommandType.Button).Text("Another Action").Overflow(ShowInOverflowPopup.Always); items.Add().Type(CommandType.Button).Text("Something else here").Overflow(ShowInOverflowPopup.Always); }) ) </div></div><div> <div> <div> <h2>Lorem ipsum dolor sit amet...</h2> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <p> @(Html.Kendo() .Button() .Name("PrimaryButton") .Content("Primary Button") .HtmlAttributes(new { @class = "textButton k-primary" })) </p> </div> <div> <h2> </h2> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <p> @(Html.Kendo() .Button() .Name("TextButton") .Content("Button") .HtmlAttributes(new { @class = "textButton" })) </p> </div> <div> <h2> </h2> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <p> @(Html.Kendo() .Button() .Name("Button") .Content("Button") .HtmlAttributes(new { @class = "textButton" })) </p> </div> </div></div><div> <div> <div> @(Html.Kendo().Grid<TelerikWebApplicationMVC6.Models.OrderViewModel>() .Name("grid") .Columns(columns => { columns.Bound(p => p.OrderID).Filterable(false); columns.Bound(p => p.Freight); columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}"); columns.Bound(p => p.ShipName); columns.Bound(p => p.ShipCity); }) .Pageable() .Sortable() .Scrollable() .Filterable() .HtmlAttributes(new { style = "height:550px;" }) .DataSource(dataSource => dataSource .Ajax() .PageSize(20) .Read(read => read.Action("Orders_Read", "Grid")) ) ) </div> </div></div> </body></html>
We also create a GridController class to hold ActionResult method which will return the data to be displayed in the grid in JSON format:
GridController.cs
using System;using System.Collections.Generic;using System.Linq;using System.Threading.Tasks;using Microsoft.AspNet.Mvc;using Kendo.Mvc.UI;using TelerikWebApplicationMVC6.Models;using Kendo.Mvc.Extensions; // For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860 namespace TelerikWebApplicationMVC6.Controllers{ public partial class GridController : Controller { public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request) { var result = Enumerable.Range(0, 50).Select(i => new OrderViewModel { OrderID = i, Freight = i * 10, OrderDate = DateTime.Now.AddDays(i), ShipName = "ShipName " + i, ShipCity = "ShipCity " + i }); return Json(result.ToDataSourceResult(request)); } }}And finally, we create a Models folder and add OrderViewModel class to it which contains the model skeleton for the grid structure:
OrderViewModel.cs
using System;using System.Collections.Generic;using System.ComponentModel.DataAnnotations;using System.Linq;using System.Threading.Tasks; namespace TelerikWebApplicationMVC6.Models{ public class OrderViewModel { public int OrderID { get; set; } public string CustomerID { get; set; } public string ContactName { get; set; } public decimal? Freight { get; set; } public string ShipAddress { get; set; } [Required] public DateTime? OrderDate { get; set; } public DateTime? ShippedDate { get; set; } public string ShipCountry { get; set; } public string ShipCity { get; set; } public string ShipName { get; set; } public int? EmployeeID { get; set; } }}
When we run the app, we come up with the following screen in the browser, in which the widgets adapt to the available screen estate when resized:
and voila, you have your first Telerik UI for ASP.NET MVC 6 app up and running!
You can download the complete project which results from the steps depicted above from this link: TelerikWebApplicationMVC6
UI for ASP.NET MVC and AJAX in VS 2015 with .NET4.6 and MVC5.x
There isn't anything fundamentally new in these minor .NET 4 and MVC 5 updates, and they are supported by our current AJAX and MVC suites. We cover this topic in a separate post which you can read here.
Stefan Rahnev
Stefan Rahnev (@StDiR) is Product Manager for Telerik Kendo UI living in Sofia, Bulgaria. He has been working for the company since 2005, when he started out as a regular support officer. His next steps at Telerik took him through the positions of Technical Support Director, co-team leader in one of the ASP.NET AJAX teams and unit manager for UI for ASP.NET AJAX and Kendo UI. Stefan’s main interests are web development, agile processes planning and management, client services and psychology.