Устранение неполадок при вызове jQuery AJAX с использованием универсального обработчика в ASP.NET - PullRequest
Новая
       20

Устранение неполадок при вызове jQuery AJAX с использованием универсального обработчика в ASP.NET

3 голосов
/ 02 января 2012

Каков наилучший метод устранения неполадок вызова jQuery AJAX с ASP.NET?Функция ошибки вызывается - я получаю всплывающее окно с предупреждением «Ошибка», но я не знаю почему.Когда я присоединяюсь к своему процессу (w3wp.exe) и помещаю точку останова в код моего общего метода-обработчика ProcessRequest, он на этом не останавливается.Так что это даже не до обработчика.Почему это так?

Это также только выполняет функцию ошибки каждый раз, когда я нажимаю на мою кнопку поиска (BtnUCSSearch).И у меня нет возможности нажать окей во всплывающем окне «Ошибка», как обычное предупреждение JavaScript.Мерцает и уходит.Я попытался вставить возвращаемое значение false, чтобы предотвратить обратную передачу всей страницы, но это не помогло.

Запрос страницы JavaScript: 

    jQuery("#<%=BtnUCSSearch.ClientID %>").click(function() {

        urlToHandler = '/Accessioning/FullDataEntry/AddressSearch.ashx';
        // hard coding input values for now
        jsonData = '{ "CompanyName":"xxx", "PrimaryPhone":"555-555-5555", "PostalCode":"55555" }';
        jQuery.ajax({
            url: urlToHandler,
            data: jsonData,
            dataType: 'json',
            type: 'POST',
            contentType: 'application/json',
            success: function(data) {
                alert(data.UCSAddress);                 
            },
            error: function(data, status, jqXHR) {
                alert('Error');                 
            }
        }); // end jQuery.ajax

    });

Страница ответа для кода вызова AJAX (AddressSearch.ashx.vb): 

Imports System
Imports System.Web
Imports System.Web.Services
Imports System.Web.HttpContext

