jquery - ASP.NET でジェネリックハンドラーを使用した jQuery AJAX 呼び出しのトラブルシューティング

Question

ASP.NET での jQuery AJAX 呼び出しのトラブルシューティングに最適な方法は何ですか? エラー関数が呼び出されています。「エラー」というアラートがポップアップに表示されますが、その理由はわかりません。プロセス (w3wp.exe) にアタッチし、ジェネリックハンドラー ProcessRequest メソッドのコードビハインドにブレークポイントを配置すると、そこで停止しません。したがって、ハンドラーに到達することさえありません。なぜでしょうか？

また、検索ボタン (BtnUCSSearch) を 1 回おきにクリックするたびにエラー関数を実行するだけです。また、典型的な JavaScript アラートのように、エラーポップアップで [OK] を押すオプションがありません。ちらつき、消えます。ページ全体のポストバックを防ぐために return 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

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

2012 年 1 月 2 日 @ 午後 12 時 49 分更新

2つの回答に従って、もう少しトラブルシューティングを行いました..

フォームを使用してクエリ文字列パラメーターを取得していた方法が機能していないようです。そのため、代わりに QueryString を使用しています。ページはまだ JSON オブジェクトを正しく返していました。しかし、少なくともクエリ文字列パラメーターは機能するはずです。ただし、この演習では、jQuery.ajax の呼び出しではなく、ブラウザーから直接汎用ハンドラーを明示的に呼び出しました。だから私はページが今うまく機能していることを知っています.

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

応答：

{ "responseProperty": "xxxxxxxxx" }

私は両方の方法を行ったことに注意してください.Duarte氏が提案したアプローチ（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 も行った) を使用してクエリ文字列パラメーターを渡しているわけではありません。また、まだエラーをスローしています。

また、JS 変数の前に「var」を配置します。

近づいています。

    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;
            }
        }); 

    });

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

2012 年 1 月 2 日 @ 午後 1 時 52 分

コードスニペット #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":"reponse via 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

投稿: 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 クラスによる応答"}

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

2012 年 1 月 2 日 @ 午後 2 時 48 分

最終コード。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

    });

score 3 · Accepted Answer

ブラウザーconsoleで詳細を確認し、コールバックにブレークポイントを設定します( success、error)

score 3 · Accepted Answer

ページ全体のポストバックを防ぐために return false を入れてみましたが、うまくいかないようでした。

主な問題が、ボタンコントロールをクリックするとハンドラーへの非同期呼び出しではなく完全なポストバックが発生することである場合は、jQuery クリックイベントハンドラー内の任意の場所にこのコードを追加できます。

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

return falseこれは、ボタンのクリックに対するブラウザの通常の動作を停止するのではなく、機能します。

score 2 · Accepted Answer

まず第一に、JavaScript のグローバル変数に注意してください。可能であれば、この慣習を放棄してください。

要求 URL が正しく、404 エラーが返されないことを確認してください。

jquery ajax データでは、JSON.stringify() を使用します。

また、asp.net ハンドラーで JavascriptSerializer を使用します。

動作しない場合は、firebug コンソールまたは chrome コンソールを開いて実行してください。とても助かります！

jquery - ASP.NET でジェネリック ハンドラーを使用した jQuery AJAX 呼び出しのトラブルシューティング

2012 年 1 月 2 日 @ 午後 12 時 49 分更新

2012 年 1 月 2 日 @ 午後 1 時 52 分

2012 年 1 月 2 日 @ 午後 2 時 48 分

3 に答える 3

Related

Reference

jquery - ASP.NET でジェネリックハンドラーを使用した jQuery AJAX 呼び出しのトラブルシューティング