Skip to content

Latest commit

 

History

History
335 lines (261 loc) · 10.4 KB

Button.md

File metadata and controls

335 lines (261 loc) · 10.4 KB

Button

The Button component displays a push button control that allows users to trigger actions. It may seem strange that we have a Button component when there already is an HTML button and Blazor has features that enable C# interactions with that button, but we need to activate other features that were once present in Web Forms, such as OnCommand event bubbling, OnClientClick JavaScript execution, and CausesValidation support.

Original Microsoft documentation: https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.button?view=netframework-4.8

Features Supported in Blazor

  • Text - the text displayed on the button
  • OnClick - event handler triggered when button is clicked
  • OnClientClick - JavaScript code to execute on client-side click
  • OnCommand - event handler with event bubbling, receives CommandEventArgs with CommandName and CommandArgument
  • CommandName - the command name passed to OnCommand event
  • CommandArgument - the command argument passed to OnCommand event
  • CausesValidation - controls whether form validation is triggered on click (default: true)
  • ValidationGroup - specifies the validation group for which the button triggers validation
  • Enabled - enables or disables the button
  • Visible - controls button visibility
  • ToolTip - tooltip text displayed on hover
  • All style properties (BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, CssClass, Width, Height, Font)

Blazor Notes

  • The OnCommand event uses a CommandEventArgs class that contains CommandName and CommandArgument properties
  • When CommandName is set, clicking the button triggers OnCommand instead of OnClick
  • Event bubbling is supported for container components that need to handle commands from child buttons

Web Forms Features NOT Supported

  • PostBackUrl - Not supported; Blazor uses component events instead of postbacks to different pages
  • UseSubmitBehavior - Not supported; Blazor buttons trigger click events and you can inspect the form regardless
  • AccessKey - Use HTML accesskey attribute directly if needed

Web Forms Declarative Syntax

<asp:Button
    AccessKey="string"
    BackColor="color name|#dddddd"
    BorderColor="color name|#dddddd"
    BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge|
        Inset|Outset"
    BorderWidth="size"
    CausesValidation="True|False"
    CommandArgument="string"
    CommandName="string"
    CssClass="string"
    Enabled="True|False"
    EnableTheming="True|False"
    EnableViewState="True|False"
    Font-Bold="True|False"
    Font-Italic="True|False"
    Font-Names="string"
    Font-Overline="True|False"
    Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|Medium|
        Large|X-Large|XX-Large"
    Font-Strikeout="True|False"
    Font-Underline="True|False"
    ForeColor="color name|#dddddd"
    Height="size"
    ID="string"
    OnClick="Click event handler"
    OnClientClick="string"
    OnCommand="Command event handler"
    OnDataBinding="DataBinding event handler"
    OnDisposed="Disposed event handler"
    OnInit="Init event handler"
    OnLoad="Load event handler"
    OnPreRender="PreRender event handler"
    OnUnload="Unload event handler"
    PostBackUrl="uri"
    runat="server"
    SkinID="string"
    Style="string"
    TabIndex="integer"
    Text="string"
    ToolTip="string"
    UseSubmitBehavior="True|False"
    ValidationGroup="string"
    Visible="True|False"
    Width="size"
/>

Blazor Razor Syntax

Basic Button with Click Event

<Button Text="Click Me" OnClick="HandleClick" />

@code {
    void HandleClick()
    {
        // Handle the click
    }
}

Button with Command

<Button Text="Save" 
        CommandName="Save" 
        CommandArgument="@itemId" 
        OnCommand="HandleCommand" />

@code {
    private string itemId = "123";

    void HandleCommand(CommandEventArgs args)
    {
        var command = args.CommandName;    // "Save"
        var argument = args.CommandArgument; // "123"
    }
}

Button with JavaScript Click

<Button Text="Alert" OnClientClick="alert('Hello World!')" />

Styled Button

<Button Text="Styled Button"
        BackColor="WebColor.Blue"
        ForeColor="WebColor.White"
        Font_Bold="true"
        CssClass="my-button-class" />

Disabled Button

<Button Text="Cannot Click" Enabled="false" />

Button with Validation Control

<EditForm Model="@model" OnValidSubmit="HandleSubmit">
    <TextBox @bind-Text="model.Name" />
    <RequiredFieldValidator ControlToValidate="..." Text="Required" />
    
    @* This button triggers validation *@
    <Button Text="Submit" CausesValidation="true" />
    
    @* This button skips validation *@
    <Button Text="Cancel" CausesValidation="false" OnClick="HandleCancel" />
</EditForm>

ValidationGroup - Selective Validation

The ValidationGroup property allows you to create multiple validation groups on a single form. When a button with a ValidationGroup is clicked, only validators with the matching ValidationGroup will be triggered.

Important: To use ValidationGroup, you must wrap your form in a ValidationGroupProvider component.

