兩個部分視圖，將數據發佈到導致問題的操作

Question

我正在爲項目使用MVC 4。我的視圖中的一個具有作爲在其2個局部視圖：

<div id="fPassword"> 
     @Html.Partial("_ForgotPassword",new UserForgotPasswordModel()) 
</div> 
<div id="aLink"> 
     @Html.Partial("_ActivationLink", new UserActivationLinkModel()) 
</div> 

的局部視圖如：

@model Me2Everyone.Web.UI.Models.User.UserForgotPasswordModel 
@using (Html.BeginForm("ForgotPassword", "Home", FormMethod.Post, new { id = "personal-form" })) 
{ 
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="padding: 0px 0 20px 0;"> 
    <tbody> 
     <tr> 
      <td width="375"> 
       <div class="text-problem"> 
        @Html.EditorFor(model => model.Email) 
       </div> 
      </td> 
      <td width="80" valign="bottom"> 
       <input type="submit" value="Send" /> 
      </td> 
     </tr> 
    </tbody> 
</table> 
} 

，第二個是幾乎相同於上述的唯一區別是模型類型和操作方法形式。

在家庭控制器的ForgotPassword動作是：

[HttpPost] 
public ActionResult ForgotPassword(UserForgotPasswordModel model) 
{ 
    if (ModelState.IsValid) 
    { 
     // Search email in database. 
     if(emailNotFound) 
     { 
      model.ErrorMessage = "Email not found."; 
     } 
    } 
    else 
    { 
     model.ErrorMessage = "Email address not found."; 
    } 
    return PartialView("_ForgotPassword", model); 
} 

現在，當我張貼的數據服務器，它返回的局部視圖作爲獨立不是在主視圖，所以我看了看周圍的淨和發現我需要發送Ajax調用它，所以我做了它在作爲父視圖：

<script type="text/javascript"> 
    $(function() { 
     $("form").submit(function() { 
      if ($(this).valid()) { 
       var dataToSend = { model: { Email: $("#Email").val() } }; 
       var serializedForm = $(this).serialize(); 
       var isForgotPassword = true; 
       if ($(this).attr('action').indexOf("ForgotPassword") < 0) 
        isForgotPassword = false; 
       $.ajax({ 
       url: $(this).attr('action'), 
       data: serializedForm, 
       type: 'POST', 
       success: function (data, textStatus, request) { 
        if (isForgotPassword == true) 
         $("#fPassword").html(data); 
        else 
         $("#aLink").html(data); 
       }, 
       error: function (xhr, ajaxOptions, thrownError) 
       { 
        alert('error') 
       } 
      }); 
      return false; 
     } 
    }); 
}); 

並以我父視圖我有：

@if(Model.ErrorMessage != "") 
{ 
    <script type="text/javascript"> 
      alert(@Model.ErrorMessage); 
    </script> 
} 

問題是，當我給一個有效的電子郵件地址，它工作正常，但是當我提供了亙古不變的電子郵件地址存在於數據庫中，我得到的電子郵件沒有發現報警，但是當我再次點擊提交按鈕，局部視圖將在瀏覽器中獨立創建，而不是在父視圖中。

我試圖改變我的父視圖爲：

<div id="fPassword"> 
     @{Html.RenderAction("ForgotPassword");} 
</div> 
<div id="aLink"> 
     @{Html.RenderAction("ActivationLink");} 
</div> 

但還是它不工作，任何想法或幫助？

Answer 1

替換：

$("form").submit(function() { 

有：

$(document).on('submit', 'form', function() { 

這將確保您提交處理程序是在熱鬧方式登記。這意味着在使用來自AJAX調用的內容刷新DOM後，您註冊的提交處理程序將繼續與此新表單關聯。您可以在文檔中閱讀有關.on()方法的更多信息。 .on()取代了已棄用的（甚至在jQuery 1.9中刪除）.live()方法，該方法允許您實現相同的任務。在不推薦使用.live()方法後，他們使用相同的語義引入了.delegate()方法。因此，根據您使用的jQuery版本，您應該選擇正確的方法。