I Downloaded UI for ASP.NET MVC. Now What?

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.

Getting More Information

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.