Question

我有一个带有表格的页面，其中每一行都有一个链接＆＃34; Move＆＃34;。

点击链接后，我试图获取控制器GET方法，该方法将在模式中呈现_MoveReportPartial视图。

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

如果我从Html.ActionLink(...)中删除了class属性（move-modal），它实际上会取消js文件并忽略它。然后通过在新窗口中打开_MoveReportPartial然后在用户单击提交时发布到正确的方法来工作。

我试图让它在模态中打开，但js我没有工作并且路由到POST方法而不是＆＃34;移动＆＃34;单击。

修改为什么.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上的文档声明＆＃34;如果数据作为对象提供，则使用POST方法;否则，假设GET。＆＃34;因为您正在向它发送一个空对象，所以它假定您要使用POST。没有必要这样做。

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

1 个答案: