Click here to Skip to main content
15,115,013 members
Articles / Web Development / Blazor
Tip/Trick
Posted 15 Apr 2021

Tagged as

Stats

4.1K views
84 downloads
2 bookmarked

Use Bootstrap Toggle Button Group in Blazor

Rate me:
Please Sign up or sign in to vote.
5.00/5 (3 votes)
15 Apr 2021CPOL2 min read
Toggle Buttons to select different options without JavaScript
Toggle Button Groups are based on checkboxes shown as buttons in different states. This allows users to choose between different options and see what option is currently selected.

Sample Button Group

Sample Button Group

Introduction

Bootstrap is a popular CSS Framework for developing responsive and mobile-first websites. It is included into the Visual Studio Blazor templates and can easily be used in Blazor. But the Toggle Button Groups based on radio buttons normally requires JavaScript. This article shows how to use without JavaScript.

A simple sample for such a group is:

Sample Button Group

HTML
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" 
    id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" 
    id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" 
    id="option3" autocomplete="off"> Radio
  </label>
</div>

See this link for more information on the CSS and HTML definition.

Defining a Data Template

As the first step, we define a data Template, holding the shown options, the currently selected options and as specialty a method used in razor syntax to modify the class attribute.

C#
public class ToggleGroupInfo
{
	public String[] Options { get; set; }
	public String SelectedOption { get; set; }

	public String GetActive(String option)
	{
		return option == SelectedOption ? "active" : "";
	}
}

GetActive is a very special method, only if the option is the selected one, it returns "active", what is the CSS class name required by the active element. So this can be used in the razor file to extend "active" CSS class to the class tag on the active button.

This is a basic principle in Blazor in case you need to define a CSS class depending on some runtime variables.

Defining the Razor Component

The second step is to define the botton group:

HTML
<div class="btn-group btn-group-toggle" data-toggle="buttons">
    @foreach(var optionName in GroupInfo.Options)
        {
            <label class="btn btn-secondary @GroupInfo.GetActive(optionName)">
                <input type="radio" name="options" autocomplete="off" 
                checked="@(GroupInfo.SelectedOption == optionName)" 
                @onchange="()=>GroupInfo.SelectedOption = optionName"> @optionName
            </label>
        }
</div>

So we use the HTML syntax from the sample and loop through all options. In the class attribute of the label, we use our defined method 'GetActive' to add "active" only to the active button. For checked, we directly use a compare between optionName and current SelectedOption, that is changed in the onchange event. One last thing is missing the Property in the component holding the information.

C#
@code {
    [Parameter]
    public Data.ToggleGroupInfo GroupInfo { get; set; }
}

Using the Code

Just define a ToggleGroupInfo and set it as the GroupInfo property.

HTML
<div class="container">
    <div class="row">
        <div class="col col-6">
            <ToggleButtonGroup.Pages.Components.ToggleGroup 
            GroupInfo="@group"></ToggleButtonGroup.Pages.Components.ToggleGroup>
        </div>
        <div class="col col-6">
            </div>
        </div>
    </div>

@code{
    Data.ToggleGroupInfo group = new Data.ToggleGroupInfo()
    {
        Options = new string[] { "Option 1", "Option 2", "Option 3" }
    };
}

Enhance the Code

In case the view needs to be changed with changing the selected option, it is helpful to enhance the ToggleGroupInfo class to implement INotifyPropertyChanged. After this, you may add the usage to the code to reload:

C#
    protected override void OnInitialized()
    {
        group.PropertyChanged += Status_PropertyChanged;
    }

    private void Status_PropertyChanged
    (object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        InvokeAsync(StateHasChanged);
    } 

So my sample looks like:

Sample Button Group

Basic Principles

Use a method that returns null or a CSS class name is a basic principle in Blazor in case you need to define a CSS class depending on some runtime variables.

History

  • 15th April, 2021: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Daniel H. W.
Software Developer (Senior) Haufe Lexware
Germany Germany
Senior Development Engineer @Haufe Group
Developing C#, C++, Java Script

Comments and Discussions

 
QuestionIntegration with InputBase Pin
Shaun C Curtis16-Apr-21 8:03
mvaShaun C Curtis16-Apr-21 8:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.