In this blog post i will take a look at how to use Kendo UI Core (a HTML5 based JavaScript UI framework) in ASP.NET MVC Core. Read on to know how to integrate Kendo UI Core with your ASP.NET MVC Core in simple steps.

What is Kendo UI Core ?

First question that may come to your mind will be “What is Kendo UI Core ?”. Well its natural to have that question. So let me try to answer this first.

Telerik Kendo UI Core is the open source version of Kendo UI – the comprehensive framework for building modern web & mobile apps with HTML5 and JavaScript. The Kendo UI Core being an open source package provides you with the following:

• Kendo UI core framework like MVVM, DataSource, Validation, Globalization etc.
• 24 jQuery-based Web widgets
• Kendo UI Mobile complete framework and Mobile Widgets

Kendo UI core is Apache V2 based license and hence you can use it in any of your projects. You can read more about Kendo UI Core here.

What is ASP.NET Core ?

Here is what the official documentation from Microsoft says about ASP.NET Core:

ASP.NET Core is a new open-source and cross-platform framework for building modern cloud based internet connected applications, such as web apps, IoT apps and mobile backends.

ASP.NET Core apps can run on .NET Core (new runtime) or on the full .NET framework. ou can develop and run your ASP.NET Core apps cross-platform on Windows, Mac and Linux. ASP.NET Core is open source at GitHub.

You can know more about ASP.NET core on the official documentation site here.

Using Kendo UI Core in ASP.NET MVC Core

Kendo UI Core is available as bower package. If you head over to https://bower.io, you can search for packages by entering “kendo-ui-core”. Here is a screen shot from the bower package search:

With ASP.NET Core projects, Microsoft is providing access to bower packages right within the Visual Studio itself. You add what is known as “bower.json” file which is nothing but a simple configuration file which tells bower what bower package we depend on. So we will be using this bower.json inside our ASP.NET Core project to pull in kendo-ui-core package. Lets get started with the action. Follow the below steps to integrate Kendo UI Core inside your ASP.NET Core projects.

Installing Kendo UI Core:

• Launch Visual Studio 2015. Select File > New > Project. In the New Project dialog select .NET Core > ASP.NET Core Web Application template. Provide a name for your project and click OK.

 

• Next, we will need to select a template. For this exercise i will be choosing Web Template. Click OK and Visual Studio will finish creating the project.

 

 

• Once the project is created, take a look at the Solution Explorer. By default the “Show all files” will be off. On the Solution Explorer, click the “Show all files” button. Now we will see “bower.json” file at the root of the project.

 

• Open bower.json. Under the dependencies section we will add Kendo UI Core as one of the project dependencies. As soon as you save the bower.json Visual Studio will go ahead and install the project dependencies. Here is the bower.json entries:

• Once visual studio has finished installing the project dependencies, you can find Kendo UI Core installed under wwwroot/lib/kendo-ui-core folder. Bower is configured by default to install the dependencies under wwwroot/lib folder.

Using Kendo UI Core:

Kendo UI Core is all about 2 things. Kendo UI Core depends on its Stylesheets & JavaScript files. In order to work with Kendo UI Core we will need to reference the necessary files in our layout file. Follow the below steps to reference Kendo UI Core:

• Open up Views > Shared > _Layout.cshtml file.
• In the head section add reference to Kendo UI Core style sheets. Since the ASP.NET Core Web Application template is based on bootstrap – i will use the Kendo UI Bootstrap template. Out of the box Kendo UI supports 15 themes. You can read more about Kendo UI styles here. Code snippet for this change is below:

• Next, we need to add reference to Kendo UI Core JavaScript files. In _Layout.cshtml, scroll all the way down where the body ends. You will see a section where other script references are added. Kendo UI Core depends on jQuery. So we will need to add Kendo UI javascript file references after jQuery. Here is the code snippet:

• Now we will see how to use a Kendo UI widget in one of our pages. Open Views > Home > Index.cshtml.   Add the following code to the end of the page:

• Next, add a scripts section in the Index.cshtml. We will use jQuery to get the input element we defined earlier. And we convert that input element to Kendo UI Date Picker with the method kendoDatePicker(). Here is the code snippet:

• Now we run the project and see the output. We will see a date picker control instantiated on the page. Here is the screenshot of the page:

Well that’s all its there to integrate Kendo UI Core with ASP.NET Core. You get to work with 24 web widgets as mentioned earlier in the blog post. You can take a look at some of our comprehensive demos we have of Kendo UI here.

Hope this blog post provides you a getting started with Kendo UI Core. Do play around and lets us know what you feel about our widgets.

Till next time – Happy Coding.