Dhananjay Kumar

I have seen the developers struggling to work with the KendoUI Web in an ASP.NET MVC application. In this post I will show you three steps required to get working with the KendoUI Web in the ASP.NET MVC application. At the end of the post we will take a look on working with the autocomplete widget.

Let us follow the steps as given below:

Step 1: Add Reference

Add the reference of KendoUI Web the project using Package Manager Console. After successful addition, you should find reference added in the Content folder and the Scripts folder.

Step 2: Bundle the required files

Open BundleConfig.cs file. In this file add two entries, one for the KendoUI Web scripts and other for Kendo UI Web CSS.

Add the script entry as follows:

bundles.Add(new ScriptBundle("~/bundles/kendoui").Include(
                 "~/Scripts/kendo/2014.1.318/kendo.web.min.js"
                ));

Next add the CSS files for KendoUI widgets. CSS for all the widgets can be bundled as follows:

    bundles.Add(new StyleBundle("~/Content/kendo/css").Include(
            "~/Content/kendo/2014.1.318/kendo.common-bootstrap.min.css",
            "~/Content/kendo/2014.1.318/kendo.bootstrap.min.css"));

Step 3: Refer the Bundles

Once bundle for the Kendo UI Web has been created, you need to add them on the layout file. That can be added as follows:

    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/kendo/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/kendoui")

By default you will find the jQuery bundle at the end of the layout file. To work with Keno UI widgets, you should move the jQuery bundle at the top of the file and as well include the bundles of KendoUI CSS and Scripts.

These are the three steps you should follow to work with KendoUI in an ASP.NET MVC 5 application.

Use KendoUI Web Widgets

Now let us see the autocomplete widget in the action. I have created controller returning JSON data as follows:

        public ActionResult Index()
        {
          
           return View();
        }

        public ActionResult GetMP()
        {
            var result = from r in _db.GetMPDetails()                      
                         select r;            
            return Json(result, JsonRequestBehavior.AllowGet);
        }

We will bind returned JSON from the GetMP() action to the autocomplete widget. On the razor view you can create autocomplete as follows:

<input id="mp" />

<script type="text/javascript">
    $(document).ready(function () {
       
        //create AutoComplete UI component
        $("#mp").kendoAutoComplete({
            dataTextField: "Name",
            filter: "startswith",
            minLength: 3,
            dataSource: {
                
                transport: {
                    read: "/Mpsearch/GetMP",
                    type:"json"
                }
            }
        });

    })
</script>

Make sure the View is using the layout file in which you added reference of the bundles.

Summary

As we seen in this post that working with Kendo UI Web widgets are as simple as following above three steps:

1. Add reference of Kendo UI Web
2. Create the bundles
3. Add bundles reference in layout page

I hope this post is useful. Happy coding.