在提交表单之前调用Ajax

Question

在使用ajax提交表单之前,我需要检查数据库中是否已存在数据.最常见的情况是检查用户名和电子邮件的可用性.

它不工作,但我测试了ajax功能,而没有使用from控件,它工作正常.该项目是在MVC 3 VB中创建的.

使用Javascript:

$('#addSalesPeople').click(function () {
   $.post("ajax_functions/checkDuplicate.cshtml",
   {
      extension: document.getElementById('Extension').value,
      initials: document.getElementById('Initials').value
   },
      function (data, status) {
      alert("Data: " + data + "\nStatus: " + status);
   });
});

HTML:

@Using Html.BeginForm("Create", "SalesPeople", FormMethod.Post)
@Html.ValidationSummary(True)
@<fieldset>  
    ............................
    ..............................  

    @Html.TextBoxFor(Function(model) model.Extension, New With {.onkeyup = "javascript: charCounter(this,4);", .onblur = "javascript: zeroPad(this, 4)"})

    @Html.TextBoxFor(Function(model) model.Initials)

    <input id="addSalesPeople" class="btn span2" type="submit" value="Add" />

</fieldset>

-谢谢

Answer 1

您需要观察submit表单的事件.

代替

$('#addSalesPeople').click(function () {

使用

$('#theFormId').submit(function () {

见:http://api.jquery.com/submit/

您也可以禁用表单提交并稍后手动发送:

$( '#theFormId' ).submit( function ( event ) {

    event.preventDefault();

    /* your AJAX code */

    $( '#theFormId' ).submit();
} );

Answer 2

我发布了一个真正经过测试的代码.

HTML:@using中的简单表单发布按钮

(Html.BeginForm())
{

//use your text box or other control here 
<input type="submit" id="Create" value="Create" class="btn btn-primary" />

}

JavaScript的:

<script>

    $(document).ready(function () {

        $("form").submit(function (e) {
            e.preventDefault(); //prevent default form submit

            if ($(this).valid()) {

                var UserId= $('#UserId').val();

                $.ajax({
                    url: '/Home/CheckUserExist/',        //ControllerName/ActionName/
                    data: {
                        UserId: UserId                      
                    },
                    success: function (data) {
                        showMsg(data);
                    },
                    cache: false
                });
            }
        });

    });

    function showMsg(hasCurrentJob) {
        if (hasCurrentJob != "OK") {

            alert(hasCurrentJob);
            return false;
        } else {

    //if check is ok than from post to controller 

            $("form").unbind('submit').submit();
        }
    }

</script>


MVC Controller:

 public async Task<JsonResult> CheckUserExist(int UserId)
    {
            //condition for user check 

        if (UserExist==true)
        {
            return Json("User Exist Please choose another user name or etc", JsonRequestBehavior.AllowGet);         
    }

        return Json("OK", JsonRequestBehavior.AllowGet);
    }

如果您有任何疑问,请发邮件给我vishalroxx7@gmail.com.