<WebService([Namespace]:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
Public Class AddressSearch
    Implements System.Web.IHttpHandler
    Implements System.Web.SessionState.IReadOnlySessionState

    ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property

    Public Sub ProcessRequest(ByVal context As HttpContext) Implements System.Web.IHttpHandler.ProcessRequest

        context.Response.ContentType = "application/json"    

        Dim companyName As String = DirectCast(HttpContext.Current.Request.Form("CompanyName"), String)
        Dim primaryPhone As String = DirectCast(HttpContext.Current.Request.Form("PrimaryPhone"), String)
        Dim postalCode As String = DirectCast(HttpContext.Current.Request.Form("PostalCode"), String)

        Dim json As String = "{ ""UCSAddress"": ""xxxxxxxxx"" }"
        context.Response.Write(json)

    End Sub

End Class

=============================

1/2/2012 @ 12:49 pm update

В соответствии с этими двумя ответами, я сделал немного больше устранения неполадок ..

способ, которым я получал параметры строки запроса, не работал с помощью формы.Так что теперь я использую QueryString вместо этого.Страница все еще правильно возвращала объект JSON.Но по крайней мере мои параметры строки запроса теперь должны работать.Однако в этом упражнении я явно вызывал свой универсальный обработчик непосредственно из браузера, а не через вызов jQuery.ajax.Так что я знаю, что теперь страница работает хорошо.

https://localhost/Accessioning/FullDataEntry/AddressSearch.ashx?CompanyName=xxx&PrimaryPhone=555-555-5555&PostalCode=55555

Ответ:

{"responseProperty": "xxxxxxxxx"}

Обратите внимание, я использовал оба метода ... даже подход, предложенный мистером Дуарте (JavaScriptSerializer).Они оба работают одинаково .. просто немного другая архитектура.Обратите внимание, что мне пришлось создать собственный класс с именем SimpleResponse. 

Public Sub ProcessRequest(ByVal context As HttpContext) Implements System.Web.IHttpHandler.ProcessRequest

    ' architecture #1 without JavaScriptSerializer (works)

    context.Response.ContentType = "application/json"
    Dim companyName As String = DirectCast(HttpContext.Current.Request.QueryString("CompanyName"), String)
    Dim primaryPhone As String = DirectCast(HttpContext.Current.Request.QueryString("PrimaryPhone"), String)
    Dim postalCode As String = DirectCast(HttpContext.Current.Request.QueryString("PostalCode"), String)
    Dim json As String = "{ ""responseProperty"": ""xxxxxxxxx"" }"
    context.Response.Write(json)

    ' architecture #2 with JavaScriptSerializer and SimpleResponse class (also works)

    'context.Response.ContentType = "application/json"
    'Dim json As JavaScriptSerializer = New JavaScriptSerializer()
    'context.Response.Write(json.Serialize(New SimpleResponse()))
    'http://codereview.stackexchange.com/questions/3208/basic-simple-asp-net-jquery-json-example

End Sub

Public Class SimpleResponse

    Public Property responseProperty() As String
        Get
            Return _responseProperty
        End Get
        Set(ByVal value As String)
            _responseProperty = value
        End Set
    End Property
    Private _responseProperty As String

    Public Sub New()
        _responseProperty = "reponse via SimpleResponse class"
    End Sub

End Class

================

Я также попытался обернуть мои jsonData с помощью JSON.stringify .. Я все еще получаю ошибку.Первоначально jQuery даже не вызывал страницу, потому что имя класса в обработчике имело «1» в конце.Когда я создал универсальный обработчик, он добавил «1», потому что у меня уже была страница и код позади класса с именем AddressSearch.aspx.С тех пор я исправил это.Мне пришлось искать «AddressSearch1», потому что я не мог напрямую редактировать файл, дважды щелкнув его в обозревателе решений. 

<%@ WebHandler Language="VB" CodeBehind="AddressSearch.ashx.vb" Class="UI.Web.AddressSearch1" %>

===============

Теперь это по крайней мере вызывает мой код, но не передает параметры строки запроса с данными, которые я установил в jsonData (которые я также stringify'ed).Это также все еще выбрасывает ошибки.

Также поставьте "var" перед моими переменными JS.

Мы приближаемся. 

    jQuery("#<%=BtnUCSSearch.ClientID %>").click(function() {

        var urlToHandler = 'AddressSearch.ashx';
        //var urlToHandler = '~/Accessioning/FullDataEntry/AddressSearch.ashx';
        //urlToHandler = '/Accessioning/FullDataEntry/AddressSearch.ashx';
        // hard coding input values for now
        var jsonData = '{ CompanyName:"xxx", PrimaryPhone:"555-555-5555", PostalCode:"55555" }';
        //var jsonData = [{ CompanyName: "xxx", PrimaryPhone: "555-555-5555", PostalCode: "55555"}];
        jQuery.ajax({
            url: urlToHandler,
            data: JSON.stringify(jsonData),
            dataType: 'json',
            type: 'POST',
            contentType: 'application/json',
            success: function(data) {
                //alert("got here");
                alert(data.responseProperty);
                console.log(" .. response :" + data);
                return false;
            },
            error: function(data, status, jqXHR) {
                alert('Error');
                //console.log("error :" + XMLHttpRequest.responseText);
                //console.log(" .. error :" + data.responseText);
                console.log(" .. error");
                return false;
            }
        }); 

    });

==========================

1/2/2012 @ 1:52 pm

фрагмент кода # 1 (запрос GET): 

    jQuery("#<%=BtnUCSSearch.ClientID %>").click(function() {

        jQuery.get("AddressSearch.ashx", { CompanyName: "xxx", PrimaryPhone: "555", PostalCode: "55555" }, function(data) {
            alert("got here");
            //alert("Data Loaded: " + data.responseProperty);
            return false;
        });

    });

страница вызова через страницу запроса (для # 1):

параметры: http://screencast.com/t/oA0i48O5y7

заголовки: http://screencast.com/t/3khfRjI7

ответ: ничего

вызов страницы через браузер напрямую (для # 1): https://localhost/Accessioning/FullDataEntry/AddressSearch.ashx?CompanyName=xxx&PrimaryPhone=555&PostalCode=55555 ответ (вывод страницы), хотя консоль ничего не говорит: {"responseProperty": "ответ через класс SimpleResponse"}

=====================

фрагмент кода # 2 (тип запроса POST): 

        var urlToHandler = 'AddressSearch.ashx';
        var jsonData = '{ CompanyName:"xxx", PrimaryPhone:"555-555-5555", PostalCode:"55555" }';
        jQuery.ajax({
            url: urlToHandler,
            data: JSON.stringify(jsonData),
            dataType: 'json',
            type: 'POST',
            contentType: 'application/json',
            success: function(data) {
                if (data != null) {
                    alert(data.responseProperty);
                    console.log(" .. response :" + data);
                }
                return false;
            },
            error: function(data, status, jqXHR) {
                if (data != null) {
                    alert("Error: " + data.responseText);
                    console.log(" .. error :" + data.responseText);
                }
                alert("error occurred");
                return false;
            }
        });

страница вызова через страницу запроса (для# 2):

заголовки: http://screencast.com/t/ostM7NKCxT

post: http://screencast.com/t/VKZdgGuOl

ответ: http://screencast.com/t/LP3R8OAm

вызов страницы через браузер напрямую (для# 2): https://localhost/Accessioning/FullDataEntry/AddressSearch.ashx?CompanyName=xxx&PrimaryPhone=555&PostalCode=55555

ответ (вывод страницы), хотя консоль ничего не говорит: {"responseProperty": "ответ через класс SimpleResponse"}

============================

1/2/2012 @ 14:48

1094 * Окончательный код.Обратите внимание на e.preventDefault () и эту строку кода, чтобы предотвратить эту загадочную ошибку.Обе проблемы были оставшимися: jQuery ("# ​​form"). Submit (function () {return false;});Хотя с вызовом e.preventDefault () вам не нужна другая строка.Поэтому я закомментировал это. 
    jQuery(document).ready(function() {

        //jQuery("#form").submit(function() { return false; });

        jQuery("#<%=TxtLastName.ClientID %>").focus();
        //jQuery("#<%=PnlUCSSearch.ClientID %>").hide();

        // START unassigned collection site address search logic
        jQuery("#<%=DDLCollectionSite.ClientID %>").change(function() {
            //alert("hello world: " + this.value);
            if (this.value != "2") {
                jQuery("#<%=PnlUCSSearch.ClientID %>").hide();
                jQuery("#<%=DDLCollectionSite.ClientID %>").focus();
            }
            else {
                jQuery("#<%=PnlUCSSearch.ClientID %>").show();
                jQuery("#<%=TxtUCSCompany.ClientID %>").focus();
            }
        });

        jQuery("#<%=BtnUCSSearch.ClientID %>").click(function(e) {

//          jQuery.get("AddressSearch.ashx", { CompanyName: "xxx", PrimaryPhone: "555", PostalCode: "55555" }, function(data) {
//              alert("Data Loaded: " + data.responseProperty);
//              return false;
//          });

            var urlToHandler = 'AddressSearch.ashx';
            //var urlToHandler = '~/Accessioning/FullDataEntry/AddressSearch.ashx';
            //urlToHandler = '/Accessioning/FullDataEntry/AddressSearch.ashx';
            // hard coding input values for now
            var jsonData = '{ CompanyName:"xxx", PrimaryPhone:"555-555-5555", PostalCode:"55555" }';
            //var jsonData = [{ CompanyName: "xxx", PrimaryPhone: "555-555-5555", PostalCode: "55555"}];
            jQuery.ajax({
                url: urlToHandler,
                data: JSON.stringify(jsonData),
                dataType: 'json',
                type: 'POST',
                contentType: 'application/json',
                success: function(data) {
                    if (data != null) {
                        alert(data.responseProperty);
                        console.log(" .. response :" + data);
                    }

                },
                error: function(data, status, jqXHR) {
                    //if (data != null) {
                    //    alert("Error: " + data.responseText);
                    //    console.log(" .. error :" + data.responseText);
                    //}
                    //alert("error occurred");

                }
            });
            e.preventDefault(); 
        });

        // END unassigned collection site address search logic

    });

Ответы [ 3 ]

3 голосов
/ 03 января 2012

Я попытался ввести возвращаемое значение false, чтобы предотвратить обратную передачу всей страницы, но это не сработало.

Если основная проблема заключается в том, что нажатие кнопки управления вызываетполный пост обратно вместо асинхронного вызова вашего обработчика, вы можете добавить этот код в любом месте вашего обработчика события jQuery click: 

jQuery("#<%=BtnUCSSearch.ClientID %>").click(function(e) {
    // Existing code
    e.preventDefault();
})

Это работает вместо return false, чтобы остановить нормальное поведение браузера для кнопкинажмите.

3 голосов
/ 02 января 2012

Проверьте браузеры console для получения более подробной информации и установите точки останова в ваших обратных вызовах (success, error)

2 голосов
/ 02 января 2012

Прежде всего, позаботьтесь о глобальных переменных в javascript, если возможно откажитесь от этой практики.

Убедитесь, что URL запроса верен и не возвращает ошибку 404.

В данных jquery ajax используйте JSON.stringify ().

А в обработчике asp.net используйте JavascriptSerializer.

Если не работает, запустите с открытой консолью firebug или хромированной консолью. Это очень полезно!

...