Javascript 表单提交后如何停止从部分页面重定向

出现问题时，我有一个名为

Manage

的partialview，我将该partialview加载到：

控制器

AdminPanel

，查看

AdminProfile

如下：

                        <div id="tab-2" class="tab-pane">
                               @{Html.RenderPartial("~/Views/Account/Manage.cshtml");
                               }
                        </div>

这是加载的部分页面：

 @model LocalPasswordModel
@{
    ViewBag.Title = "Change Password";
}
<section class="hgroup">
    <div class="panel-body">
        <h1>@ViewBag.Title</h1>
        <ul class="breadcrumb pull-right top-right">
            <li>You're logged in as <strong>@User.Identity.Name</strong></li>
        </ul>
        <ul class="message-success">@ViewBag.StatusMessage</ul>
        @using (Html.BeginForm("Manage", "Account", Form.Post, new { @class = "form-horizontal" }))
        {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary()
            <div class="form-group">
                <label class="col-sm-2 control-label">Old Password</label>
                <div class="col-sm-10">
                    @Html.PasswordFor(m => m.OldPassword, new { @class = "form-control" })
                </div>
            </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">New Password</label>
                                            <div class="col-sm-10">
                                                @Html.PasswordFor(m => m.NewPassword, new { @class = "form-control" })
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">Confirm Password</label>
                                            <div class="col-sm-10">
                                                @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-8 col-sm-offset-2">
                                                <input type="submit" class="btn btn-primary" value="Change password" />
                                            </div>
                                        </div>

        }
    </div>
</section>

所有我想做的就是停止重定向后，我提交，我已经打开了这个悬赏。如果您还可以包括我如何在用户点击submit后收到状态消息，那就太好了

---

例如，用户点击save changes>saves to the server>消息然后被发送回部分页面（全部不重定向）

是因为当您按save时，它会向服务器发送一个常规的http post到帐户/管理页面，因此您被重定向。所以你的javascript从来没有真正运行过

---

尝试使用Ajax.begin或更改保存按钮以使用javascript。

首先，您需要将

POST

操作结果修饰为POST

[HttpPost]
public ActionResult Manage(LocalPasswordModel model){

其次，您可以通过 在控制器内测试表单提交结果的有效性 这将管理用户是否被重定向

[HttpPost]
public ActionResult Manage(LocalPasswordModel model){

    if(condition to redirect){
        return RedirectToAction("AdminProfile", "AdminPanel");
    }
    return View(model);

}

最后，我看不出您将jquery放在了什么地方。 它需要放在表单页面的末尾，脚本部分。 你提到它在你的版面页面上

我认为这个链接可能也有帮助，也有助于防止表单提交客户端

为了具体控制您想要重定向到的位置，在每个地方添加重定向都有一个结果，例如：请注意，我只是返回到adminprofile，因为这是op想要的

---

作为旁注，您需要仔细考虑您的程序流程，以决定如何管理无效尝试等。

如果您使用AJAX发布表单数据，则只需在提交函数中

<form onsubmit="mysubmitfunc(event)" ....>

function mysubmitfunc(e)
{
e.preventDefault();
/*
YOUR AJAX CODE GOES HERE
*/

return false; //last line in the function
}

---

如何正确使用ajax提交？附加到表单提交事件，捕获提交事件，停止发布，从javscript发布，并在成功时处理响应

将您的_layoutpagejs替换为next，确保使用ID标识表单，否则此javascript可能会影响其他表单

$(function() { //shorthand document.ready function

    //recommended to use Id on form identification not class... search on google how to
    //attach handler on form submit
    $('.form-horizontal').submit(catchSubmit);


    //custom handler for form submit
    function catchSubmit(event) {
      event.preventDefault(); //stop html form post
      // ajax post with serialized form
      $.post($(this).attr("action"),
         $(this).serialize(),
         postSuccessHandler
      );
    }

   //redirect decizion
   function postSuccessHandler(data) {
     if (data.redirectTo) {
               window.location.href = data.redirectTo;
            } else {                    
                $(".tab-2").html(data);
            }
   }
});

---

您还可以将html按钮移动到表单外部

如果在控制器中的return语句上放置断点，则返回的json是否正确？它甚至不支持调用控制器方法？因此，可以使用ajax.beginform，也可以通过单击“保存”按钮来附加您拥有的javascript。它看起来不像您的

$ajax（）

调用附加到任何DOM事件。请使用

$.ajax（）

或

ajax.beginform（）

但不能同时使用这两种方法。如果您使用

$.ajax（）

将您的

ajax.BeginForm（）

转换为

Html.BeginForm（）

。通常，我们在不想重定向时使用ajax。标准格式的帖子可能会让你的问题消失。为什么您决定在这里使用AJAX？我看不到您在表单提交中调用AJAX函数的任何地方。此外，ajax代码还没有包装在函数中。请使用@yvette和@lewis taylor建议的

[HttpPost]

来装饰您的post操作，并使用

ajax.BeginForm（）

。请不要建议人们在submit属性中添加字符串。在DOM就绪事件中通过javascript正确地附加函数。好吧，主要关注的是preventDefault和返回false，而不是如何附加submit事件。对通过javascript附加事件是一种很好的方法。实际上我意识到ajax脚本没有做任何事情，是我的重定向将我发回。当我没有输入正确的凭据时，我似乎会被重定向回Account/Manage。如果用户输入了正确的凭据，重定向就可以正常工作，但是只要你点击submit使用错误的值或没有值，它会将我发送到帐户/管理。此外，这些消息也不会显示在部分屏幕中。它们只显示在Account/Manage中。现在不显示。我需要将消息发送回并呈现在AdminPanel/AdminProfile中的partial中。配置文件的一部分有一个名为account的选项卡，您可以在其中更改凭据。此选项卡渲染局部视图。我不希望它再重定向到帐户/管理页面。我以为打个电话就可以了，但出于某种原因，这是一项艰巨的任务。

<form onsubmit="mysubmitfunc(event)" ....>

function mysubmitfunc(e)
{
e.preventDefault();
/*
YOUR AJAX CODE GOES HERE
*/

return false; //last line in the function
}

$(function() { //shorthand document.ready function

    //recommended to use Id on form identification not class... search on google how to
    //attach handler on form submit
    $('.form-horizontal').submit(catchSubmit);


    //custom handler for form submit
    function catchSubmit(event) {
      event.preventDefault(); //stop html form post
      // ajax post with serialized form
      $.post($(this).attr("action"),
         $(this).serialize(),
         postSuccessHandler
      );
    }

   //redirect decizion
   function postSuccessHandler(data) {
     if (data.redirectTo) {
               window.location.href = data.redirectTo;
            } else {                    
                $(".tab-2").html(data);
            }
   }
});