Ajax.OnBeginForm（...的onSuccess =「XXX」）的初步成功後，始終閃光

Question

我使用VS2012/C＃/ MVC 4

我想發表「聯繫我們」的形式，而不刷新整個頁。一切都很好，如果我錯過任何必填字段並且OnSuccess未被解僱，驗證會在第一時間開始。成功發佈表單（不缺少任何必填字段）後，即使驗證失敗（缺少必填字段），每個額外的發佈都會導致OnSuccess觸發。紅色感嘆號顯示正確，控制器「知道」它失敗，但ajax OnSuccess似乎並不知道新的故障。

ContactUsForm.cshtml（partialView）：

@model contactdemo.Models.ContactUsDetails 

    <div id="formContainer"> 
    @using (Ajax.BeginForm("ContactUsForm", new AjaxOptions { UpdateTargetId = "formContainer", OnSuccess = "displaySuccess" })) 
    {  
    <strong>Send To: </strong> 
    <div> 
     @Html.DevExpress().ComboBoxFor(model => model.ContactID, 
      settings => 
      { 
       settings.ShowModelErrors = true; 
       settings.Width = System.Web.UI.WebControls.Unit.Percentage(100); 
       settings.Name = "ContactID"; 
       settings.Properties.ValueField = "ContactID"; 
       settings.Properties.ValueType = typeof(int); 
       settings.Properties.TextField = "ContactName"; 
       settings.ControlStyle.CssClass = "contactUsCombo"; 
     }).BindList(Session["Names"]).GetHtml() 
    </div> 
    <div> 
     @Html.DevExpress().LabelFor(m => m.Subject).GetHtml() 
     @Html.DevExpress().TextBoxFor(m => m.Subject, 
      settings => 
      { 
       settings.ShowModelErrors = true; 
       settings.Width = System.Web.UI.WebControls.Unit.Percentage(100); 
       settings.ControlStyle.CssClass = "subjectText"; 
      }).GetHtml() 
    </div> 
    <div> 
     @Html.DevExpress().LabelFor(m => m.Message).GetHtml() 
     @Html.DevExpress().MemoFor(m => m.Message, 
      settings => 
      { 
       settings.ShowModelErrors = true; 
       settings.Height = 50; 
       settings.Width = System.Web.UI.WebControls.Unit.Percentage(100); 
       settings.ControlStyle.CssClass = "memoText"; 
      }).GetHtml() 
    </div> 
    <div> 
     @Html.DevExpress().Button(
      settings => 
      { 
       settings.Name = "btnSubmit"; 
       settings.Text = "Send Message"; 
       settings.UseSubmitBehavior = true; 
       settings.ControlStyle.CssClass = "contactUsCombo"; 
      }).GetHtml() 
    </div>  
} 

HomeController.cs：

namespace contactdemo.Controllers 
{ 
[OutputCacheAttribute(VaryByParam = "*", Duration = 1, NoStore = true)] 
public class HomeController : Controller 
{ 
    <snip...> 

    [HttpGet] 
    [OutputCache(Duration = 60, VaryByParam = "*")] 
    public ActionResult ContactUsForm() 
    { 
     return PartialView(new ContactUsDetails()); 
    } 

    [HttpPost] 
    public ActionResult ContactUsForm(ContactUsDetails data) 
    { 
     if (ModelState.IsValid) 
     { 
      return PartialView(new ContactUsDetails()); 
     } 
     else 
     { 
      return PartialView(data); 
     } 
    } 
} 

Index.cshtml：

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> 

<script type="text/javascript"> 
function displaySuccess(result) { 
    alert("Sent Successfully"); 
} 
</script> 

Answer 1

確保您displaySuccess回調裏面你重新裝上不顯眼的驗證處理新添加的內容到DOM：

function displaySuccess(result) { 
    $('#formContainer form').removeData('validator'); 
    $('#formContainer form').removeData('unobtrusiveValidation'); 
    $.validator.unobtrusive.parse('#formContainer form'); 

    alert('Sent Successfully'); 
} 

，你需要做的原因是因爲你刷新的內容你DOM與AJAX回調之後的新部分以及不顯眼的驗證框架無法知道這些新元素，除非您告訴它。你也可以看看similar answer。