在 Html.ActionLink 上单击以 Modal 形式呈现部分视图

Question

我有一个带有表格的页面，其中每一行都有一个链接“移动”。

单击链接时，我试图调用控制器GET 方法，该方法将依次以模式呈现_MoveReportPartial 视图。

一旦用户在模式中做出选择，提交按钮应该发布到控制器的 Post 方法。

如果我从Html.ActionLink(...) 中删除类属性（移动模式），它实际上会脱离js 文件并忽略它。然后它通过在新窗口中打开_MoveReportPartial 来工作，然后如果用户单击提交，则发布到正确的方法。

我试图让它在模式中打开，但我拥有的 js 不起作用并路由到 POST 方法而不是单击“移动”。

编辑 为什么.load 调用POST 方法而不是GET？如何更改js？ （添加了event.preventDefault();，仍然观察到相同的行为）

原始视图上的移动链接如下所示：

<div class="d20 actionLink">
    @Html.ActionLink("Move", "MoveReport", "ReportsWeb", new {id = item.ReportDefinitionId, newReport = false}, new {@class = "move-modal"})
</div>

我有一个js 文件：

$(function () {
$('.move-modal').click(function () {
    event.preventDefault();
    $('<div/>').appendTo('body').dialog({
        close: function (event, ui) {
            dialog.remove();
        },
        modal: true
    }).load(this.href, {});
});

});

我的ReportsWebController 看起来像这样：

[HttpGet]
public ActionResult MoveReport(Guid id, bool newReport)
{
    //some code

    return PartialView("_MoveReportPartial", model);
}

[HttpPost]
public ActionResult MoveReport(MoveReportModel Model)
{
    try
    {
        //some code
    }
    catch (Exception exc)
    {
        InternetReportingTrace.Source.WriteError(exc);
        throw;
    }
    return RedirectToAction("ListReports");
}

而我的_MoveReportPartial 看起来像这样：

<div id="dialog-confirm">
<div align="center">
    <h2>Please Confirm</h2>        
</div>

@using (Html.BeginForm("MoveReport", "ReportsWeb", FormMethod.Post))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    <div tabindex="-1" role="dialog">

        <div class="modal-content">
            <p>Report @Model.Report.Name with ID @Model.Report.ReportDefinitionId </p>
            <p>Will be moved to:</p>

            @for (int i = 0; i < Model.MoveOptions.Count; i++)
            {
                <div class="radio">
                    <label><input type="radio" name="optradio">@Model.MoveOptions[i]</label>
                </div>
            }
            <div>
                <input type="submit" value="Move Report" />
            </div>
        </div>
    </div>
}

Answer 1

我认为您没有正确阻止 ActionLink 的默认行为。

试试：

$('.move-modal').click(function (event) {
  event.preventDefault();
  $('<div/>').appendTo('body').dialog({
    close: function (event, ui) {
        dialog.remove();
    },
    modal: true
  }).load(this.href, {});
});

因为它是一个 jQuery 处理程序，所以您可以使用 event.preventDefault() 代替 return false;。如果您的单击处理程序使用 return false 来阻止浏览器导航，则可能会导致解释器无法到达 return 语句，并且浏览器将在该点之前继续执行锚标记的默认行为。使用 event.preventDefault() 作为处理程序的第一行意味着您可以保证默认导航行为不会触发。

其次，你的 .load 方法调用是错误的。

改变

.load(this.href, {}); 

到

.load(this.href);

api.jquery.com/load 上的文档指出“如果数据作为对象提供，则使用 POST 方法；否则，假定为 GET。”因为您要向其发送一个空对象，所以它假定您要使用 POST。没有必要这样做。