Blogs

This Blog

Subscribe (RSS, Email)

Mehul Harry's DevExpress Blog

JavaScript, HTML 5, ASP.NET, DevExpress, ASP.NET MVC & WebForms, and News - Mehul Harry's DevExpress blog

ASP.NET MVC 3: Razor View Engine Support Added!

Update: Watch the webinar video that shows DevExpress with ASP.NET MVC 3 Razor View Engine.

I’m excited to announce that all DevExpress ASP.NET MVC Extensions support ASP.NET MVC 3 and it’s new Razor View Engine!

Feel free to use any DevExpress ASP.NET MVC Extension with the MVC 3 release.

How to use the Razor view engine with DevExpress MVC Extensions

Start using the DevExpress MVC Extensions in the Razor view engine. Let me show you how…

All you need to do is to tweak the script and style registration code for the Razor view engine:

1. Register scripts and styles

Here I’ve added the scripts and style registration statements below the HEAD tag in the Shared/_Layout.cshtml file:

@using DevExpress.Web.Mvc.UI

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>@ViewBag.Title </title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    @Html.DevExpress().GetStyleSheets(
        new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
        new StyleSheet { ExtensionSuite = ExtensionSuite.Editors },
        new StyleSheet { ExtensionSuite = ExtensionSuite.HtmlEditor },
        new StyleSheet { ExtensionSuite = ExtensionSuite.GridView }
    )
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.4.4.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script>
    @Html.DevExpress().GetScripts(
        new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
        new Script { ExtensionSuite = ExtensionSuite.HtmlEditor },
        new Script { ExtensionSuite = ExtensionSuite.GridView },
        new Script { ExtensionSuite = ExtensionSuite.Editors }
    )
</head>

<body>

Now use any DevExpress MVC extension in the view. Note: Please be sure that if you do declare the scripts and styles in the Master Page (Shared/_Layout.cshtml file) then you either derive your view from there or declare them in the new view directly.

2. Two Changes for Razor

a. To render HTML code, use the GetHtml() rather than Render() method. The following code shows how to accomplish this for the GridView extension:

@Html.DevExpress().GridView( settings => {
     ...
}).Bind(Model).GetHtml()

b. To write a string followed by a line terminator to the response, use the DevExpressHelper.WriteLineToResponse method and pass the string as its parameter. The code below shows how to customize a pager template for the GridView extension:

@Html.DevExpress().GridView( settings => {
    MVCxGridView grid = c.NamingContainer as MVCxGridView;
    ...
    settings.SetPagerBarTemplateContent(c => {
        ...
        DevExpressHelper.WriteLineToResponse("<label>of " + @grid.PageCount + "</label>");
        ...
    });
}).Bind(Model).GetHtml()

That’s it!

Online Example w/Download

Want to see an online working example that you can also download immediately and run in your local Visual Studio? Check out this Code Central example:

How to use the Razor view engine with DevExpress Extensions for ASP.NET MVC

Learn how to use Code Central here.

Project Template Coming Soon

A new Visual Studio 2010 project template will be released soon to help you create new ASP.NET MVC 3 projects for DevExpress MVC Extensions. The project template will be very similar to our current MVC project template. Track this suggestion if you want to know when the exact date it’ll be released.

You don’t need the project template to use DevExpress MVC Extensions in the Razor view engine. You can start now.

ASP.NET MVC 3

Last week, Scott Guthrie announced the release of ASP.NET MVC 3 (and some other fun bits). The third major release of ASP.NET MVC 3 brings some great features.

You can download and install ASP.NET MVC 3 here.

What is Razor?

It’s a new view engine for ASP.NET MVC:

Razor minimizes the number of characters and keystrokes required when writing a view template, and enables a fast, fluid coding workflow.

Unlike most template syntaxes, with Razor you do not need to interrupt your coding to explicitly denote the start and end of server blocks within your HTML. The Razor parser is smart enough to infer this from your code. This enables a compact and expressive syntax which is clean, fast and fun to type.  - Scott Guthrie, Microsoft

ASP.NET MVC Commitment

The ASP.NET MVC 3 support is part of our commitment to ASP.NET MVC. For 2011, we’re adding more features and extensions to the DevExpress ASP.NET MVC Extensions. Join my webinar to learn more.

 

Try the DevExpress ASP.NET MVC Extensions now with ASP.NET MVC 3, then drop me a line below with your thoughts.

Thanks!

Follow MehulHarry on Twitter

Build Your Best - Without Limits or Compromise

Try the DevExpress ASP.NET MVC Extensions online now: http://mvc.devexpress.com

Read the latest news about DevExpress ASP.NET MVC Extensions

Download a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/

Published Jan 21 2011, 02:05 PM by
Filed under:
Bookmark and Share

Comments

Alex Boston

It's good to see my fav controls are up with the new things.

January 22, 2011 2:14 PM

Mehul Harry (DevExpress)

Thanks Monzer!

January 22, 2011 5:10 PM

shashank agnihotri

DevExpress ASP.NET is very good!

January 24, 2011 2:35 AM

Mehul Harry (DevExpress)

Thanks Shashank!

January 24, 2011 2:47 AM

Mojo

Not all your customers use C# - when will you show MVC samples in vb.net?

January 26, 2011 1:00 PM

Johnny K

i am sorry they dont have vb.net sample at least not all of them

for example

mvc.devexpress.com/.../Callbacks

