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.
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"
]
}
{
"projects": [ "src", "test" ],
"sdk": {
"version": "1.0.0-beta5",
"runtime": "clr",
"architecture": "x86"
}
}
"dependencies": {
"Microsoft.AspNet.Mvc": "6.0.0-beta5",
"Microsoft.AspNet.Server.IIS": "1.0.0-beta5",
"Microsoft.AspNet.Server.WebListener": "1.0.0-beta5"
},
public
void
ConfigureServices(IServiceCollection services)
{
services.AddMvc();
}
public
void
Configure(IApplicationBuilder app)
{
app.UseMvc(routes =>
{
routes.MapRoute(
name:
"default"
,
template:
"{controller=Home}/{action=Index}/{id?}"
);
});
}
"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"
},
{
"name": "BowerVS2015",
"version": "0.0.0",
"license": "MIT",
"private": true,
"dependencies": {
"kendo-ui": "https://bower.telerik.com/bower-kendo-ui.git"
}
}
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));
}
}
}
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
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.