Добавление модального диалога в файл заголовка в проекте MVC не работает - PullRequest
Новая
       33

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

0 голосов
/ 16 июня 2019

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

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

Ниже приведен код в файле 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 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>
}

Тогда в моем контроллере Home у меня есть actionResult, который должен вернуть частичный вид 

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

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

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

1 Ответ

0 голосов
/ 17 июня 2019

Вот рабочий код

Во-первых, поскольку Header.cshtml является частью SubLayout.cshtml, переместите @section scripts на Roles.cshtml, как показано ниже, вы также можете поместить его в свой макет, но без тега @section scripts. Я не использовал модал, который вы имели в своем вопросе. Но это рабочий модал 

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

    <div class="styleguide-spacer-modals"></div>
</div>

<div id="exampleModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Roles</h4>
            </div>
            <div class="modal-body">
                <p>Content</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>
@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>
}

Тогда ваш Header.cshtml теперь выглядит так 

<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 class="solution-header">

   </div>
</header>

Также измените метод контроллера дома на 

public ActionResult Roles()
{
    return View();
}
...