Using Extensions in Razor Views

• Jun 21, 2024
• 4 minutes 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:

  C#

  @Html.DevExpress().TextBox(settings => {
      settings.Name = "myTextBox1";
  }).GetHtml()
  

  VB.NET

  @Html.DevExpress().TextBox( _
      Sub(settings)
          settings.Name = "myTextBox1"
      End Sub).GetHtml()
  

• If code block syntax is used, call the extension’s ExtensionBase.Render method at the end of an extension declaration.

  View Code:

  C#

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

  VB.NET

  @Code
      Html.DevExpress().TextBox( _
          Sub(settings)
              settings.Name = "myTextBox2"
          End Sub).Render()
  End Code
  

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

• In View Pages (Without Nesting)
• In Razor Page Sections
• Referring to Partial Views

In View Pages (Without Nesting)

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

• Expression syntax

  View Code:

  C#

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

  VB.NET

  @Html.DevExpress().PageControl( _
      Sub(settings)
          settings.Name = "myPageControl"
          ...
      End Sub).GetHtml()
  

• Code block syntax

  View Code:

  C#

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

  VB.NET

  @Code
      Html.DevExpress().PageControl( _
          Sub(settings)
              settings.Name = "myPageControl"
              ...
          End Sub).Render()
  End Code
  

In Razor Page Sections

If a DevExpress MVC 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:

  C#

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

  VB.NET

  @Section NavBarSection
  
  @Html.DevExpress().NavBar( _
      Sub(settings)
          settings.Name = "myNavBar"
          ...
      End Sub).GetHtml()
  End Section
  

• Code block syntax

  View Section Code:

  C#

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

  VB.NET

  @Section NavBarSection
  
      @Code
          Html.DevExpress().NavBar( _
              Sub(settings)
                  settings.Name = "myNavBar"
                  ...
              End Sub).Render()
      End Code
  
  End Section
  

Referring to Partial Views

When a DevExpress MVC 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:

  C#

  @Html.Partial("PageControlPartial")
  

  VB.NET

  @Html.Partial("PageControlPartial")
  

• Code block syntax

  View Code:

  C#

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

  VB.NET

  @Code
      Html.RenderPartial("PageControlPartial")
  End Code
  

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):

  C#

  @{
      Html.DevExpress().Menu(
          settings =>
              {
                  settings.Name = "myMenu";
                  settings.Orientation = Orientation.Vertical;
                  settings.ShowPopOutImages = DefaultBoolean.True;
              })
          .Bind(Model)
          .GetHtml();
  }
  

  VB.NET

  @Code
      Html.DevExpress().Menu( _
          Sub(settings)
              settings.Name = "myMenu"
              settings.Orientation = Orientation.Vertical
              settings.ShowPopOutImages = DefaultBoolean.True
          End Sub).Bind(Model).GetHtml()
  End Code
  

• 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:

  C#

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

  VB.NET

  Function Index() As ActionResult
      Dim settings As MenuSettings = New MenuSettings()
      settings.Name = "myMenu"
      settings.Orientation = Orientation.Vertical
      settings.ShowPopOutImages = DefaultBoolean.True
      ViewBag.MenuSettings = settings
      Return View()
  End Function
  

  View Code (Razor):

  C#

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

  VB.NET

  @Code
      Dim settings As MenuSettings = CType(ViewBag.MenuSettings, MenuSettings)
      Html.DevExpress().Menu(settings).Bind(Model).GetHtml()
  End Code
  

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.