Dolly_do Ответов: 0

Добавление модального диалога в заголовочный файл в проекте MVC не работает

Я реализовал модальное всплывающее окно как часть файла header.cshtml в проекте MVC. проблема в том, что он не показывает диалоговое окно (не работает) Единственный способ, которым я смог заставить работать, - это поместить и кнопку, и модальный контейнер в заголовочный файл. Модальное тело-это длинный текст, и оно не должно быть частью заголовочного файла.

Ниже приведен код в файле Roles.cshtml, где создается модальный контейнер и записывается текст

@{
Layout = "~/Views/Shared/SubLayout.cshtml";
 }
 @{
ViewBag.Title = "Roles";
   }
 <div class="container">

<div class="styleguide-spacer-modals"></div>
 </div>
 <div class="modal" id="modal-active" aria-hidden="true">
 <div class="modal__overlay bg-modal" tabindex="-1"
     data-micromodal-close>
    <div class="modal__container" role="dialog" aria-modal="true"
         aria-labelledby="modal-title-1">
        <header class="modal__header">
            <h1 class="modal__title h2" id="modal-title-1">
                <h2>Roles</h2>
                <br />
            </h1>
        </header>
        <main class="modal__content">
        BLABLA......
        </main>

        <footer class="modal__footer">
            <button class="button button-primary"
                    aria-label="submit">
                close
            </button><button class="button button-secondary" data- 
              micromodal-close
               aria-label="closing">
                close
            </button>
        </footer>  
        </div>
     </div>
    </div>

Тогда файл Header.cshtml выглядит так: где я добавил "btnTrigger" и AJAX-скрипт для вызова и показа модального кода

@model TR.Service.Web.ViewModels
<header class="header" role="banner">
<!--1A: Portal header -->
<div class="portal-header">
    <div class="container portal-header-inner">
        <a href="#" title="Home" aria-label="Home" class="logo"></a>
        <button class="button button-tertiary button-menu-open js-menu- 
    open ml-auto" aria-haspopup="menu" title= mobil menu">Menu</button>
            <a href="#" class="button button-secondary" role="button">
             login
            </a>
        </div>
        <button class="button button-primary"  id="btnTrigger"
                data-micromodal-trigger="modal-passive">
          Read me
        </button>
         <div id="divContainer"></div>
    </div>
  </div>
  <div class="solution-header">

  blabla........         
   </div>
  </header>
  @section scripts
   {
   <script>
   $(function () {
    $('#btnTrigger').unbind();
    $('#btnTrigger').on('click', function () {
        $.ajax({
            url: '@Url.Action("Betingelser", "Rolles")', 
            type: 'POST',
            data: { },

            success: function (arr) {
                $('#divContainer').html(arr); //Load your HTML to 
           DivContainer
                $('#exampleModal').modal('show'); //Once loaded, show the 
          modal
            },
            error: function (err) {
                console.log(err);
            }
        });
    });
});
 </script>
  }

Затем в моем домашнем контроллере у меня есть actionResult, который должен возвращать частичное представление

public ActionResult Roles()
        {
       return PartialView("Roles");
        }


Я не могу понять, почему это не работает. Пожалуйста помочь.

Pupop должен появиться при нажатии на кнопку с id =btnTrigger

Что я уже пробовал:

I tried several tutorials, read modal documentation, and applied fixes from stackoverflow nothing worked for me. I must be missing something very simple and trivial I just can't see it.

0 Ответов