jQuery 和 ASP.NET 自定义验证器

Question

我正在尝试学习 jQuery，我突然想到，我的一些网站中的现有 JS 可以只用几行 jQuery 代码替换。在下面的代码中，我试图通过进行 AJAX 调用来设置自定义验证器的值。第一个代码块不能正常工作，而第二个代码块工作正常。整个“如果它没有坏就不要修复它”的答案没有帮助，我真的很想学习 jQuery。作为记录，我在代码中放置了警报，它们都返回完全相同的结果，只有一个是设置 args 而另一个不是出于某种原因。

为什么这段代码不起作用：

    function CheckForUserName(sender, args)
{
    args.IsValid = true;

    var url = "/somepage.aspx";

    MakeCall(url, function(txt) {
    if (txt == "false") {
        args.IsValid = false;
    }
    });
}

function MakeCall(url,callback) { 
    $.ajax({
        url: url,
        dataType: "text",
        success: callback
    });
}

此代码有效：

    function CheckForUserName(sender, args)
{
        args.IsValid = true;

        var call = MakeCall();
        if (call == "false")
        {
            args.IsValid = false;
        }

}

function MakeCall()
{ 
    var xmlHttp;
    var validation=true;

    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null)
    {
        alert ("Your browser does not support AJAX!");
        return;
    } 

    var url="/somepage.aspx";
    xmlHttp.onreadystatechange=function () 
    {
        if (xmlHttp.readyState==4)
        { 
            if (xmlHttp.status==200)
            {
                return xmlHttp.responseText;
            }
            else
            {
                alert(xmlHttp.status);
            }
        }
    };
    xmlHttp.open("GET",url,false);
    xmlHttp.send(null);
    return xmlHttp.responseText;
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}

Answer 1

为了使其工作，您需要将 async 选项指定为 false：

function MakeCall(url,callback) { 
    $.ajax({
        async: false,
        url: url,
        dataType: "text",
        success: callback
    });
}

Answer 2

这行得通。。忽略我的自定义 javascript 命名空间函数，但你应该明白这个概念。

<script type="text/javascript">
        function VerifyCustomerNumber(s, a) {
            var r = ProcessCustomerNumber(a.Value);
            a.IsValid = r;
        }
        function ProcessCustomerNumber(n) {
            var u = '/Services/WebServices/Customer.asmx/CountByCustomerNumber';
            var d = '{"Number": "' + n + '"}';
            $j.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: u,
                cache: false,
                async: false,
                data: d,
                dataType: "json",
                success: function(r) {
                    var v = Data.JS.Ajax.ParseJSON(r);
                    return v;
                }
            });
        }
    </script>

Answer 3

仅作记录。有一个允许 AJAX 调用的自定义验证器是可能的，但有点复杂。 Here 是一篇关于这个问题的文章。

基本上，必须做这些事情：

1. 说“无效！”立即。
2. 显示“处理中...”消息而不是“无效”消息。
3. 开始您的长期流程，也就是您的 AJAX 请求。
4. 一旦您的请求结束，请将 ClientValidationFunction 替换为虚拟函数。
5. 重置原始消息。
6. 更新验证状态。
7. 重置原始验证功能，但仅在验证控件更改时。

这是完成任务的最终函数（摘自文章）：

//Create our respond functions...
var Respond_True = function (sender, args) { args.IsValid = true; };
var Respond_False = function (sender, args) { args.IsValid = false; };

function AjaxValidator(sender, args, ajaxSettings){
    args.IsValid = false;

    //This is a reference to our validator control
    var $sender = $(sender);

    //Save the original message, color and validation function to restore them later.
    var originalMessage = $sender.text();
    var originalColor = $sender.css("color");
    var originalFunction = sender.clientvalidationfunction;
    var validatedControl = $("#" + sender.controltovalidate);

    //Change the error message for a friendlier one.
    $sender.text("Checking...").css({ color: "black" });

    var setRespondFunction = function (respondFunction) {
        sender.clientvalidationfunction = respondFunction;

        //Reconstitute original styles.
        $sender.text(originalMessage).css({ color: originalColor });

        //Re-validate our control
        ValidatorValidate(sender, null, null);
        ValidatorUpdateIsValid();

        var onChange = function(){
            //Reset the original validation function
            sender.clientvalidationfunction = originalFunction;
            //Re-validate to ensure the original validation function gets called
            ValidatorValidate(sender, null, null);
            ValidatorUpdateIsValid();
            //Ensure the validation function is called just once.
            validatedControl.unbind("change", onChange);
        };
        validatedControl.on("change", onChange);
    }

    var originalSuccessFunction = ajaxSettings.success;
    //Start the AJAX call..
    $.ajax($.extend(ajaxSettings, {
        success: function(data){
            setRespondFunction(originalSuccessFunction(data) ? "Respond_True" : "Respond_False");
        }
    }));
}

这是一个示例用法：

function MyJavascriptValidationFunctionName(sender, args){
    AjaxValidator(sender, args, {
        url: ...,
        type: ...,
        data: ...,
        success: function(data){
            return /*True or false*/;
        }
    });
}