代码之家 › 专栏 › 技术社区 › TomsSilhouette

如何在blazor中用onclick传递事件args,我需要html id

webassembly blazor html c#

TomsSilhouette · 技术社区 · 2 年前

我正在尝试在Blazor应用程序中创建一个突出显示的选项卡系统。就像你将如何拥有一个突出显示的活动导航组件。因此,当点击一个按钮时,背景会改变颜色以表示它被选中。

我可以通过传递 e 并且 e.id 以获取元素的HTML ID。然而,我现在正试图在Blazor应用程序中完成这项工作,但我不知道如何完成这段代码。

首先,单击时无法将字符串作为参数传递。所以我现在正试图传递HTML的ID。

如何传递参数? 如果不能做到这一点,我应该做些什么来制作这个选项卡系统?

以下是我玩的一些基本代码,用于传递值和更改其中一个按钮的颜色。

@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}");
    }
}

我尝试通过各种参数并使用eventArgs 对于这段代码,我将“e”定义为未定义,并且它不传递任何数据。该错误提到它没有在上下文中定义。

1 回复 | 直到 2 年前

Yong Shun 2 年前

最简单的方法是将值作为参数传递。

<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

baynezy 2 年前

您可以将此设置为动态并传递参数。

<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;
    }

}

Suprabhat Biswal 2 年前

最简单的方法: 使用硬编码元素标识符

<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>

更好的方法: 使用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(); }
    }
}

注: 上述方法适用于一个或两个元素。但是,如果有更多的元素,最好使用ElementReference[]。