在Html的模态中渲染部分视图.ActionLink点击

Render partial view with form in Modal on Html.ActionLink click

本文关键字：视图 ActionLink 点击 染部 Html 模态      更新时间：2023-09-26

我有一个页面，每一行都有一个链接"Move"。

点击链接时，我试图调用控制器GET方法，这将反过来在模态中呈现_MoveReportPartial视图。

一旦用户在模态中做出选择，提交按钮就应该发送到控制器的post方法中。

如果我从Html.ActionLink(...)中删除类属性(move-modal)，它实际上脱离了js文件并忽略了它。然后它的工作原理是打开_MoveReportPartial在一个新的窗口，然后张贴到正确的方法，如果用户点击提交。

我试图让它在模态中打开，但我的js不起作用，路由到POST方法，而不是"移动"单击。

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

原始视图上的move链接如下所示:

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

我认为你没有正确地阻止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来阻止浏览器导航，则解释器可能无法到达返回语句，浏览器将在该点之前继续执行锚标记的默认行为。使用event.preventDefault()作为处理程序的第一行意味着你可以保证默认的导航行为不会被触发。

第二，你的。load方法调用是错误的。

改变
.load(this.href, {}); 


.load(this.href);

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

相关文章：