第一次单击模式未在 .NET 5 Blazor 服务器端打开答案

【问题标题】：First click modal doesn't open in .NET 5 Blazor server side第一次单击模式未在 .NET 5 Blazor 服务器端打开
【发布时间】：2021-03-12 05:48:04
【问题描述】：

加载页面后，第一次单击任何卡片都不会打开模态窗口，但下一次单击之后，它将按预期启动模态窗口。我不确定是什么导致了这个问题。

<div class="card-columns">
    @foreach (var project in ProjectService.GetProjects())
    {
        <div class="card">
            <div class="card-img" @onclick="(e => SelectProject(project.Id))" data-toggle="modal" data-target="#projectModal" style="background-image: url('@project.Image'); cursor: pointer;"></div>
            <div class="card-body">
                <h5 class="card-title">@project.Title</h5>
        </div>
        </div>
    }
</div>

    @if (selectedProject != null)
{
<div class="modal fade" id="projectModal" tabindex="-1" role="dialog" aria-labelledby="projectTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
...

C#：

              @code { 
                    Project selectedProject;
                    string selectedProjectId;
                    void SelectProject(string projectId)
                    {
                        selectedProjectId = projectId;
                        selectedProject = ProjectService.GetProjects().First(x => x.Id == projectId);
                        Console.WriteLine("hi");
                    }

第一次点击，它读取 Console.WriteLine 但不显示模态，所以我知道 selectedProject 不为空，它应该显示模态。我试图注释掉我拥有的所有 JavaScript 代码，但仍然存在问题。我还下载了一个新的引导程序副本并将其替换到我的项目中，因为我错误地替换了一些值（主要是字体），并且我发现我永远不应该编辑引导程序。还是有问题。浏览器也没有控制台错误。

【问题讨论】：

标签： asp.net bootstrap-4 blazor blazor-server-side .net-5

【解决方案1】：

所以，这不太正确，我会说这是解决此问题的一种懒惰方式，因为我仍然不知道问题的根源是什么，但我通过向卡片-img div：

<div class="card-img" @onclick="(e => SelectProject(project.Id))" @onmouseover="(e => start(project.Id))" data-toggle="modal">

bool unlock;
void start(string projectId)
{
  if (!unlock)
  {
    selectedProjectId = projectId;
    selectedProject = ProjectService.GetProjects().First(x => x.Id == projectId);
    unlock = true;
  }
}

现在第一次，只有一次，当鼠标移过卡片时，它会运行打开模式，但由于第一次尝试时它不会打开，它基本上什么都不做，但也让它与第一次交互点击尝试。

【讨论】：