Ticket T939883
Visible to All Users
Duplicate

Blazor - How to show a fully custom non-XAF web page (with custom controls, JavaScript, Razor components, etc.)

created 4 years ago (modified 4 years ago)

Hello DevExpress support team,
I want to know how to make a custom form in XAF blazor server.

I made it in XAF web, but I cannot find any information for this.

is it JavaScript only or normal blazor form?

Thanks,

Answers approved by DevExpress Support

created 4 years ago (modified 7 months ago)

v23.2+

In v23.2 and later, the code of the WelcomeComponent class below requires additional modifications due to the following breaking change: Blazor - A new ComponentModel property in IComponentAdapter classes is required for custom Property Editors.

Please refer to the following ticket for the modified code sample: Re: Blazor - How to show a fully custom non-XAF web page (with custom controls, JavaScript, Razor components, etc.).


v23.1-

Hi Heunggi,

XAF allows you to display a custom page in multiple ways.

Show a Razor Component in the View area

Use this solution to show a custom page inside an XAF Blazor application's main window template, preserving its navigation panel, title, user menu, etc.

Clipboard-File-5.png

  1. Implement a Razor Component with the required markup: ASP.NET Core Razor components.
  2. Implement a custom View Item that renders this component inside a View: Use a Custom View Item to Add a Button to a Detail View'.
  3. Create a DashboardView with this View Item: Display Multiple Views Side-by-Side (Dashboard View).

If your Razor Component does not have business logic, you can simplify the second step using ControlViewItem: Create a Custom Control Detail Item. In this case, it will be sufficient to implement an IComponentAdapter that renders your Razor Component. Here is an example:

WelcomeComponent.razor

Razor
<h3>Welcome to @Title!</h3> @code { [Parameter] public string Title { get; set; } }

WelcomeComponentAdapter.cs

C#
using DevExpress.ExpressApp; using DevExpress.ExpressApp.Blazor.Editors.Adapters; using DevExpress.ExpressApp.Editors; using Microsoft.AspNetCore.Components; namespace RazorPageInsideMainWindow.Blazor.Server.Components { public class WelcomeComponentAdapter : IComponentAdapter, IComplexControl { private XafApplication application; private RenderFragment component; public RenderFragment ComponentContent { get { if (component == null) { component = builder => { builder.OpenComponent<WelcomeComponent>(0); builder.AddAttribute(1, nameof(WelcomeComponent.Title), application.Title); builder.CloseComponent(); }; } return component; } } public void Refresh() { } public void Setup(IObjectSpace objectSpace, XafApplication application) { this.application = application; } public object GetValue() { return null; } public void SetValue(object value) { } public event EventHandler ValueChanged; } }

Then, create a DashboardView with a ControlDetailItem and specify the adapter's full name in the ControlDetailItem's TargetTypeName property:
Clipboard-File-2.png

I attached a complete example that demonstrates this solution. See more examples at Frequently Asked Questions - Blazor UI (FAQ) > Integrate Custom UI Components.

To hide the DashboardView's toolbar items, use one of the following solutions:

  1. Add the OrganizeDashboard and Refresh actions to the dashboard's HiddenActions model node.
  2. Implement a ViewController that targets this DashboardView and deactivates all actions: Hide or Disable an Action (Button, Menu Item) in Code.
  3. Add a CSS rule that hides the main toolbar element to your Razor Component:
    CSS
    .main-toolbar { display:none; }

Show a standalone Razor Page

If you want to display a regular page instead of XAF pages, follow these steps:

  1. Add a new Razor page to your Blazor application (YourSolutionName.Blazor.Server) - e.g., Pages\Public.cshtml:

    Razor
    @page @model YourSolutionName.Blazor.Server.Pages.PublicModel <h1>Works!!!</h1>

    After this, it will be possible to open this page by the following URL: https://localhost:44318/Public.

  2. To navigate to this page when an action is executed, use the standard NavigationManager service. See an example for XAF at How to provide a file download inside an action in XAF Blazor UI.

To display a Razor component, follow the steps below:

  1. Add a Razor component to your Blazor application (YourSolutionName.Blazor.Server) - e.g., Pages\MyComponent.razor:
    Razor
    @page "/PublicComponent" <h3>MyComponent</h3>
  2. Modify the App.razor file to include components from your application assembly into the Blazor routing as described at Route to components from multiple assemblies.
    Razor
    @using Microsoft.AspNetCore.Components.Routing @using Microsoft.AspNetCore.Components <Router AppAssembly="typeof(DevExpress.ExpressApp.Blazor.BlazorApplication).Assembly" AdditionalAssemblies="new[] { typeof(Program).Assembly }"> <Found Context="routeData"> <RouteView RouteData="@routeData" /> </Found> <NotFound> <LayoutView> <p>Sorry, there's nothing at this address.</p> </LayoutView> </NotFound> </Router>
    Comments (2)
    YD YD
    Yartik Dhameliya 4 years ago

      Hello,
      I am using IJSInterop to redirect new browser tab.
      This below App.razor is customized as you shown in above response which is working as expected.

      Razor
      <Router AdditionalAssemblies="new[] {typeof(Program).Assembly}" AppAssembly="typeof(DevExpress.ExpressApp.Blazor.BlazorApplication).Assembly"> <Found Context="routeData"> <RouteView RouteData="@routeData" /> </Found> <NotFound> <LayoutView> <p>Sorry, there's nothing at this address.</p> </LayoutView> </NotFound> </Router>

      And for this by default App.razor page I am getting Page not found error(MessageOption).

      Razor
      <Router AppAssembly="@typeof(Program).Assembly" AdditionalAssemblies="new[] { typeof(DevExpress.ExpressApp.Blazor.BlazorApplication).Assembly }"> <Found Context="routeData"> <RouteView RouteData="@routeData" /> </Found> <NotFound> <LayoutView> <p>Sorry, there's nothing at this address.</p> </LayoutView> </NotFound> </Router>

      Can you clarify, if this modification in App.razor page generates any side effects or not?

      DevExpress Support Team 4 years ago

        Hello,

        I created a separate ticket on your behalf: T1019273: Blazor - A "Page not found" error occurs on an attempt to render a custom non-XAF web form. We placed it in our processing queue and will process it shortly.

        Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

        Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.