Как создать модал как представление и вызвать его из заголовка в общей папке в MVC

Question

У меня есть модал, который можно просмотреть нажатием кнопки, но мне нужно, чтобы он отображался на Url.Action как часть файла заголовка таким образом, чтобы он отображался на всех страницах.

Я следовалнекоторые учебники, но ни один из них не работал для меня, поскольку они представляли различные сценарии, которые не относятся к моему.

Ниже приведен код Rolles.cshtml для модального

@{
Layout = "~/Views/Shared/SubLayout.cshtml";
 }
  @{
ViewBag.Title = "Rolles";
 }
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria- 
     labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal 
               title</h5>
                <button type="button" class="close" data-dismiss="modal" 
                  aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...BLABLA
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-
                        dismiss="modal">
                    Close
                </button>
                <button type="button" class="btn btn-primary">Save 
       changes</button>
            </div>
        </div>
    </div>
   </div>

Ниже приведен код контроллера

 public ActionResult Betingelser()
    {
        return PartialView("Rolles");

    }

Ниже приведен код Head.cshtml, в котором я вызываю модал для отображения.

  header class="header" role="banner">   
@section scripts
{
    <script>
        $(function () {
            $('#btnTrigger').unbind();
            $('#btnTrigger').on('click', function () {
                $.ajax({
                    url: '@Url.Action("Betingelser", "Betingelser")', 
                    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>
    }
<div class="portal-header">
    <div class="container portal-header-inner">
        <!-- 1B: Portal header: info + actions-->       
    </div>
</div>
<!--2A: Solutiuon header -->
<div class="solution-header">
    <div class="container solution-header-inner">

    <div class="overlay"></div>
    <nav role="navigation" class=" nav">


            <ul class="nav-primary">
                <a class="nav-link" id="btnTrigger" href="#"> 
        <span>Betingelser</span></a>                 
            </ul>
            <div id="divContainer"></div>
        </div>
    </div>

Я хочу иметь возможность нажимать на ролики Url.Action для отображениямодально с любой страницы в моем решении.Что мне здесь не хватает?

Answer 1

Было бы сложно запустить модальный режим, так как Url.Action перенаправит вас на новую страницу. Лучший способ сделать это - использовать AJAX.

Сначала создайте контейнер, в который будут загружены ваши частичные представления или элементы HTML. В этом случае я создал здесь div, а именно divContainer, где я помещу содержимое HTML, как только кто-то нажмет кнопку, а именно btnTrigger.

<ul class="nav-primary">
<li>
    <a class="nav-link" id="btnTrigger" href="#"><span>Rolles</span></a>
</li>
</ul>
<div id="divContainer"></div>

Затем на той же странице, где вы размещаете этот код, добавьте скрипт, который будет содержать ваши функциональные возможности AJAX. Это значит, что когда кто-то нажимает на вашу ссылку, в данном случае btnTrigger (с кодом выше), он вызывает Betingelser ActionResult и загружает ваш Rolles.cshtml, который содержит ваш модальный HTML-код.

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

Затем на вашем Rolles.cshtml я отредактировал ваш модал на основе документации Bootstrap, вы можете отредактировать его, если хотите:

@{
    ViewBag.Title = "Rolles";
}
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            ...
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data- 
                dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>
</div>

Ваш код контроллера остается прежним:

public ActionResult Betingelser()
    {
        return PartialView("Rolles");

    }

Answer 2

Я вижу, что вы просто добавляете html в представление с помощью ActionResult, и после того, как я думаю, вы собираетесь изменить значения с помощью JS или Jquery ... Почему бы вам не перенести модальный вид непосредственно и показать его сВместо jquery?

Это может быть проще и практичнее.