Telerik Web UI products now support VS 2015 RTM

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

global.json

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:


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.


​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.


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:

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

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

publicvoidConfigureServices(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>

    <linkrel="stylesheet"href="~/kendo-ui/styles/kendo.common-material.min.css"/>

    <linkrel="stylesheet"href="~/kendo-ui/styles/kendo.rtl.css"/>

    <linkrel="stylesheet"href="~/kendo-ui/styles/kendo.material.min.css"/>

   

    <scriptsrc="~/kendo-ui/js/jquery.min.js"></script>

    <scriptsrc="~/kendo-ui/js/kendo.all.min.js"></script>

    <scriptsrc="~/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("<inputid='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


And finally, we create a Models folder and add OrderViewModel class to it which contains the model skeleton for the grid structure:



OrderViewModel.cs

usingSystem;

usingSystem.Collections.Generic;

usingSystem.ComponentModel.DataAnnotations;

usingSystem.Linq;

usingSystem.Threading.Tasks;

  

namespaceTelerikWebApplicationMVC6.Models

{

    publicclassOrderViewModel

    {

        publicintOrderID

        {

            get;

            set;

        }

  

        publicstringCustomerID { get; set; }

  

        publicstringContactName

        {

            get;

            set;

        }

  

        publicdecimal? Freight

        {

            get;

            set;

        }

  

        publicstringShipAddress

        {

            get;

            set;

        }

  

        [Required]

        publicDateTime? OrderDate

        {

            get;

            set;

        }

  

        publicDateTime? ShippedDate

        {

            get;

            set;

        }

  

        publicstringShipCountry

        {

            get;

            set;

        }

  

        publicstringShipCity

        {

            get;

            set;

        }

  

        publicstringShipName

        {

            get;

            set;

        }

  

        publicint? 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'll cover this topic in a separate post. Please stay tuned for it as it'll be published ​on our blogs soon.