Telerik blogs

MVC 3 and the Telerik Extensions for ASP.NET MVC

by Atanas Korchev
January 20, 2011 Release 0 Comments


Last week MVC 3 RTM was released. I’ve been able to play around with the various release candidates and I have to say that I love the new changes, especially the new Razor ViewEngine. For those of you that have not been looking into the changes for MVC 3, or you are just starting to look into MVC, I wanted to first introduce the Razor ViewEngine and then show you how to use the syntax with some of our extensions for ASP.NET MVC.

First up is the Razor ViewEngine. Now a ViewEngine is essentially what takes all of the code in your view and actually interprets it and generates the proper HTML etc. on the final rendered page. One of the main benefits with Razor is that the syntax allows for far less code to be written for the same functionality. Let’s look at a quick example involving generating a simple unordered list with a few list items. First, the old WebForms code:

For-loop with MVC WebForms ViewEngine

And here is the Razor equivalent:

For-loop in Razor ViewEngine

Comparing the two code snippets above we can see that not only is Razor keeping track of where my for loop brackets begin and end, I also just need a simple “@” in order to get the local variable i. The WebForms approach requires me to start and end the "<% … %>" sections depending on code or HTML output. Even just in a small sample like this we already are saving time!

Now let’s take a look at how Razor interacts with some of our components. Overall, if you’re just using simple implementations without any templating etc. you will probably not notice too much of a difference. For example, here is a basic PanelBar using WebForms:

<% Html.Telerik().PanelBar()
        .Name("WebFormsPanelBar")
        .Items(panelItems =>
            {
                panelItems.Add()
                       .Text("Parent Item 1")
                       .Items(subItems =>
                        {
                            subItems.Add().Text("Sub Item 1");
                            subItems.Add().Text("Sub Item 2");
                        });
                panelItems.Add()
                       .Text("Parent Item 2")
                       .Items(subItems =>
                        {
                            subItems.Add().Text("Sub Item 1");
                        });
            })
        .Render();
%>

And here we have our PanelBar sytanx using Razor:

@{Html.Telerik().PanelBar()
        .Name("RazorPanelBar")
        .Items(panelItems =>
            {
                panelItems.Add()
                       .Text("Parent Item 1")
                       .Items(subItems =>
                        {
                            subItems.Add().Text("Sub Item 1");
                            subItems.Add().Text("Sub Item 2");
                        });
                panelItems.Add()
                       .Text("Parent Item 2")
                       .Items(subItems =>
                        {
                            subItems.Add().Text("Sub Item 1");
                        });
            })
        .Render();
 }

Looks similar enough and this isn’t something that really displays too much change. One thing to note is the @{ … } syntax which encompasses our PanelBar. This allows us to define the beginning and end of our component declaration.

How about using the above component, but using templates instead? Here’s the WebForms code:

<% Html.Telerik().PanelBar()
        .Name("TemplateWebFormsPanelBar")
        .Items(panelItems =>
            {
                panelItems.Add()
                       .Text("Parent Item 1")
                       .Content(() =>
                           { %>
                                 <ul>
                                     <li>List Item 1</li>
                                     <li>List Item 2</li>
                                 </ul>
                           <% });
                panelItems.Add()
                       .Text("Parent Item 2")
                       .Content(() =>
                           { %>
                                 <ul>
                                     <li>List Item 1</li>
                                     <li>List Item 2</li>
                                 </ul>
                           <% });
            })
        .Render();
  %>

And here we have the same implementation but in Razor:

@{Html.Telerik().PanelBar()
       .Name("TemplateRazorPanelBar")
       .Items(panelItems =>
           {
               panelItems.Add()
                      .Text("Parent Item 1")
                      .Content(@<text>
                                 <ul>
                                     <li>List Item 1</li>
                                     <li>List Item 2</li>
                                 </ul>
                             </text>);
               panelItems.Add()
                      .Text("Parent Item 2")
                      .Content(@<text>
                                 <ul>
                                     <li>List Item 1</li>
                                 </ul>
                             </text>);
           })
       .Render();
}

 

As you can see, here is where we differ. We no longer have to write:

.Content(() =>
{%> *Content Here*
 
<% });

We simply just write:

.Content(@<text> *Content Here* </text>);

Now @<text> is actually a tag element that is only read by Razor. This is interprets the inner content of the <text> block as content, but does not render the <text> tag element. This means that the resulting HTML will not say <text></text>. Now we could also go ahead and place code inside of the <text> area if we’d like:

panelItems.Add()
       .Text("Parent Item 1")
       .Content(@<text>
               @{Html.Telerik().Editor()
                       .Name("TemplateEditor")
                       .Render();
               }
              </text>);

And now we have a PanelBar template with another Telerik component inside of it.

So that’s just a quick example of some of the changes in MVC 3 and how to use them with the Telerik Extensions for ASP.NET MVC. Keep an eye out for upcoming blog posts covering more of MVC 3 and our ASP.NET MVC components!
ASP.NET, Extensions
About the Author

Atanas Korchev

 is Team Leader in Kendo UI Team

Comments

Comments are disabled in preview mode.