Question

因此，我正在开发Blazor应用程序，服务器端，并且为了我的生命，我无法获得功能性弹出窗口。我已经按照一些指南进行了操作，从中可以看出我一切都正确，但是不会触发。我有一个更复杂的解决方案，但即使只是为了进行测试，我也进行了一个简单的项目，只是看一看又干又干的应用程序是否可行，在我的较大项目中也许出了点问题。但是不，即使是一个简单的应用程序也无法正常运行。我正在拔头发！这就是我所拥有的，仅用于简单的裸机应用程序，这就是我的Index.razor文件

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.<br />
<br />

<input type="button" class="btn btn-primary" data-target="#testModal" data-toggle="modal" value="Get Random" />

<div class="modal" id="testModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5>Generate Random Hash</h5>
                <button type="button" class="btn btn-primary" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                Random Number @((new Random().Next(0, 5000)))<br />
                <br />
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@code{
    
}

我的理解是，“数据目标”和“数据切换”应该使事情起作用，但是什么也没有。也是为了后代，这是我的_Hosts.chtml文件

@page "/"
@namespace ModalTest.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ModalTest</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">?</a>
    </div>

    <script src="_framework/blazor.server.js"></script>
</body>
</html>

有人可以告诉我我在这里做错了什么吗？非常感谢！

Answer 1

这根本无法与Bootstrap一起使用-Blazor无法直接在本机上运行JavaScript / JQuery，这就是Bootstrap用来触发模式（在其其他组件中）的打开/关闭的原因。

如果您希望此方法有效，则有三个选择：

使用JSInterop和按钮上的@onclick事件来调用Bootstrap函数，该函数在模式的@code块内被调用。您也需要使用相同的想法来解决问题。我看到您缺少（或您的代码段中未包含）必要的核心Bootstrap jquery库，而该库是遵循此路径所必需的。
制作自己的模态组件，滚动自己的@onclick事件函数，并在打开和关闭该函数时在此函数内调用OnStateChanged。
切换到类似Blazorise之类的东西，它已经移植了大多数Bootstrap组件并且可用于Blazor。

Answer 2

上面的选项2对我起作用如下：

通过将模态组件放入其自己的razor文件中来使其成为组件。

将此添加到代码块中的组件中：

[Parameter] public EventCallback OnClose { get; set; }

将其添加到关闭模式的按钮中：
```
@onclick="OnClose"
```
在主页中添加
```
public bool showModal = false
```

在主页中的某处添加

@if (showModal)
{
    <MyModal OnClose="() => { showModal = false; }" />
}

最后，在打开模式的按钮中，添加
```
@onclick="() => { showModal = true; }"
```

模式在Blazor服务器端应用程序中不起作用

2 个答案: