Using Extensions in Razor Views

  • 4 min to read

This document covers the main aspects of using DevExpress ASP.NET MVC extensions in Razor Views.

You can declare DevExpress extensions within View pages by using either expression syntax (@ or @()) or code block syntax (@{}). Refer to the Introduction to ASP.NET Web Programming Using the Razor Syntax article to learn more about Razor syntax specifics. The main declaration rules include the following:

  • If expression syntax is used, call the extension's ExtensionBase.GetHtml method at the end of an extension declaration.

    View Code:

    @Html.DevExpress().TextBox(settings => {
        settings.Name = "myTextBox1";
    }).GetHtml()
    
  • If code block syntax is used, call the extension's ExtensionBase.Render method at the end of an extension declaration.

    View Code:

    @{Html.DevExpress().TextBox(settings => {settings.Name = "myTextBox2";}).Render();}
    

Different usage cases that relate to the DevExpress extension declaration are listed below.

In View Pages (Without Nesting)

The following declaration types are in effect when you place a DevExpress extension at the top level of a view or a partial view (not nested within the templates of other extensions).

  • Expression syntax

    View Code:

    @Html.DevExpress().PageControl(settings => {
        settings.Name = "myPageControl";
        ...
        }).GetHtml()
    
  • Code block syntax

    View Code:

    @{Html.DevExpress().PageControl(settings => {
        settings.Name = "myPageControl";
        ...
        }).Render();}
    

In Razor Page Sections

If a DevExpress extension is used within a View's named section that is referred to from a layout page (via the RenderSection method, e.g., @RenderSection("NavBarSection")), you can define the section in the following manner.

  • Expression syntax

    View Section Code:

    @section NavBarSection {
    
    @Html.DevExpress().NavBar(settings => {
        settings.Name = "myNavBar";
        ...
        }).GetHtml()
    }
    
  • Code block syntax

    View Section Code:

    @section NavBarSection {
    
    @{Html.DevExpress().NavBar(settings => {
        settings.Name = "myNavBar";
        ...
        }).Render();}
    }
    

Referring to Partial Views

When a DevExpress extension is defined in a separate partial view (for instance, when the extension works in a callback mode), you can refer to this partial view as demonstrated below.

  • Expression syntax

    View Code:

    @Html.Partial("PageControlPartial")
    
  • Code block syntax

    View Code:

    @{ Html.RenderPartial("PageControlPartial"); }
    

Defining Extension Settings

Syntactically, when calling the DevExpress HTML helper method within a View, an extension's settings can be defined in the following two ways.

  • Using a Settings Delegate within a View

    You can use a lambda expression to construct the settings tree. This approach is compact and is well suited for customizing settings directly within a View.

    View Code (Razor):

    @{
        Html.DevExpress().Menu(
            settings =>
                {
                    settings.Name = "myMenu";
                    settings.Orientation = Orientation.Vertical;
                    settings.ShowPopOutImages = DefaultBoolean.True;
                })
            .Bind(Model)
            .GetHtml();
    }
    
  • Passing a Settings Object from a Controller

    You can create and initialize a settings object within a Controller and pass this object to a View. This approach requires more coding. However, it might be helpful when it is required to pass the same settings to different Views. For instance, you might want to have a Menu with the same look, behavior and item hierarchy within more than one View.

    Controller Code:

    public ActionResult Index(){
        MenuSettings settings = new MenuSettings();
        settings.Name = "myMenu";
        settings.Orientation = Orientation.Vertical;
        settings.ShowPopOutImages = DefaultBoolean.True;
        ViewBag.MenuSettings = settings;
        return View();
    }
    

    View Code (Razor):

    @{
        Html.DevExpress().Menu(ViewBag.MenuSettings)
            .Bind(Model)
            .GetHtml();
    }
    

As the previous code illustrates, after defining settings, it might be required to bind an extension to data. For this purpose, the Bind() method of extension objects can be used. This method allows you to bind an extension to a Model (your business data objects), which is passed to a View from the Controller. See the Data Binding topic to learn more.

refer to the Extension Sheet topic for a list of currently available DevExpress Extensions for ASP.NET MVC, together with corresponding HTML helper methods, extension and settings classes, and client counterpart objects.

See Also