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.
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:
<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()
.Name("grid")
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Pageable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(model => model.Id(p => p.ProductID))
.Create(update => update.Action("Product_Create", "Grid"))
.Read(read => read.Action("Product_Read", "Grid"))
.Update(update => update.Action("Product_Update", "Grid"))
.Destroy(update => update.Action("Product_Destroy", "Grid"))
)
)
As you’ll notice in the code, we render the Kendo UI Grid through the MVC wrapper and it is strongly typed to a ViewModel. The DataSourceproperty points to the data model and has 4 setters corresponding to CRUD operations on the data, each being an MVC method on the server side that deals with JSon data from the grid – that simple. It is just as easy to configure the other properties of the grid, like sorting, paging and edit modes. The Kendo UI Grid rendered through the MVC wrappers is here to solve your toughest enterprise data display needs with ease.
Why UI for ASP.NET MVC
Hopefully you are excited about the prospect of using Kendo UI widgets within the comfort of ASP.NET MVC, but you may also have some lingering questions. I’ll try to address some common ones:
Question: Can I write code to render any Kendo UI widget through MVC wrappers?
Answer: Yes. Every Kendo UI widget can be rendered entirely through server-side markup using UI for ASP.NET MVC wrappers. If you are used to the common MVC HTML Helpers, the syntax for the Kendo UI wrappers will feel almost identical – this is by design so developers do not need to learn anything new. We’re also in tune with what’s next with ASP.NET MVC 6 and will look to leverage new features like TagHelpers where appropriate. Check out all the live demos of MVC wrappers for every Kendo UI widget
here.
Question: Does UI for ASP.NET MVC offer any framework features above and beyond the Kendo UI wrappers?
Answer: Absolutely. UI for ASP.NET MVC suite is much more than Kendo UI wrappers – it is squarely meant for MVC developers and keeps you in your comfort zone. You gain the features you expect in standard MVC web development – like data annotations, server-side MVC Model-View bindings, data connectivity/plumbing with minimal code and ViewBag usage.
Question: Can I do everything around the Kendo UI grid from the server side?
Answer: You’ll love the Kendo UI grid – it is enterprise-ready and can handle almost any data display needs, while staying highly performant. Everything that the Kendo UI grid is capable of can be hooked up via MVC server-side wrappers. The Kendo UI grid often utilizes the DataSource under the covers – something you have to hand-code in JavaScript. If you’re using MVC wrappers, much of the plumbing is already taken care of. You also get easy control/configuration over how the Kendo UI grid does paging, sorting, filtering and grouping – whether client-side or server-side. The MVC wrapper for Kendo UI grid allows you to connect to a wide variety of data sources, as well as set up easy CRUD operations.
Question: Can I use Kendo UI and UI for ASP.NET MVC wrappers interchangeably in a project?
Answer: Yes. While you can render any Kendo UI widget through the MVC wrappers, there is also nothing stopping you from using Kendo UI straight up in JavaScript. In addition to the MVC wrapper server-side DLL, just make sure to have the right Kendo UI JS/CSS references in your project and you can jump into any MVC view and write direct Kendo UI code in JavaScript. Compared to WebForms developers, MVC developers are much more used to coding ‘closer to the metal’ and being able to use MVC wrappers or Kendo UI interchangeably gives you the most flexibility.
Question: I stay in Visual Studio all day. What can UI for ASP.NET MVC do for me?
Answer: UI for ASP.NET MVC is meant for Visual Studio MVC web developers and, as such, has many IDE bells and whistles. UI for ASP.NET MVC comes pre-built with several Visual Studio project templates which help you jump-start your development with the product, using pre-built configurations. You get easy responsiveness out of the box for your MVC web application and from several Kendo UI widgets. You get a streamlined wizard-based UI to configure/upgrade your web project to the latest version of UI for ASP.NET MVC. And starting Q1 2015, you gain MVC scaffolding inside Visual Studio to easily bind your data models to typed MVC Views and CRUD operations through bound Controllers.
Conclusion
Choice and flexibility for developers is a nice thing. Consider Kendo UI and UI for ASP.NET MVC to be two sides of the same coin – it caters to either JavaScript or ASP.NET developers, and you can use them interchangeably. The end result is a polished tooling for building modern web/mobile applications that run everywhere.
Want to see what’s next in cutting-edge app development across web/mobile/desktop? Come join us for
TelerikNext in Boston.
Ed Charbeneau and I will share more love around ASP.NET 5 and all your favorite Telerik UI suites. Please feel free to use promo code
BASU for a discount off the standard price. See you in May!