@using BlazorWebFormsComponents.Validations

<ValidationGroupProvider>
    <EditForm Model="@model" OnValidSubmit="HandlePersonalSubmit">
        @* Personal Information Group *@
        <InputText @ref="NameInput.Current" @bind-Value="model.Name" />
        <RequiredFieldValidator ControlToValidate="@NameInput"
                                Text="Name required"
                                ValidationGroup="Personal" />
        
        <InputText @ref="EmailInput.Current" @bind-Value="model.Email" />
        <RequiredFieldValidator ControlToValidate="@EmailInput"
                                Text="Email required"
                                ValidationGroup="Personal" />
        
        <Button Text="Validate Personal" ValidationGroup="Personal" />
    </EditForm>
    
    <EditForm Model="@model" OnValidSubmit="HandleBusinessSubmit">
        @* Business Information Group *@
        <InputText @ref="CompanyInput.Current" @bind-Value="model.Company" />
        <RequiredFieldValidator ControlToValidate="@CompanyInput"
                                Text="Company required"
                                ValidationGroup="Business" />
        
        <Button Text="Validate Business" ValidationGroup="Business" />
    </EditForm>
</ValidationGroupProvider>

@code {
    ForwardRef<InputBase<string>> NameInput = new ForwardRef<InputBase<string>>();
    ForwardRef<InputBase<string>> EmailInput = new ForwardRef<InputBase<string>>();
    ForwardRef<InputBase<string>> CompanyInput = new ForwardRef<InputBase<string>>();
    
    private FormModel model = new FormModel();
    
    void HandlePersonalSubmit() { /* Personal validation passed */ }
    void HandleBusinessSubmit() { /* Business validation passed */ }
}

How ValidationGroup Works:

  1. Same Group - Button with ValidationGroup="Personal" triggers only validators with ValidationGroup="Personal"
  2. No Group (empty/null) - Button without a ValidationGroup triggers only validators without a ValidationGroup
  3. Multiple Groups - You can have multiple groups on the same page that validate independently
  4. CausesValidation - Set CausesValidation="false" to disable validation entirely for a button

HTML Output

Web Forms Input:

<asp:Button ID="btnSubmit" Text="Submit" CssClass="btn" runat="server" />

Rendered HTML:

<button type="submit" class="btn">Submit</button>

Styled Button Input:

<Button Text="Styled" BackColor="WebColor.Blue" ForeColor="WebColor.White" />

Rendered HTML:

<button type="submit" style="background-color:Blue;color:White;">Styled</button>

Migration Notes

When migrating from Web Forms to Blazor:

  1. Remove asp: prefix - Change <asp:Button> to <Button>
  2. Remove runat="server" - Not needed in Blazor
  3. Remove ID attribute - Use @ref if you need a reference to the component
  4. Update event handler syntax - Change OnClick="btnSubmit_Click" to OnClick="HandleClick"
  5. Replace PostBackUrl - Use navigation or component state instead
  6. Update OnCommand handlers - The signature changes from (object sender, CommandEventArgs e) to (CommandEventArgs args)

Before (Web Forms)

<asp:Button ID="btnSave" 
            Text="Save" 
            OnClick="btnSave_Click" 
            CssClass="btn btn-primary"
            runat="server" />
protected void btnSave_Click(object sender, EventArgs e)
{
    // Handle click
}

After (Blazor)

<Button Text="Save" 
        OnClick="HandleSave" 
        CssClass="btn btn-primary" />

@code {
    void HandleSave()
    {
        // Handle click
    }
}

Examples

Basic Click Handler

<Button Text="Click Me!" OnClick="OnClick" />

<span style="font-weight: bold">@message</span>

@code {
    private string message = "Not clicked yet!";

    void OnClick()
    {
        message = "I've been clicked!";
    }
}

Command Pattern with Multiple Buttons

<Button Text="Edit" CommandName="Edit" CommandArgument="@item.Id" OnCommand="HandleCommand" />
<Button Text="Delete" CommandName="Delete" CommandArgument="@item.Id" OnCommand="HandleCommand" />

<p>Last action: @lastAction</p>

@code {
    private string lastAction = "None";

    void HandleCommand(CommandEventArgs args)
    {
        lastAction = $"Command '{args.CommandName}' on item {args.CommandArgument}";
    }
}

Styled Buttons

@using static BlazorWebFormsComponents.WebColor

<Button Text="Blue Button" BackColor="Blue" ForeColor="White" />
<Button Text="Red Bold Button" BackColor="Red" ForeColor="Yellow" Font_Bold="true" />
<Button Text="Custom Class" CssClass="rounded-corners" />

JavaScript Integration

<Button Text="Show Alert" OnClientClick="alert('Hello from JavaScript!')" />
<Button Text="Confirm" OnClientClick="return confirm('Are you sure?')" OnClick="HandleConfirmed" />

See Also