Telerik blogs

Cutting edge meets Razor

by Atanas Korchev
August 04, 2010 Web 0 Comments


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.

Extensions
About the Author

Atanas Korchev

 is Team Leader in Kendo UI Team

Comments

Comments are disabled in preview mode.