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

Wan*_*eer 2 modal-dialog razor asp.net-core-mvc blazor

因此,我正在开发服务器端的 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{
    
}
Run Code Online (Sandbox Code Playgroud)

我的理解是“数据目标”和“数据切换”应该使事情正常工作,但什么也没有。也为了后代,这是我的 _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>
Run Code Online (Sandbox Code Playgroud)

任何人都可以阐明我在这里可能做错了什么吗?

小智 5

上面的选项 #2 对我来说如下:

  1. 通过将模态放入自己的 razor 文件中来使模态成为组件。
  2. 将其添加到代码块中的组件中:
    [Parameter] public EventCallback OnClose { get; set; }
    
    Run Code Online (Sandbox Code Playgroud)
  3. 将其添加到关闭模式的按钮:
    @onclick="OnClose"
    
    Run Code Online (Sandbox Code Playgroud)
  4. 在主页添加
    public bool showModal = false
    
    Run Code Online (Sandbox Code Playgroud)
  5. 在主页的某处添加
    @if (showModal)
    {
        <MyModal OnClose="() => { showModal = false; }" />
    }
    
    Run Code Online (Sandbox Code Playgroud)
  6. 最后,在打开模式的按钮中,添加
    @onclick="() => { showModal = true; }"
    
    Run Code Online (Sandbox Code Playgroud)