Как остановить перенаправление с частичной страницы после отправки формы

Question

Имея вопрос, у меня есть PartialView именем Manage, я загружаю парциальное в:

контроллер AdminPanel, Вид AdminProfile так:

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

Когда Я нажимаю на сохранение изменений. Я перенаправляюсь на /Account/Manage, это должно быть /AdminPanel/AdminProfile?

Не уверен, что если контроллер возвращает правильный редирект или информацию для JSON, если я пытаюсь использовать AJAX скрипт:

public ActionResult Manage(ManageMessageId? message) 
    { 
     ViewBag.StatusMessage = 
      message == ManageMessageId.ChangePasswordSuccess ? "Your password has been changed." 
      : message == ManageMessageId.SetPasswordSuccess ? "Your password has been set." 
      : message == ManageMessageId.RemoveLoginSuccess ? "The external login was removed." 
      : ""; 
     ViewBag.HasLocalPassword = OAuthWebSecurity.HasLocalAccount(WebSecurity.GetUserId(User.Identity.Name)); 
     ViewBag.ReturnUrl = Url.Action("Manage"); 
     return View(); 
    } 
public ActionResult Manage(LocalPasswordModel model) 
{ 
    bool hasLocalAccount = OAuthWebSecurity.HasLocalAccount(WebSecurity.GetUserId(User.Identity.Name)); 
    ViewBag.HasLocalPassword = hasLocalAccount; 

      ViewBag.ReturnUrl = Url.Action("AdminProfile", "AdminPanel"); 
     //ViewBag.ReturnUrl = Url.Action("Manage"); 


    if (hasLocalAccount) 
    { 
     if (ModelState.IsValid) 
     { 
      // ChangePassword will throw an exception rather than return false in certain failure scenarios. 
      bool changePasswordSucceeded; 
      try 
      { 
       changePasswordSucceeded = WebSecurity.ChangePassword(User.Identity.Name, model.OldPassword, model.NewPassword); 
      } 
      catch (Exception) 
      { 
       changePasswordSucceeded = false; 
      } 

      if (changePasswordSucceeded) 
      { 
        return RedirectToAction("AdminProfile", "AdminPanel", new { Message = ManageMessageId.ChangePasswordSuccess }); 

      } 
      else 
      { 
       ModelState.AddModelError("", "The current password is incorrect or the new password is invalid."); 
      } 
     } 
    } 
    else 
    { 
     // User does not have a local password so remove any validation errors caused by a missing 
     // OldPassword field 
     ModelState state = ModelState["OldPassword"]; 
     if (state != null) 
     { 
      state.Errors.Clear(); 
     } 

     if (ModelState.IsValid) 
     { 
      try 
      { 
       WebSecurity.CreateAccount(User.Identity.Name, model.NewPassword); 
       return RedirectToAction("AdminProfile", "AdminPanel", new { Message = ManageMessageId.ChangePasswordSuccess }); 
      } 
      catch (Exception) 
      { 
       ModelState.AddModelError("", String.Format("Unable to create local account. An account with the name \"{0}\" may already exist.", User.Identity.Name)); 
      } 
     } 
    } 

    // If we got this far, something failed, redisplay form 
    //return PartialView("Manage", model); 
    return Json(new { redirectTo = Url.Action("AdminProfile", "AdminPanel") }); 
} 

Это часть страницы, которая загружена:

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

Сценарий ниже размещен в _LayoutPage, однако, как упоминалось в комментариях, он ничего не делает.

<script type="text/javascript"> 
     $.ajax({ 
      type: "POST", 
      url: '@Url.Action("Manage", "Account")', 
      data: $('form').serialize(), 
      success: function (result) { 
       if (result.redirectTo) { 
        // The operation was a success on the server as it returned 
        // a JSON objet with an url property pointing to the location 
        // you would like to redirect to => now use the window.location.href 
        // property to redirect the client to this location 
        window.location.href = result.redirectTo; 
       } else { 
        // The server returned a partial view => let's refresh 
        // the corresponding section of our DOM with it 
        $(".tab-2").html(result); 
       } 
      }, 
      error: function() { 

      } 
     }); 
    </script> 

Все, что я пытаюсь сделать, это остановить перенаправление после отправки, я открыл это Баунти. Было бы неплохо, если бы вы могли также включить, как я мог получать сообщения о статусе, а также после того, как пользователь попадает в submit.

Например пользователь нажимает сохранить изменения> сохраняет на сервер> Сообщения затем отправлены обратно в частичных страницах (все без перенаправления)

Answer 1

Во-первых, вам нужно украсить ваш результат POST как сообщение.

[HttpPost] 
public ActionResult Manage(LocalPasswordModel model){ 

Во-вторых, вы можете избавиться от JavaScript в целом путем проверки правильности формы представить результат в контроллере , и это будет управлять перенаправляется ли пользователь или нет.

[HttpPost] 
public ActionResult Manage(LocalPasswordModel model){ 

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

} 

Наконец, я не вижу, где вы на самом деле положили jquery. Он должен быть помещен в конец страницы вашей формы в разделе вашего скрипта. Вы упомянули, что это на вашей странице макета?

Я думаю, что эта ссылка также может помочь, jQuery.post(), также event.preventDefault() также полезен для предотвращения отправки заявки на отправку формы.

Контролировать где конкретно вы хотите перенаправить, добавить переадресовывает на каждом месте есть результат, например: Пожалуйста, обратите внимание, я только возвращение к adminprofile как это то, что оп хочет

if (changePasswordSucceeded) 
{ 
    return RedirectToAction("AdminProfile", "AdminPanel", new { Message = ManageMessageId.ChangePasswordSuccess }); 

} 
else 
{ 
    ModelState.AddModelError("", "The current password is incorrect or the new password is invalid."); 
    return RedirectToAction("AdminProfile", "AdminPanel"); 
} 

как Замечание, вам нужно продумать ход выполнения программы, чтобы решить, как вы хотите управлять недопустимые попытки и т.д.

Answer 2

Является ли это, потому что, когда вы нажимаете сохранить его делать регулярный HTTP POST на сервер на страницу «Учетная запись/Управление», чтобы вы перенаправлялись. Таким образом, ваш javascript никогда не работает?

попробуйте использовать Ajax.BeginForm или изменив кнопку сохранения, чтобы использовать ваш javascript.

Answer 3

Если вы отправляете свои данные формы с помощью AJAX, то просто в функции представить

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

А в функции представить

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

return false; //last line in the function 
} 

Answer 4

Использование Ajax представить в правильном направлении, как? приложить к событию отправки формы, ухватить событие отправки, остановить пост, опубликовать его из javscript и обработать ответ при успехе.

Замените ваш _LayoutPage js следующим, убедитесь, что вы используете идентификатор, чтобы идентифицировать форму, если не этот 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); 
      } 
    } 
}); 

Answer 5

Вы также можете перемещать кнопку html вне формы.