在 Blazor 组件中使用 Javascript addEventListener

Question

我有一个在服务器端呈现的 Blazor 组件。我想在里面放一些可折叠的 div。但是，由于代码是服务器呈现的，因此 Javascript 未执行，因此这些部分无法折叠。

这是我的 script.js 文件中的代码：

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.maxHeight){
            content.style.maxHeight = null;
        } else if(window.matchMedia("(max-width:1440px)")){
            // content.style.maxHeight = content.scrollHeight + "px";
            content.style.maxHeight = "20vh";
        } 
        else {
            content.style.maxHeight = "50vh";
        }
    });
}

这是我的 main.cshtml 文件：

<component type="typeof(Main)" render-mode="Server" />

<script src="~/js/script.js" type="text/javascript"></script>

最后是我的 Main 带有可折叠部分的组件：

@using Microsoft.AspNetCore.Components;
@using Microsoft.AspNetCore.Components.Web;

<div class="collapsible">
    <label for="tutu">HEADER</label>
    <div id="mybtn" class="btn-rch"></div>
</div>

<div class="tutu content flex-column">
    <p>CONTENT HIDDEN IN COLLAPSE</p>
</div>

<div class="collapsible">
    <label for="tutu">HEADER</label>
    <div id="mybtn" class="btn-rch"></div>
</div>

<div class="tutu content flex-column">
    <p>CONTENT HIDDEN IN COLLAPSE</p>
</div>

<div class="collapsible">
    <label for="tutu">HEADER</label>
    <div id="mybtn" class="btn-rch"></div>
</div>

<div class="tutu content flex-column">
    <p>CONTENT HIDDEN IN COLLAPSE</p>
</div>

@code {

}

如果我使用 render-mode="Static" 而不是 render-mode="Server" 它会起作用，但是因为我的组件内部会有事件，所以我不可能这样做。例如，我如何使用 JSInterop 调用我的 JS 脚本来使我的 div 崩溃？

Answer 1

您可以在 Blazor 中完成这一切。以下是我认为您正在努力实现的一个简单的工作示例。

这是一个可折叠的 div 组件。

CollapseDiv.razor

<div @onclick="Collapse" style="cursor:pointer;" >
    <h2>@Label</h2>
</div>
@if (!Collapsed)
{
    <div>@ChildContent</div>
}

@code {

    [Parameter] public RenderFragment ChildContent { get; set; }

    [Parameter] public RenderFragment Label { get; set; }

    bool Collapsed;

    void Collapse(MouseEventArgs e)
    {
        Collapsed = !Collapsed;
    }
}

这是演示页面：

Collapse.razor

@page "/collapse"
<h3>Collapse Test Page</h3>

<CollapseDiv>
    <Label>I'm Collapsible</Label>
    <ChildContent>
        I'm the collapsed content!
    </ChildContent>
</CollapseDiv>
<br />
<br />
<CollapseDiv>
    <Label>I'm Collapsible Too</Label>
    <ChildContent>
        More collapsed content!
    </ChildContent>
</CollapseDiv>

@code {

}

这里的关键是：忘记用 Javascript 操纵 DOM，构建组件。

您应该能够采用它来满足您的需要。

在 Blazor 组件中使用 Javascript addEventListener

Use Javascript addEventListener within Blazor component

c#

blazor

blazor-server-side

blazor-jsinterop

CollapseDiv.razor

Collapse.razor