在 Ajax 调用中验证数据库中的现有代码

Question

我不明白为什么我的代码不起作用。我正在尝试通过调用控制器中的函数来验证代码。如果此代码已经存在，我只需发送 'failed' 文本，然后我希望表单停止提交。但这不起作用。即使我遇到失败错误，我的表单也不会通过提交而停止。

这里是查看代码

脚本

$(document).ready(function () {
    $('#signupform').submit(function () {

        var code = $('#txtcode').val();
        alert(code);
        if (code.length > 0) {

            //validate email
            $.ajax({
                type: "POST",
                url: "@(Url.Action("CheckCode", "Home"))",
                data: {
                    "code": code,
                    "type": "Data"
                },
                success: function (returndata) {
                    if (returndata.match('failed')) {
                        alert(returndata);
                        return false;
                    }
                }
            });
        }
    });
});

表格

@using (Html.BeginForm("ManipuleInfo", "Home", FormMethod.Post, new { enctype = "multipart/form-data", id = "signupform", name = "signupform" }))
{
    <div>
        <table>
            <tr>
                <td>
                    Code:
                </td>
                <td>
                    @Html.HiddenFor(m => m.Id)
                    @Html.TextBoxFor(m => m.Code, new { @id = "txtcode", @name = "txtcode", @required = "required" })
                </td>
            </tr>
            <tr>
                <td>
                    Title:
                </td>
                <td>
                    @Html.TextBoxFor(m => m.Name)
                </td>
            </tr>
            <tr>
                <td>
                    Sub- Type:
                </td>
                <td>
                    @Html.DropDownListFor(m => m.SubType, listItemsmode)
                </td>
            </tr>
            <tr>
                <td>
                    Subscriber Type:
                </td>
                <td>
                    @Html.DropDownListFor(m => m.SubscriberType, listItemstypes)
                </td>
            </tr>
            <tr>
                <td>
                    <label> Live:</label>
                </td>
                <td>
                    @Html.CheckBoxFor(m => m.Published)
                </td>
            </tr>
            <tr>
                <td></td>
                <td colspan="2">
                    <label> Press add button to start adding fields!</label>
                    <table id="Controls" style="display: none"></table>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <div style="text-align:right">
                        <input type="submit" value="Save" class="btnStyle" name="btnSaveData" />
                        <input type="button" value="Cancel" onclick="return Cancel()" class="btnStyle" />
                    </div>
                </td>
            </tr>
        </table>
    </div>
}

控制器

public ActionResult CheckCode(string type, string code)
{
    try
    {
        WCMSDataContext wcmsContext = new WCMSDataContext();

        if (type == "Data")
        {
            var Objp = from p in wcmsContext.Packages.Where(p => p.Code == code && p.Type == "Data") select p;
            if (Objp.Count() > 0)
            {
                return Json("failed");
            }
        }

        return Json("success");
    }
    catch (Exception ex)
    {
        throw ex;
    }
}

Answer 1

防止默认停止表单进行回发。检查下面的更新代码：

 $(document).ready(function () {
        $('#signupform').submit(function (e) {
             e.preventDefault();
            var code = $('#txtcode').val();
            alert(code);
            if (code.length > 0) {

                //validate email
                $.ajax({
                    type: "POST",
                    url: "@(Url.Action("CheckCode", "Home"))",
                    data: {
                        "code": code,
                        "type": "Data"
                    },
                    success: function (returndata) {
                        if (returndata.match('failed')) {
                            alert(returndata);
                            return false;
                        }
                    }
                });
            }                    
        });
    });
</script>

Answer 2

验证电子邮件的请求是异步的（阅读常见问题 here），因此它不会停止执行下面的代码并提交表单。另外 return false 代码在其他函数中，不会停止表单提交。

可以执行以下操作：

第一个选项： 使 ajax 调用同步。定义 isValid 变量。请求完成后，将值分配给 isValid。然后检查 isValid 是否为假并停止提交表单。

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

    var isValid = false;

    var code = $('#txtcode').val();
    alert(code);
    if (code.length > 0) {
        //validate email
        $.ajax({
            async: false,
            type: "POST",
            url: "@(Url.Action("CheckCode", "Home"))",
            data: {
                "code": code,
                "type": "Data"
            },
            success: function (returndata) {
                if (returndata.match('success')) {
                    alert(returndata);
                    isValid = true;
                }
            }
        });

        if (!isValid)
           return false;
    }
});

第二个选项： 添加 'btnSubmit' id 以提交 btn 以便于 DOM 操作。从表单中删除提交事件。为提交按钮附加点击事件。防止它的默认行为。检查发送异步请求以检查有效性。成功回调检查数据是否有效以及是否有效提交表单。

$('#btnSubmit').click(function () {
    var code = $('#txtcode').val();

    if (code.length > 0) {
        //validate email
        $.ajax({
            type: "POST",
            url: "@(Url.Action("CheckCode", "Home"))",
            data: {
                "code": code,
                "type": "Data"
            },
            success: function (returndata) {
                if (returndata.match('success')) {
                    $('#signupform').submit();
                }
            }
        });

        return false;
    }
});

我假设只有在 code.length > 0 时才应该进行验证，但是如果应该进行验证，请始终将 return false 部分移到此 if 条件之后。

注意： 如果验证仅针对 'valid email'，则可以通过 javascript 在客户端完成，无需服务器请求。例如，服务器请求有效性应该是为了电子邮件的唯一性。

在 Ajax 调用中验证数据库中的现有代码

Validating Existing Code from Database in Ajax Call

c#

ajax

jquery

asp.net-ajax

asp.net-mvc-4