Невозможно загрузить частичное представление как модальное при вызове из _Layout

Question

В моем проекте Core 2.0 я пытаюсь загрузить частичное представление в модальный div при вызове из _Layout.cshtml, но ничего не происходит.При нажатии Создать нового пользователя Я пытаюсь загрузить частичное представление в модальном всплывающем окне.Ниже приведен код -

// _ Layout.cshtml

<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
<li><a href="/" onclick="CreateUser()">Create New User</a></li>

// Index.cshtml из Home

<div class="modal fade" id="AppointmentSchedule" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header btn-primary">
                <h5 class="modal-title" id="AppointmentModalLabel"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="ScheduleAppointment"></div>
        </div>
    </div>
</div>

// Javascript

function CreateUser() {
            var url = appSetting + "Home/CreateUser";
            $.ajax({
                type: "GET",
                contentType: "application/json",
                url: url,
                data: null,
                dataType: "html",
                async: false,
                success: function (data) {
                    $("#ScheduleAppointment").html('');
                    $("#ScheduleAppointment").html(data);
                    $("#AppointmentSchedule").modal('show');
                },
                error: function (result) {
                    $("#divScheduleAppointment").html('');
                }
            })
        }

// Home Controller

  public ActionResult CreateUser()
      {
        return PartialView("_CreateUserHome");
      }

При отладке я понимаю, что после успеха Ajax он вызывает метод действия Index контроллера Home (что не должно быть) и может быть причиной обновления страницы, а всплывающее окно может закрываться.,Но каково это решение.

Answer 1

Быстрое решение заключается в добавлении возврата false в ваш обработчик событий:

    <li><a href="/" onclick="CreateUser(); return false;">Create New User</a></li>

Это подавит поведение по умолчанию.

Answer 2

С вашим текущим кодом, когда пользователь нажимает на тег привязки, браузер выполняет нормальное поведение при щелчке по ссылке, которое переходит к значению атрибута href элемента ссылки, по которому щелкнули.Если вы хотите показать модальное диалоговое окно вместо этого, вам следует запретить это поведение по умолчанию.

Вы можете передать объект event методу CreateUser

<a href="/" onclick="CreateUser(event)">Create New User</a>

и в вашемвызовите метод preventDefault, который остановит обычное поведение при щелчке ссылки (переход к значению href)

function CreateUser(e)
{
    e.preventDefault();

    var url = appSetting + "Home/CreateUser";
    $.ajax({
        type: "GET",
        url: url,
        success: function (data)
        {
            $("#ScheduleAppointment").html(data);
            $("#AppointmentSchedule").modal('show');
        },
        error: function (result)
        {
            $("#divScheduleAppointment").html('');
        }
    })
}

Предложение. Если это не навигационная ссылка, рассмотрите возможность использованиякнопка вместо тега привязки.