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">×</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 对我来说如下:
[Parameter] public EventCallback OnClose { get; set; }
Run Code Online (Sandbox Code Playgroud)
@onclick="OnClose"
Run Code Online (Sandbox Code Playgroud)
public bool showModal = false
Run Code Online (Sandbox Code Playgroud)
@if (showModal)
{
<MyModal OnClose="() => { showModal = false; }" />
}
Run Code Online (Sandbox Code Playgroud)
@onclick="() => { showModal = true; }"
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
4957 次 |
| 最近记录: |