Question

在我的Core 2.0项目中，我试图从_Layout.cshtml调用时将部分视图加载到模式div中，但没有任何反应。单击创建新用户时，我试图在模式弹出窗口上加载部分视图。下面是代码-

// __ 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

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

// Java

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

//家庭控制器

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

在调试时，我意识到Ajax成功后会调用Home控制器的Index action方法（不应这样做），可能是导致页面刷新和弹出窗口关闭的原因。但这是解决方案。

Answer 1

使用当前代码，当用户单击锚标记时，浏览器将执行正常的链接单击行为，该行为将导航至被单击链接元素的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('');
        }
    })
}

建议：如果它不是导航链接，请考虑使用按钮代替锚标记。

Answer 2

快速解决方案是在事件处理程序中添加return false：

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

这将禁止默认行为。

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

2 个答案: