从_Layout调用时，无法将部分视图加载为模式

Question

In my Core 2.0 project I am trying to load a partial view to modal div when called from _Layout.cshtml but nothing happens. On click of Create New User I am trying to load partial view on modal popup. Below is code-

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

On debugging I realize that after Ajax success it calls Index action method of Home controller(that should not be) and may be it is causes page refresh and popup may get close. But what is it's solution.

Answer 1

With your current code, when user clicks on the anchor tag, the browser do a normal link click behavior, which is navigating to the href attribute value of the clicked link element. If you want show the modal dialog instead of that, you should prevent this default behavior.

You may pass an event object to the CreateUser method

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

and in your method, call the preventDefault method, which will stop the normal link click behavior(navigating to to the href value)

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('');
        }
    })
}

A suggestion: If it is not a navigational link, Consider using a button instead of an anchor tag.

Answer 2

Quick solution is to add return false to your event handler:

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

This will suppress default behavior.