Cutting edge meets Razor

by ASP.NET MVC Team | Comments 4

Last month Scott Guthrie announced a new ASP.NET View Engine called Razor. Then Microsoft released the beta of a new product called WebMatrix which was utilizing it. It also employed a new web framework called ASP.NET Web Pages. Then yours truly made a few attempts to use Telerik Extensions for ASP.NET MVC in a WebMatrix page. The end result was promising. I waited for official Razor support in ASP.NET MVC 3. Then Scott “Almighty” Guthrie announced the first preview of ASP.NET MVC 3 which includes Razor support.This week I started to see how to improve Telerik’s Razor story… This blog post shows the end result.

 

Telerik Extensions for ASP.NET MVC now support the Razor view engine as well as ASP.NET MVC 3 Preview 1. To play with Razor you can use the sample build attached to the blog post. If you plan to use ASP.NET MVC 3 with the older WebForms view engine you can use the current official version for ASP.NET MVC 2. It should work flawlessly.

Using Telerik Extensions for ASP.NET MVC in a Razor view page (.cshtml)

Follow these steps:

  1. Use the build attached to the blog post. DISCLAIMER: This build is for testing purposes only. Official Razor support will be added as part of the upcoming Q2 2010 release. So be warned :)
  2. Create a new Razor view (.cshtml)
  3. Import the Telerik.Web.Mvc.UI namespace: 
    @using Telerik.Web.Mvc.UI
  4. Add a StyleSheetRegistrar in the <head> tag of the view 
    @Html.Telerik().StyleSheetRegistrar().DefaultGroup(g => g.Add("telerik.common.css").Add("telerik.vista.css"))
  5. Add some Telerik UI component: 
    @Html.Telerik().PanelBar().Name("PanelBar").Items(items =>
    {
        items.Add()
             .Text("Razor Inline Template")
             .Content(@<strong>Hello World from Razor!!!</strong>)
             .Expanded(true);
    })
    All components that support templates now can utilize Razor’s inline templates. However there is one important limitation – the @Html.Something() syntax works only with single line statements (the items => { /*code*/ } block does not count as it is part of a single line statement). To use a multiline statement you should use parenthesis: 
    @(Html.Telerik()
          .PanelBar()
          .Name("PanelBar")
    )
    Using parenthesis has a limitation too – the Razor parser cannot see inline templates in this case. Fortunately this would be fixed in a future Razor release.
  6. Add a ScriptRegistrar at the end of your page 
    @Html.Telerik().ScriptRegistrar()
     
And that’s all!
As you can see working with single line statements is not very convenient and adding parenthesis may seem strange initially. Let alone you can totally forget to add them. A possible solution would be to implement a “Razor-friendly” API for component definition. It could look like the API suggested in the Razor’ blog post: http://weblogs.asp.net/blogs/scottgu/image_43366964.png. This employs C# 4’s optional parameters. Still we have not decided what to do with this regards and that’s where you can chime in! I would love to hear your feedback with regards to Razor.

,
Team Leader,
Kendo UI Team

4 Comments

mike kidder
Excellent job on the MVC controls, they are looking great.   Look forward to the next drop of MVC3, hopefully they will have the multiple line statements supported.  I successfully tested some of the Telerik examples (firstlook on PanelBar, etc), and it certainly does make for long lines in Razor.

The optional parameters syntax is certainly compelling, but obviously forces you into the "Net 4 only" bucket.
Motmans
Good to see that Telerik is putting more energy in its ASP.NET MVC toolset.

As for the new-line problem: I would definitely take the same approach as suggested on the blog.

Keep in mind that ASP.NET MVC 3 takes a dependency on .NET 4 so the previous comment about forcing into the .NET 4 only bucket is not valid. I would therefore advise taking the way of the future and take full advantage of the optional parameters and all the bits that could ease development and cleaneness of code.
Dominik
Hi,

We want to build a new MVC Web Application like the one shown in Coolite MVC Sample at http://mvc.coolite.com/. We need also windows to be opended at application level like a desktop environment, not inside a container.We would like also to use some other controls like Splitter and Toolbar buttons.

Can something like this be done with Telerik Extensions for ASP.NET MVC using Razor?

There is some sample project using Telerik Extensions for ASP.NET MVC controls in this ways?

Thanks in advance,

Dominik.
Kyle Nunery
I think all new controls should use declarative helpers that Razor has instead of an html tag builder or string builder.  Wouldn't this make it much easier to understand the markup that a given control outputs?  What do you think?  I think the declarative helpers used by Razor can be compiled without much difficulty.

Comments

  1.    
     
    		 
    		  
       
  3. (optional, emails won't be shown on public pages)
  4. (optional)
Read more articles by ASP.NET MVC Team - or - read latest articles in Developer Tools
Bloggers Archive Tags
Product Families