如何在我的 Blazor 服务器 razor 页面中使用 JavaScript；提交表单时更改 blazor bootstrap 按钮的样式

Question

我的项目是 Blazor 服务器应用程序。我想要实现的功能是，如果我的验证失败（如果我的输入中没有任何内容），我希望我的手风琴标题更改为红色。

//my index.razor page:

@page "/"
<style>


</style>
<PageTitle>Blazor Bootstrap - Home</PageTitle>
<div class="test1">
    <EditForm Model="@registration" OnValidSubmit="HandleFormSubmission">
        <DataAnnotationsValidator />
        <Accordion>
            <AccordionItem Title="Accordion Item #1">
                <Content>
                    <InputText id="SmtpHost" @bind-Value="@registration.SmtpHost" placeholder="SMTP Host" />
                    <ValidationMessage For="@(() => registration.SmtpHost)" />
                </Content>
            </AccordionItem>
        </Accordion>
        <button type="submit">Submit</button>
    </EditForm>
</div>

@code {
    [Inject]
    protected IJSRuntime JSRuntime { get; set; }
    Data.Registration registration = new();
    bool isValidationError = false;
    bool isFormSubmitted = false;
    bool hasRendered = false;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
                // await Task.Yield();
                // await ToggleAccordionButtonError();
        }
    }

    public async Task HandleFormSubmission(EditContext context)
    {
        Console.WriteLine("Form Submitted Successfully");
        isValidationError = !context.Validate();

        Console.WriteLine("Testing");
        Console.WriteLine(isValidationError);

        if (isValidationError)
        {
            isFormSubmitted = true;
            if (hasRendered)
            {
                ToggleAccordionButtonError();
            }
            else
            {
                StateHasChanged(); // Notify Blazor to re-render the component
            }
        }
    }

    private async Task ToggleAccordionButtonError()
    {
        try
        {
            await JSRuntime.InvokeVoidAsync("toggleAccordionButtonError");
            await JSRuntime.InvokeVoidAsync("myJavaScriptFunction");
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error invoking JavaScript function: {ex.Message}");
        }
    }
}

我的custom.js 文件：

console.log("File recognised");

function myJavaScriptFunction() {
    // Invoke an alert
    console.log("Hello from JavaScript!");
}

// .test1 .accordion-button
function toggleAccordionButtonError() {
    console.log("Hello from JavaScript!");
    var elements = document.querySelectorAll('.accordion-button.collapsed');
    elements.forEach(function (element) {
        element.style.backgroundColor = "red";
        element.style.color = "white";
    });
}

我的 custom.js 可以工作 我知道我已经注释掉了我的代码

我想到的一个解决方案是将 Javascript 互操作性与 HandleFormSubmission 结合使用；但它似乎不起作用

我确实知道 Blazor 的预渲染是 Blazor 中的一项功能，它允许组件在发送到客户端之前在服务器上渲染，并且它对何时可以进行 JavaScript 互操作调用施加了某些限制。有没有办法解决这个问题。任何见解都将受到高度赞赏。

Answer 1

我认为你不应该为此使用 JS Interop。

您说过您希望验证失败时字段变为红色。如果字段无效，CSS 标签

invalid

将自动添加到相应输入的类中。您还可以在开发工具中看到这一点。你可以这样设计：

input.invalid {
  border-style: solid;
  border-color: red;
}

此外，还有无效的伪元素。

最后，阅读有关 ASP.NET Core Blazor 表单验证 的文档。