asp.net - 在 ASP.NET MVC 中客户端验证失败时阻止 jQuery 服务器端调用

Question

我有一个启用了模型验证和客户端验证的 View 页面。我有一个提交按钮，单击该按钮我调用了一个 javascript 函数，该函数使用 jQuery 对服务器进行 AJAX 调用。但是我想在客户端验证失败时停止 AJAX 操作。知道如何做吗？

<% Html.EnableClientValidation(); %>
<% using (Html.BeginForm("", "", FormMethod.Post, new { @class = "hiajax" }))
   {%>
<%= Html.ValidationSummary(true) %>
<div class="formRow">
<%if(Model.ListFacility.Count !=0){ %>
    <%= Html.LabelFor(model => model.ListFacility)%><span class="err">*</span><br />
    <%= Html.DropDownListFor(model => model.ListFacility, (SelectList)ViewData["FacilityBulletin"], new {onChange="updateSiteId()" })%>
   <span class="err"> <%= Html.ValidationMessageFor(model => model.ListFacility) %></span>
    <div class="clear">
</div>
<%} %>
<div class="formRow">
    <%= Html.LabelFor(model => model.FacilityBulletin) %><span class="err">*</span><br />
    <%= Html.TextAreaFor(model => model.FacilityBulletin,  new { @class = "tinymce" })%>
   <span class="err">   <%= Html.ValidationMessageFor(model => model.FacilityBulletin) %></span>
    <div class="clear" />
</div>
<div class="formRow">

        <%=Html.CheckBoxFor(model=>model.Active, new { style = "float: left; margin-right: 10px;" })%>
    <span style="float: left; padding-top: 1px;">Active</span>
    <%=Html.HiddenFor(model=>model.SiteId) %>
</div>
<div class="formRow">       
    <input type="image" name="Save" src='<% =Url.Content("~/images/btn_save.png") %>'  onclick="SaveBulletin();" />
</div>
<% } %>
</div>

这是我的 JavaScript:

function SaveBulletin() {
    tinyMCE.triggerSave();
    $.ajax({
        type: 'POST',
        url: "FacilityBulletin/FacilityBulletin/SaveBulletin",
        data: $("form.hiajax").serialize(),
        success: function (data) { alert(data); }
    });
}

请帮忙。

Answer 1

不要在图像提交按钮上使用 onclick 属性，而是使用 .submit()表单的操作:

$(function() {
    $('form.hiajax').submit(function() {
        tinyMCE.triggerSave();
        $.ajax({
            type: this.method,
            url: this.action,
            data: $(this).serialize(),
            success: function (data) { alert(data); }
        });        
        return false;
    });
});

另请注意，url 不再在 JavaScript 中硬编码，而是从表单的 action 属性中读取。当然，您还需要修复您的 Html.BeginForm ，以便提供表单必须发送到的正确 Controller 和操作。