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

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

razor blazor

Razor 模式在Blazor服务器端应用程序中不起作用,razor,modal-dialog,blazor,core,Razor,Modal Dialog,Blazor,Core,因此，我正在开发Blazor应用程序，服务器端，就我的一生而言，我无法获得一个模式弹出功能。我已经遵循了几条关于如何做的指南，从我所能说的来看，我一切都是对的，但它不会触发。我有一个更复杂的解决方案，但即使只是为了测试，我也做了一个简单的项目，只是为了看看一个简单的应用程序是否可以工作，也许我更大的项目出了问题。但不，即使只是一个简单的应用程序也无法运行。我在拔头发！这是我的东西，只是简单的裸体应用程序，这是我的Index.razor文件 @page "/" <h1&

因此，我正在开发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{
    
}

@page/“
你好，世界！
欢迎使用您的新应用。



生成随机散列
&时代；
随机数@（（new Random（）.Next（0，5000）））



接近
@代码{
}

我的理解是，“数据目标”和“数据切换”应该能让事情顺利进行，但什么也做不到。这是我的_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">This simply won't work with Bootstrap - Blazor cannot natively run JavaScript/JQuery out-of-the-box and that's what Bootstrap uses to trigger open/closing of modals (among other components of theirs).
If you want this to work, you have three options:

Use JSInterop and an @onclick
 event on the button to call the Bootstrap function that is called inside your @code
 block for the modal. You'll need to cover closing it too using this same idea. I see you're missing (or you didn't include in your snippets) the necessary core Bootstrap jquery libraries which is required to go down this path.

Make your own modal component, roll your own @onclick
 event function, and call OnStateChanged
 inside this function when they open & close it.

Switch to something like Blazorise that already has most of the Bootstrap components ported over and usable for Blazor.

Option #2 above worked for me as follows:

Make the modal a component by putting it in its own razor file. 
Add this to the component in a code block: 
[Parameter] public EventCallback OnClose { get; set; }

@page/“
@名称空间ModalTest.Pages
@addTagHelper*，Microsoft.AspNetCore.Mvc.TagHelpers
@{
布局=空；
}
莫代尔泰斯特
这对Bootstrap根本不起作用——Blazor无法在本机开箱即用地运行JavaScript/JQuery，这就是Bootstrap用来触发打开/关闭modals（以及它们的其他组件）的原因
如果您想让它工作，您有三个选项：
使用JSInterop和按钮上的@onclick
事件调用在模式的@code
块中调用的引导函数。你也需要用同样的方法来解决这个问题。我发现您缺少（或者您没有在代码片段中包含）走这条路所必需的核心引导jquery库

制作您自己的模态组件，滚动您自己的@onclick
事件函数，并在打开和关闭该函数时在此函数内调用OnStateChanged


切换到类似的东西已经将大多数引导组件移植到Blazor上并可用于Blazor

上述选项2对我的作用如下：
通过将模态放在自己的razor文件中，使其成为组件
将其添加到代码块中的组件：
@onclick="OnClose"


将其添加到关闭模式的按钮：
public bool showModal = false


在主页中添加
@if (showModal)
{
    <MyModal OnClose="() => { showModal = false; }" />
}

@onclick="() => { showModal = true; }"


在主页的某个地方添加
@onclick="() => { showModal = true; }"