在Html.ActionLink上的Modal中使用表单呈现部分视图

Question

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

在单击链接时，我尝试获取调用的GET方法，该方法将依次以模态呈现_MoveReportPartial视图。

用户在模式中进行选择后，提交按钮应发布到控制器的Post方法中。

如果我从Html.ActionLink(...)删除class属性（move-modal 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; event.preventDefault() 。 如果您的点击处理程序使用return false阻止浏览器导航，则可能会导致解释器无法到达return语句，并且浏览器将在此之前继续执行锚标记的默认行为。 在处理程序的第一行中使用event.preventDefault（）意味着您可以保证不会触发默认导航行为。

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

更改

.load(this.href, {}); 

至

.load(this.href);

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