where is the vb.net code?

this c# mania is really annoying (its not better if not worst) but when we are talking about fast development vb is first and not the { }

i am expecting every single example to be in both languages for a professional company like your.

tnx

January 27, 2011 4:52 AM

Mojo

@Mehul ... I don't see any sample on HtmlEditor in vb.net .... but hey - that's not the first time you guys prioritize C# developers. Sadly it's enough to give me gray hair and start looking at [other slns], which is far more easy for me to implement than trying to translate from a language I don't know.

January 27, 2011 2:06 PM

Mehul Harry (DevExpress)

Mojo and Johnny K,

Yes, you're right that we don't have VB.NET on the demo site. Actually, we initially did try but had some issues with VS2008. We support MVC2 still which also works on VS2008.

We can add VB.NET code for the our demos. I've created a suggestion for you. I recommend tracking it to get updates:

Suggestion: VB.NET Demos for MVC

www.devexpress.com/.../S136377.aspx

Thanks for the feedback :)

January 27, 2011 2:33 PM

Mehul Harry (DevExpress)

Mojo,

Which demo particular demo do you need help with right away? Please email me at mharry [at] devexpress and I'll help you convert it.

Thanks.

January 27, 2011 2:34 PM

Graham Charles

Hey there!

The code segment on this page (it's inside a pre element, class "xml") is displaying weird on my browser (Chrome Dev build 10.0.642.2, Win 7) -- the ExtensionSuite property name is duplicated on every line, once in red and once in blue, almost as if they're being viewed through a source code version comparison:

E.g.:

new StyleSheet { ExtensionSuiteExtensionSuite = ...

With one "ExtensionSuite" red and the other blue. Very weird.

Anyway, you might want to look at whatever your source code formatting tool is (some javascript magic, no doubt?).

g.

January 28, 2011 1:14 AM

Mehul Harry (DevExpress)

Graham,

Thanks for the heads up. We're using a popular code display tool. While we are using a slightly older version of it, it does work fine in most browsers.

I suspect that it's the Chrome Dev Build. That's one of the reasons I switched to the stable Chrome builds. Smile

Thanks.

January 28, 2011 2:27 AM

Khyati Dixit

I am trying to do following in Razor.. but cudnt figure out how can i add those html.actionlinks in there

<%

   Html.DevExpress().GridView(

       settings =>

       {

           settings.Name = "gvEditing";

           settings.KeyFieldName = "ProductID";

           settings.CallbackRouteValues = new { Controller = "GridView", Action = "EditingPartial" };

           settings.Width = Unit.Percentage(100);

           var commandColumn = settings.Columns.Add("", "#");

           commandColumn.SetDataItemTemplateContent(c =>

           {%>

               <%= Html.ActionLink("Edit", "EditingEdit", new { ProductID = DataBinder.Eval(c.DataItem, "ProductID") })%> 

               <%= Html.ActionLink("Delete", "EditingDelete", new { ProductID = DataBinder.Eval(c.DataItem, "ProductID") },

                       new { onclick = "return confirm('Do you really want to delete this record?')" })%>

           <%});

           commandColumn.SetHeaderTemplateContent(c =>

           {%>

               <%= Html.ActionLink("New", "EditingEdit", new { ProductID = -1 })%>

           <%});

           commandColumn.Settings.AllowDragDrop = DefaultBoolean.False;

           commandColumn.Settings.AllowSort = DefaultBoolean.False;

           commandColumn.Width = 70;

           settings.Columns.Add("ProductName");

           var column = settings.Columns.Add("CategoryID", "Category", MVCxGridViewColumnType.ComboBox);

           var comboBoxProperties = column.PropertiesEdit as ComboBoxProperties;

           comboBoxProperties.DataSource = ((GridViewController)ViewContext.Controller).GetCategories();

           comboBoxProperties.TextField = "CategoryName";

           comboBoxProperties.ValueField = "CategoryID";

           comboBoxProperties.ValueType = typeof(int);

           settings.Columns.Add("QuantityPerUnit");

           settings.Columns.Add("UnitPrice").PropertiesEdit.DisplayFormatString = "c";

           settings.Columns.Add("UnitsInStock");

           settings.Columns.Add("Discontinued", MVCxGridViewColumnType.CheckBox);

           settings.ClientLayout = (s, e) =>

           {

               if(e.LayoutMode == ClientLayoutMode.Loading)

                   e.LayoutData = (string)Session["GridState"];

               else

                   Session["GridState"] = e.LayoutData;

           };

           settings.PreRender = (s, e) => {

               if(ViewData["VisibleID"] == null) return;

               ASPxGridView grid = (ASPxGridView)s;

               grid.MakeRowVisible(ViewData["VisibleID"]);

           };

       })

       .Bind(Model)

       .Render();

%>

January 28, 2011 4:37 PM

Parrish Guido

Good stuff...this post saved us some time figuring out how to use the new @ Razor syntax versus the

May 19, 2011 3:20 PM

Mehul Harry (DevExpress)

Thanks Parrish and glad it was helpful!

May 23, 2011 5:11 AM

About Mehul Harry (DevExpress)

Mehul Harry is an ASP.NET technical evangelist at Developer Express. You can reach him directly at mharry@DevExpress.com. You can also follow him on Twitter: http://twitter.com/mehulharry
LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, Silverlight, ASP.NET, WinForms, HTML5 or Windows 8, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2014 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners