Блог

После загрузки страницы самый первый щелчок по любой карточке не открывает модальное окно, но следующий щелчок и после него он будет модальным, как и ожидалось. Я не уверен, что вызвало эту проблему.

 <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");
                    }
 

При самом первом щелчке он считывает консоль.Строка записи, но не показывает модальный, поэтому я знаю, что selectedProject не равен null, и предполагается, что он показывает модальный. Я попытался закомментировать весь код javascript, который у меня был, и все еще проблема. Я также загрузил новую копию bootstrap и заменил ее в своем проекте, поскольку я по ошибке заменил некоторые значения (в основном шрифты) и обнаружил, что мне никогда не следует редактировать bootsrap. Проблема все еще существует. В браузере также нет ошибки консоли.

Итак, это не совсем правильно, и я бы сказал, что это ленивый способ исправить эту проблему, потому что я до сих пор не знаю, в чем корень проблемы, но я решил свою проблему, введя событие наведения курсора мыши в 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;
  }
}
 

Теперь в первый раз и только один раз, когда мышь перемещается по карте, будет запущен режим open, но поскольку он не открывается с первой попытки, он в основном ничего не делает, но также делает его интерактивным с первой попыткой щелчка.