Question

我有一个问题，我正在加载部分页面，但是当我点击保存按钮时，我不希望此页面上的表单重定向。

我不确定我是否以正确的方式使用脚本，我想在点击提交时发布到控制器，但我想重定向回我所在的同一页面（AdminPanel/AdminProfile）而不是重定向到另一个控制器/视图（Account/Manage）。

AdminProfile查看：

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

不确定我的脚本是应该进入此视图还是保留在局部视图中？

控制器：

public ActionResult Manage(LocalPasswordModel model)
{
    //....
    return Json(new { redirectTo = Url.Action("AdminProfile", "AdminPanel") });
}

使用脚本进行部分查看：

@model LocalPasswordModel
@{
    ViewBag.Title = "Change Password";
}
<section class="hgroup">
    <div class="panel-body">       
        <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", FormMethod.Post, new { id = "SavePassword", @class = "form-horizontal" }))
    {
        <div class="social_sign">
            <h3>Change your password.</h3>
        </div>
                                        @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-12 col">
                                                <input type="submit" class="btn btn-primary pull-right" value="Change password" />
                                            </div>
                                        </div>

    }
    </div>
</section>

上面视图中的脚本：

@section Scripts {
    <script>
        $('#SavePassword').submit(function () 
        {
            if ($(this).valid()) 
            {
                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) 
                    {
                        if (result.redirectTo) 
                        {
                            window.location.href = result.redirectTo;
                        } 
                        else 
                        {
                            $(".tab-2").html(result);
                        }
                    },
                    error: function () 
                    {

                    }
                });
          }
    })
    </script>
    @Scripts.Render("~/bundles/jqueryval")
}

似乎没有任何事情我得到的是一个带有{"redirectTo":"/AdminPanel/AdminProfile"}的空白页面。哪个是网址：http://localhost:57239/Account/Manage

Answer 1

你应该改变你的代码：

<script>
    $('#SavePassword').submit(function () 
    {
        if ($(this).valid()) 
        {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) 
                {
                    if (result.redirectTo) 
                    {
                        window.location.href = result.redirectTo;
                    } 
                    else 
                    {
                        $(".tab-2").html(result);
                    }
                },
                error: function () 
                {

                }
            });
      }

     return false;
    })
</script>

Answer 2

您已经附加了AJAX调用，但忘记阻止默认提交事件。因此，请使用event.preventDefault()：

$('#SavePassword').submit(function (e) {
  e.preventDefault();
  // Rest of your code.
  if ($(this).valid())

Ajax脚本无法处理表单提交？

2 个答案: