Question 252078 in Html Question posted in
Some basic documentation can be found here.

Html – How to pass event args with an onclick in Blazor for the ID

I am trying to create a highlighted tab system in a Blazor app. Like how you would have an active nav component that is highlighted.
So when a button is clicked on, the background changes the colour to represent it is selected.

I can do this easily using JavaScript by passing e and having e.id to get the HTML ID of the element.
However, I am now trying to do this in a Blazor app and I can’t figure out how to complete this code.

First I couldn’t pass a string as a parameter when clicked. So I am now trying to pass the ID of HTML.

How do I pass the parameter?
If that can’t be done, what should I do to make this tabbing system?

Here is some basic code I was playing with to pass the values and change the colour of one of the buttons.

@page "/store"

<PageTitle>Store</PageTitle>

<style>
    .tab-button {
        background-color: #ccc;
        color: #333;
    }

        /* CSS for selected buttons/tabs */
        .tab-button.selected {
            background-color: #007bff;
            color: #fff;
        }
</style>

<div class="h-screen">
    <div class="flex h-full">
        <section class="hidden md:grid md:grid-rows-nav bg-slate-600 h-full min-w-[250px] border-r-2 border-black border-solid h-full">
            <NavMenu />
        </section>

        <main class="relative w-full h-full grid">
            <h3>Store</h3>
            <div>
                <button id="abc" class="tab-button @(selectedTab == "tab1" ? "selected" : "")" @onclick="() => SelectTab(e)">Tab 1</button>
                <button id="xyz" class="tab-button @(selectedTab == "tab1" ? "selected" : "")" @onclick="() => SelectTab(e)">Tab 2</button>
            </div>
            <div>
                @if (selectedTab == "tab1")
                {
                    <p>Content for Tab 1</p>
                }
                else if (selectedTab == "tab2")
                {
                    <p>Content for Tab 2</p>
                }
            </div>
        </main>
    </div>
</div>


@code {
    private string selectedTab = "tab1";

    private void SelectTab(EventArgs e)
    {
        Console.WriteLine($"fsdfs {e.id}");
    }
}

I tried to pass various params and used eventArgs
With this code, I have ‘e’ as undefined and it is not passing any data. The error mentions it is not defined in context.

Tags:

3

Answers


  1. 0

    The simplest way will be to pass the value as an argument.

    <button id="abc" class="tab-button @(selectedTab == "tab1" ? "selected" : "")" 
    @onclick="@(() => SelectTab("tab1"))">Tab 1</button>
<button id="xyz" class="tab-button @(selectedTab == "tab2" ? "selected" : "")" 
    @onclick="@(() => SelectTab("tab2"))">Tab 2</button>

    private void SelectTab(string e)
{
    selectedTab = e;
}

    Demo @ BlazorFiddle

    Login or Signup to reply.
  2. 0

    You can make this dynamic and pass parameters.

    <div class="h-screen">
    <div class="flex h-full">

        <main class="relative w-full h-full grid">
            <h3>Store</h3>
            <div>
                @for(var i=1; i<=5; i++)
                {
                    var currentIndex = i;
                    <button class="tab-button @(_selectedTab == currentIndex ? "selected" : "")" @onclick="() => SelectTab(currentIndex)">Tab @currentIndex</button>
                }
            </div>
            <div>
                <p>Content for Tab @_selectedTab</p>
            </div>
        </main>
    </div>
</div>


@code {
    private int _selectedTab = 1;

    private void SelectTab(int currentIndex)
    {
        _selectedTab = currentIndex;
    }

}
    Login or Signup to reply.
  3. 0

    Simplest Approach: Use hardcoded element identifier

    <button class="tab-button @(selectedTab == "tab1" ? "selected" : default)" @onclick="@(() => SelectTab("tab1"))">Tab 1</button>
<button class="tab-button @(selectedTab == "tab2" ? "selected" : default)" @onclick="@(() => SelectTab("tab2"))">Tab 2</button>

    Better Approach: Use ElementReference

    <button @ref="TabOne" class="tab-button @(selectedTab == TabOne.Id ? "selected" : default)" @onclick="@(() => SelectTab(TabOne.Id))">Tab 1</button>
<button @ref="TabTwo" class="tab-button @(selectedTab == TabTwo.Id ? "selected" : default)" @onclick="@(() => SelectTab(TabTwo.Id))">Tab 2</button>

@code{
    private string selectedTab;
    private ElementReference TabOne;
    private ElementReference TabTwo;

    protected override void OnAfterRender(bool firstRender)
    {
      if (firstRender) { SelectTab(TabOne.Id, true); }
    }

    private void SelectTab(string tabId, bool isStateChanged = false)
    {
        selectedTab = tabId;

        if (isStateChanged) { StateHasChanged(); }
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search