Getting started with the Telerik UI For ASP.NET MVC can seem a little daunting. After downloading and installing the
package, there are a bunch of folders with things, there are
sample projects, there’s a demo suite that can be run from the
installer, and there are extensions installed in to Visual
Studio itself.
So where do you get started? With all of these things suddenly
dumped in your lap, you might feel a bit lost. So let me give
you a guided tour of what you just installed, and hopefully shed
some light on what each of these things are and how you can use
them to help you get started.
Launch The Demos
The demos can be launched by finding the "UI For ASP.NET MVC" program in your programs menu.
When you click finish, your computer will launch a new instance
of the ASP.NET development web server with the demo apps. After
the demo app starts up, you’ll be taken to the demo homepage:
From here you can get to the demos for the ASP.NET MVC or Kendo UI Professional. Keep in mind that Telerik UI for ASP.NET MVC is powered by Kendo UI. This means that the difference between UI for MVC and Kendo UI Professional is that UI for MVC renders the Kendo UI code for you using Razor.
Re-Launch The Demos
If you ever need to re-launch the demos, you can run the
“Demos - UI for ASP.NET MVC” from the list of installed items in your
Start menu.
If you’re using Windows 8, you might not see this shown on the
new home screen. But if you just start typing “ui” while
on the home screen, you’ll be taken to a search page and the
installed program will appear.
Click on this and the ASP.NET development server will re-start
and launch your browser, taking you back to the homepage.
Explore The Demos
Once you have the demos open, you can explore the features and
code for each widget and control in Kendo UI’s frameworks. One
of my favorites is the Color Picker’s interior designer.
Listed under the demo title of “Basic Usage”, this example is
anything but basic. It shows you how to take advantage
of not only Kendo UI’s Color Picker, but also some slick CSS
tricks to produce an amazing effect.
But perhaps more important than the visual aspects,
you will see the ASP.NET MVC code that was used to generate
functionality, right there on the screen with the demo.
<div class="demo-section">
<div id="background">
<div class="column">
<h3 class="title">Select Wall Paint</h3>
@(Html.Kendo().ColorPalette()
.Name("palette")
.Columns(4)
.TileSize(s => s.Width(34).Height(19))
.Palette(new string[] {
"#f0d0c9", "#e2a293", "#d4735e", "#65281a",
"#eddfda", "#dcc0b6", "#cba092", "#7b4b3a",
"#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
"#e1dca5", "#d0c974", "#a29a36", "#514d1b",
"#c6d9f0", "#8db3e2", "#548dd4", "#17365d"
})
.Events(events => events.Change("preview"))
)
</div>
<div class="column">
<h3 class="title">Choose Custom Color</h3>
@(Html.Kendo().ColorPicker()
.Name("picker")
.Value("#ffffff")
.Events(events => events.Select("preview"))
)
</div>
</div>
</div>
The demo pages even give you the relevant controller code
(though you will find that most controllers are simple page
renders).
Modify And Build The Demos
The easiest way to get your hands dirty with UI For MVC is to
take some existing code and modify it. See what happens when
you change a setting or remove a method call. This type of
exploratory learning is an important part of discovery and
becoming comfortable. And UI for MVC makes this
easy, as you get access to all of the source code for all of
the wrappers.
Open The Demo Projects
Another search for “ui for” in Windows 8 will reveal the
ASP.NET MVC sample web site Visual Studio project.
Open this project and you’ll have all of the code to run the
samples that you’ve been digging through. Do note that if you’re
running Visual Studio 2012, the solution will be upgraded from
VS2010 format. You can safely ignore any warnings or messages
that come up during this upgrade.
Once open, you can dig in! … Well, after you find the
files to dig in to, that is.
Find The Demo Files
If you’re not familiar with an MVC application structure that
uses the Areas feature, you might feel a little lost trying
find the demo files. Areas help you organize your code to
keep things a little more
clean than just having every single view in one giant views
folder. They can be used for more than that, as well.
To find the demo file, then, open the Areas folder.
The solution is split between “aspx” and “razor” folders, here,
giving you access to the older style of ASP.NET WebForms
(.aspx) files vs the newer Razor (.cshtml) file.
I’ve opened the index.cshtml file
for the DataViz Bubble Chart, for this example. It contains
the Kendo UI MVC Wrapper code for the “Basic Usage” Bubble
Chart demo.
Modify The Demo
In this file, I’ve
modified the entry for Microsoft by changing a few numbers
arbitrarily.
Now when I compare the original version of the bubble chart
with the modified version, I can see the effect of the change
I made:
There are a lot of settings that can be changed, and a lot of
method calls that can be added or removed, to play with the
data and see how this stuff works. This type of exploratory
learning is easily my favorite way to get to know a tool set,
and I recommend you take some time to dig around and do the
same.
Working With Data
Several of the demos also include data reading and writing.
View The Data-Driven Demos
Once you have the connection string working, run the “Basic Usage”
demo for the Grid in the Web Demos.
From here, you can see the basics of using a grid to work with
data that comes from the ASP.NET MVC server code.
Open The Controller
Once you have the demos running, you can view the controllers
and actions for the demo by opening the Controller > Web > Grid
folder in the solution explorer.
In this folder, find the “IndexController.cs” file, which is
used for the “Basic Usage” demo.
In this file, you’ll find all of the actions for each of the
things that the Basic Usage demo does. Feel free to play with
this code, modify it as you see fit, and re-run the demos to
see what your changes are doing.
Also keep in mind that the other demos have corresponding
controllers. You can play with any or all of them, through
the Web, Mobile and DataViz folders and demos, to see how each
of these demos was built.
This has been a whirlwind tour of the ASP.NET MVC Wrappers demos
and demo projects. Hopefully it has shown you at least a little
bit of light on a path to creating some interactive and
innovative applications with ASP.NET MVC and Kendo UI.
But if this hasn’t been enough for you, don’t worry - there is
plenty of information available to keep you heading down the
path. I recommend starting with the Getting Started with
ASP.NET MVC
page in the documentation. And of course, be sure to stay in
tune with this blog as we continue to explore all the great
things that you can do with Kendo UI, the ASP.NET MVC Wrappers,
and so much more.