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');
}

您需要这样做的原因是因为您在AJAX回调之后使用新的部分刷新DOM的内容，并且不引人注意的验证框架除非您告诉它，否则无法知道这些新元素。您还可以查看similar answer。

Ajax.OnBeginForm（... OnSuccess =“xxx”）总是在初始成功后触发

1 个答案: