Question

我有一个包含模型验证和客户端验证的视图页面。我有一个提交按钮，点击后我调用了一个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;
    });
});

还要注意网址在javascript中不再是硬编码的，而是从表单的action属性中读取。当然，您还需要修复Html.BeginForm以便提供适当的控制器和必须发送表单的操作。

Answer 2

虽然不是专门针对MVC，但您可以通过javascript手动调用和检查客户端验证，如下所示：

function SaveBulletin() 
{
    Page_ClientValidate();

    if (Page_IsValid) 
    {
            // do Ajax call
    }
}

在ASP.NET MVC中客户端验证失败时，防止jQuery服务器端调用

2 个答案: