Kendo Ui Tutorial Mvc For Beginners

In this blog post i will take a look at how to use Kendo UI Core (a HTML5 based JavaScript UI framework) in ASP.Kisa 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 bertamadun 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.Sauk-sauk 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 .Jala Core (new runtime) or on the full .NET framework. ou can develop and run your ASP.NET Core apps cross-podium 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.Serok MVC Core

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

Fig 1. Bower Package Search

With ASP.Seser Core projects, Microsoft is providing access to bower packages right within the Optis Sanggar 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.Pukat 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 Okuler Studio 2022. Select
    File > New > Project. In the
    New Project
    dialog select
    .Jala Core > ASP.NET Core Web Application
    template. Provide a name for your project and click
    OK.

Fig 2. Bower Package Search

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

Fig 3. ASP.Net Core Web Application Template

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

Fig 4. Bower Package Search

  • 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 Bengkel seni will go ahead and install the project dependencies. Here is the bower.json entries:

{
“name”:

asp.bantau
,
“private”:
true,
“dependencies”: {
“bootstrap”:

3.3.6
,
“jquery”:

2.2.0
,
“jquery-validation”:

1.14.0
,
“jquery-validation-unobtrusive”:

3.2.6
,
“kendo-ui-core”:

2016.2.812
}
}
  • 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.

Fig 5. Kendo UI Core Installed

Using Kendo UI Core:

Kendo UI Core is all about 2 things. Kendo UI Core depends on its Stylesheets & JavaScript files. In pesanan 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:

<environment
names=
Development
>
<script
src=
~/lib/jquery/dist/jquery.js
></script>
<script
src=
~/lib/bootstrap/dist/js/bootstrap.js
></script>
<script
src=
~/js/site.js

asp-append-version=
true
></script>
<script
src=
~/lib/kendo-ui-core/js/kendo.ui.core.min.js
></script>
</environment>
<environment
names=
Staging,Production
>
<script
src=
https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js
asp-fallback-src=
~/lib/jquery/dist/jquery.min.js
asp-fallback-test=
window.jQuery
>

</script>
<script
src=
https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js
asp-fallback-src=
~/lib/bootstrap/dist/js/bootstrap.min.js
asp-fallback-test=
window.jQuery && window.jQuery.fn && window.jQuery.fn.modal
>

</script>
<script
src=
~/js/site.min.js

asp-append-version=
true
></script>
<script
src=
~/lib/kendo-ui-core/js/kendo.ui.core.min.js
></script>
</environment>
  • 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:

@section
scripts{
<script>

$(document).ready(function
() {

$(
#kDatePicker
).kendoDatePicker();

})

</script>
}
  • 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:

Fig 6. Kendo UI Date Picker

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.

Source: https://telerikhelper.net/2016/08/16/how-to-use-kendo-ui-core-in-asp-net-mvc-core/