Property Binding in Blazor

• Feb 27, 2023
• 2 minutes to read

The DxDashboard component supports the Razor syntax. You can configure basic options in the Razor markup:

Dashboard.razor

<DxDashboard style="height: 800px;" Endpoint="api/dashboard">
    <DxBackendOptions RequestHttpHeaders="@headers"></DxBackendOptions>
    <DxExtensions>
        <DxDataInspector AllowInspectAggregatedData="true" AllowInspectRawData="true"></DxDataInspector>
    </DxExtensions>
</DxDashboard>

@code {
    public Dictionary<string, string> headers = new Dictionary<string, string>() { { "Auth", "AuthToken123" } };
}

The component also supports two-way data binding for DashboardId and WorkingMode properties. This means you can use the @bind attribute to implement binding between a component’s property and a data field.

The code below uses the @bind-DashboardId attribute to bind the DashboardId property to a DashboardIdValue field. When the component is rendered, the property’s value comes from the bound field. When a user selects a new value in a drop-down selection component, the property’s value is updated and the corresponding dashboard is displayed.

Dashboard.razor

<select id="dashboard-selector" @bind="DashboardIdValue">
    <option value="companies">Companies</option>
    <option value="products">Products</option>
    <option value="support">Support</option>
</select>

<DxDashboard style="height: 600px" Endpoint="@endpoint" @bind-DashboardId="@DashboardIdValue">
</DxDashboard>

@code {
    string endpoint = "api/dashboard";
    public string DashboardIdValue { get; set; } = "companies";
}

The following code allows you to switch the working mode when a user clicks the button. The button text depends on the current working mode:

Dashboard.razor

<button id="workingModeSwitcher" @onclick="ChangeWorkingMode">    
    @ButtonText
</button>

<DxDashboard style="height: 800px" Endpoint="api/dashboard" @bind-WorkingMode="@workingMode">
</DxDashboard>

@code {
    WorkingMode workingMode = WorkingMode.Designer;

    public void ChangeWorkingMode() {
        workingMode = workingMode == WorkingMode.Designer ? WorkingMode.Viewer : WorkingMode.Designer;
    }

    public string ButtonText {
        get {
            string value = workingMode == WorkingMode.Designer ? "Viewer" : "Designer";
            string mode = "Switch to " + value;
            return mode;
        }
    }
}

View Example: Blazor Server View Example: Blazor WebAssembly

You can use JavaScript for additional customization. Refer to the following topic for details: JavaScript Customization.