Ajax腳本無法使用表單提交？

我有一個問題，我正在加載一個局部頁面，但是當我點擊保存按鈕時，我不希望這個頁面上的窗體重定向。Ajax腳本無法使用表單提交？

不知道我是否以正確的方式使用腳本，我想在點擊提交後發佈給控制器，但我希望被重定向回到同一頁面（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") }); 
}

Partialview與腳本：

@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

來源

2015-10-19 Garrith Graham

使用'event.preventDefault（）;'或'返回false;'從事件處理中'if'聲明 – Tushar

你在if語句裏面提到下面的答案說它在if之外？ –

如果表單無效，默認情況下，驗證插件將阻止表單提交，只有當表單有效並且您想要使用_ajax_ – Tushar

你應該改變你的代碼像這樣：

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

來源

2015-10-19 13:49:28 ImanKazemi

在你的函數 – ImanKazemi

結束時加入返回false也是一樣的。仍然將我重定向到帳戶/管理頁面，然後返回Json數據。 –

不是一個好主意的好友。 –

您已經附加了AJAX調用，但忘記阻止默認的提交事件。因此，使用event.preventDefault()：

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

來源

2015-10-19 13:31:25

仍將我發送到同一頁面。 –

@GarrithGraham你能顯示一個活的URL嗎？ –

控制檯中的任何錯誤？ –

Ajax腳本無法使用表單提交？

回答

相關問題