按钮 - 仅当 JavaScript 函数返回 true 时才进行回发答案

【问题标题】：Button - only do a postback if JavaScript function returns true按钮 - 仅当 JavaScript 函数返回 true 时才进行回发
【发布时间】：2012-11-16 19:18:17
【问题描述】：

我在 ASP.NET 中有一个按钮。当用户点击按钮时，我想预先进行一些验证，所以只有在验证方法返回 true 时才会进行回发。

我的想法是使用按钮的 OnClientClick 的逻辑。如果你说 OnClientClick="return false;"，它不会回发，而返回 true 会。但是，这不起作用，因为结果行为是即使我的 jQuery 方法返回，它也不会进行回发。

目前我有：

标记：

<asp:Button runat="server" ID="ReplyBtn" OnClientClick="return ValidateInput();" OnClick="ReplyBtn_Click" CssClass="btn-large btn-success"
    Text="Answer" />

JavaScript：

function ValidateInput() {
        var value = stripHtml(CKEDITOR.instances['ReplyBox'].getData()).trim();
        var options = {
            type: "POST",
            url: "../../Services/ForumOperationService.svc/ReplyToPostFeedback",
            data: '{"content":"' + value + '"}',
            async: false,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg) {
                $("#StatusReplyLbl").text(msg.ReplyToPostFeedbackResult);

                if (msg.ReplyToPostFeedbackResult) {
                    return false;
                } else {
                    return true;
                }

            },
            error: function () {
                return true;
            }
        };
        $.ajax(options);
        return false;
    }

    function stripHtml(str) {
        return $('<div />', { html: str }).text();
    }

所以基本上，这段代码有什么问题？以及如何在回发之前对我的按钮执行验证？

【问题讨论】：

标签： javascript jquery asp.net validation postback

【解决方案1】：

您的函数无条件返回false，因为您没有使用来自 ajax 对象的响应。例如，假设您的服务器端脚本在验证成功时返回文本“OK”。你可以试试这样的：

function ValidateInput() {
    var value = stripHtml(CKEDITOR.instances['ReplyBox'].getData()).trim();
    var options = {
        type: "POST",
        url: "../../Services/ForumOperationService.svc/ReplyToPostFeedback",
        data: '{"content":"' + value + '"}',
        async: false,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            $("#StatusReplyLbl").text(msg.ReplyToPostFeedbackResult);
        }
    };
    var resp = $.ajax(options);
    return (resp.status==200 && resp.responseText == "OK");
}

理想情况下，您要做的是无条件返回 false，并在成功处理程序中自己触发回发。

【讨论】：

谢谢 - 该解决方案有效并且短期内有效。.. :-) 我们将明确考虑触发回发。再次感谢。

【解决方案2】：

不是 100% 满足您的要求，但我认为问题在于即使您希望它从 ajax 请求返回 true，该函数也总是返回 false？

如上所述，运行 async 的 ajax 会导致这不起作用，但看起来您将 async 设置为 false。

问题是你的回报。

返回真； ajax函数内部返回的是ajax调用的成功函数，而不是整个函数。

我认为这不是实现目标的最佳方式，但根据您已有的代码，我认为这是您需要的。

function ValidateInput() {
    var replayToPost = false;
    var value = stripHtml(CKEDITOR.instances['ReplyBox'].getData()).trim();
    var options = {
        type: "POST",
        url: "../../Services/ForumOperationService.svc/ReplyToPostFeedback",
        data: '{"content":"' + value + '"}',
        async: false,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            $("#StatusReplyLbl").text(msg.ReplyToPostFeedbackResult);

            if (msg.ReplyToPostFeedbackResult) {
                replayToPost = false;
            } else {
                replayToPost = true;
            }

        },
        error: function () {
            return true;
        }
    };
    $.ajax(options);
    return replyToPost;
}

【讨论】：

【解决方案3】：

您的 ajax 函数中的返回结果将是成功或错误方法的返回，因此它不会被 ValidateInput() 方法处理。您需要在 ajax 调用范围之外声明一个变量，然后返回该结果。

function ValidateInput() {
    var value = stripHtml(CKEDITOR.instances['ReplyBox'].getData()).trim();
    var result = false;

    $.post("../../Services/ForumOperationService.svc/ReplyToPostFeedback", '{"content":"' + value + '"}', function (msg) {
            $("#StatusReplyLbl").text(msg.ReplyToPostFeedbackResult);
            if (!msg.ReplyToPostFeedbackResult){
                result = true;
            }
    });

    return result;
}

【讨论】：