JQuery и ASP.NET Custom Validator

Question

Я пытаюсь изучить jQuery, и мне пришло в голову, что существующий JS на некоторых из моих сайтов может быть заменен несколькими строками кода jQuery. В следующем коде я пытаюсь установить значение пользовательского валидатора с помощью вызова AJAX. Первый блок кода не работает должным образом, тогда как второй блок работает нормально. Весь ответ «если не сломал, не чини», не поможет, я действительно хочу изучить jQuery. Для справки, я поместил предупреждения в код, и они оба возвращают один и тот же результат, только один устанавливает аргументы, а другой нет по какой-то причине.

Почему этот код НЕ работает:

    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

Для того, чтобы она работала, вам нужно указать асинхронную опцию как false:

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

Answer 2

Только для записи. Наличие собственного валидатора, который позволяет AJAX-вызовы, возможно, но немного сложно. Здесь - статья о проблеме.

По сути, нужно сделать следующее:

1. Скажи "Неверно!" немедленно.
2. Показывать сообщение «обработка ...» вместо вашего «недействительного» сообщения.
3. Начните длительный процесс, AKA свой запрос 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*/;
        }
    });
}

Answer 3

Это работает на ваше усмотрение ... игнорируйте мои пользовательские функции пространства имен 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>