uiformvc_header

I'm a Mac. And I'm a PC – Remember 2006 and the brilliant 'Get a Mac' ad campaign? With John Hodgman as the bumbling PC and Justin Long as the hip Mac, the odd couple entertained us thoroughly with their mannerisms and one-liners.

Fast forward to 2015 and another similar debate is raging among web developers. You are almost expected to be in one of two camps – the Enterprise developer or the Hipster developer. The enterprise developer knows the complexities of enterprise web applications, loves managed code and server-side business logic. The hipster developer loves JavaScript, swears to build most functionality client-side and can code entire applications in a simple text editor.

However, most of us don't belong entirely to either of these camps. Instead, we have understanding of the nuances around enterprise web applications, but also acknowledge the ubiquity of JavaScript. We're just want to pick the right tools for the job. In this article, we talk about treading the fine line between going all-out client-side using Kendo UI while keeping your server-side sanity as an ASP.NET web developer. I believe that there is a middle ground that allows you to stay within your comfort zone while still building cutting-edge web applications. Let's dig in!

A Tale of Two Products

The combination of two different Telerik products helps level the playing field for all types of web developers: Kendo UI and UI for ASP.NET MVC. Whether you are an enterprise ASP.NET developer, a JavaScript champion or someone in between, these web development tools are flexible and can adapt to your needs.

Kendo UI is a modern all-inclusive HTML5/JS framework - it's fast, light and complete, with 70+ jQuery-based UI widgets in one toolset. Kendo UI sports integration with AngularJS and BootStrap, as well as, support for mobile-specific controls and offline data solutions. It also includes built-in framework support for the MVVM pattern and a versatile dataSource to power your applications. Kendo UI may be the only JavaScript framework that you need to add to your web project. Much of Kendo UI is open-sourced as Kendo UI Core and completely free, but it also caters to enterprise scenarios via Kendo UI Professional. Learn what's new in Kendo UI by signing up for the upcoming release webinar.

KendoRelease_888x120

But perhaps writing straight up JavaScript is just not your thing or you have no reason to give up on the managed code comforts on the server-side – may be you already have much business logic written in C#. What you are looking for are client-side UI widgets rendered through your ASP.NET MVC framework, which is great for web development just the way it is. You want to continue writing .NET code, while not having to build your own UI widgets client-side. We hear you!

The Telerik UI for ASP.NET MVC UI suite is squarely meant for ASP.NET MVC developers like you – allowing you to leverage all the Kendo UI client-side widgets through easy MVC wrappers. You get clean HTML5 rendering from your MVC markup and can be assured that your users get a seamless user experience across any browser or device. It includes more than 70 ASP.NET MVC components powered by Kendo UI, including enterprise-ready UI controls. UI for ASP.NET MVC is not just MVC wrappers for Kendo UI though – it also includes framework pieces and Visual Studio goodies for the .NET developer. Using Kendo UI widgets via UI for ASP.NET MVC suite gives you the client-side UI functionality while having all the server-side comforts.

Show me some Code

Let's take a look at some code to render a simple Kendo UI AutoComplete widget. We'll start with the front-end code first:

 


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />

    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<body>
<label for="countries" class="info">Choose your country:</label>
<input id="countries" />
<script>
                $(document).ready(function () {
                    var data = [
                            "United Kingdom",
                            "France",
                            "Germany",
                            "Italy",
                            "Portugal",
                            "Spain",
                            "Sweden",
                            "Switzerland"
                        ];

                    // Create AutoComplete UI widget
                    $("#countries").kendoAutoComplete({
                        dataSource: data,
                        filter: "startswith",
                        placeholder: "Select country...",
                        separator: ", "
                    });
                });
            </script>
</body>
</html>

 

Notice how in the code above, we declare a JavaScript variable to hold the list of country names and then use a Kendo UI DataSource to bind the list to our AutoComplete UI widget, rendered through a jQuery-like markup. We also utilize some other properties on the Kendo AutoComplete widget like Filter, Placeholder and Separator. You can play with the code above and see impact on the rendered Kendo UI control through this live coding dojo.

Now, let's take a look at the same Kendo UI AutoComplete widget, this time rendered using the UI for ASP.NET MVC wrappers. This is the kind of code you write in your MVC Views, granted you have the requisite Telerik UI for ASP.NET MVC DLL server-side in your project:

 


<div id="shipping">    
<label for="countries" class="info">Choose your country:</label>
    
    @(Html.Kendo().AutoComplete()
          .Name("countries")
          .Filter("startswith")
          .Placeholder("Select country...")
          .BindTo(new string[] {
                "United Kingdom",
                "France",
                "Germany",
                "Italy",
                "Portugal",
                "Spain",
                "Sweden",
                "Switzerland"
          })
          .Separator(", ")
    )

 

You get the exact same result. Notice how, instead of using JavaScript, we're writing code in our MVC View directly and using the Kendo UI HTML Helpers. These helpers look identical to the other regular HTML helpers, and that is by design. The rendered AutoComplete widget is using the Kendo UI DataSource behind the scenes, except you don't need to code for it separately as in the JavaScript. With the MVC wrappers, you have the option to declare things like DataSource content inline with the control – this leads to much more readable code. Setting properties like Filter, Placeholder and Separator on the Kendo UI widget is just as easy – simple (.) delimiters should make any .NET developer comfortable.

Want to render a Kendo UI Grid bound to remote data over Ajax and support full CRUD operations? Here's the simple code through ASP.NET MVC wrappers:

 


@(Html.Kendo().Grid

Sam Basu
About the Author

Sam Basu

Sam Basu is a technologist, author, speaker, Microsoft MVP, gadget-lover and Progress Developer Advocate for Telerik products. With a long developer background, he now spends much of his time advocating modern web/mobile/cloud development platforms on Microsoft/Telerik technology stacks. His spare times call for travel, fast cars, cricket and culinary adventures with the family. You can find him on the internet.

Related Posts

Comments

Comments are disabled in preview mode.