.NET 5 Blazor 服务器端无法打开首次单击模式

Question

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

<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 不为 null，它应该显示模态。我试图注释掉我拥有的所有 javascript 代码，但问题仍然存在。我还下载了 bootstrap 的新副本并将其替换到我的项目中，因为我错误地替换了一些值（主要是字体）并且我发现我永远不应该编辑引导程序。还是有问题。浏览器也没有控制台报错。

Answer 1

所以，这不太正确，我想说这是解决这个问题的一种懒惰的方法，因为我仍然不知道问题的根源是什么，但我通过引入鼠标悬停事件解决了我的问题到 card-img div:

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

C#

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

现在是第一次，而且只有一次，当鼠标经过卡片时，它将运行打开模式，但由于它不会在第一次尝试时打开，所以它基本上什么都不做，但使其与第一次点击尝试可交互。

.NET 5 Blazor 服务器端无法打开首次单击模式

First click modal doesn't open in .NET 5 Blazor server side

asp.net

bootstrap-4

blazor

blazor-server-side

.net-5