ASP.NetからHTMLを返す方法Jqueryを使ってWebMethodを呼び出しますか？

Question

Asp.Net 4.0 WebフォームとJquery 1.6.2の使用。 私はページ上のWebMethodへのAjax呼び出しを行い、htmlを返すようにします。 サーバー側でWebMethodは次のようになります。

[WebMethod] 
public static string GetOrders() 
{ 
    return theMethodThatGeneratesHtml(); 
} 

ここでは、コールするAjax関数を示します。

function GetOrders() 
{ 
    $.ajax({ 
     type: 'POST', 
     contentType: "application/json", 
     url: "Orders.aspx/GetOrders", 
     data: "{}", 
     success: function (data) { 
      $('#content').html(data); 
     }, 
     dataType: "text" 
    }); 
} 

WebMethodから返されるデータは、常にこのように開始するjsonオブジェクトとしてラップされます。

{"d":"\u003ctable\u003e\r\n ........ 

HTMLを返すだけでWebMethodを取得するにはどうすればよいですか？

Answer 1

WebMethodは、デフォルトでJSONを返します.jQueryの.ajax（）メソッドは、返されるデータ型をインテリジェントに推測するため、デフォルトでJSONを返します。

幸いにもアヤックス方式のデータ型パラメータを返すためにどのようなタイプのあなたはそれを伝えることができます：

データ型：ドキュメントのパラメータの「HTML」

ノートはjQueryの変換できると言います必要に応じて、別のタイプへの応答のContent-Typeヘッダーで返されたデータ型。 、「JSONのHTML」

http://api.jquery.com/jQuery.ajax/

Answer 2

かかわらず、私はデータ型を設定したものの：

データ型を：レスポンスのContent-TypeのがJSONであれば、この場合は、あなたが使用して変換することができますそれは常に "d"で包まれたJsonオブジェクトを返します（Hereは、返されるデータが常に広告でラップされる理由についての説明です）。しかし、Jsonオブジェクト "d"はちょうどUnicode Escaped htmlを探しています。私はこれにJquery Ajaxの呼び出しを変更する必要があります

function GetOrders() 
{ 
$.ajax({ 
    type: 'POST', 
    contentType: "application/json", 
    url: "Orders.aspx/GetOrders", 
    data: "{}", 
    success: function (data) { 
     $('#content').html(data.d); 
    }, 
    dataType: "json" 
}); 
} 

と期待どおりに動作します。

Answer 3

jquery mobileをASP.Net Webフォームに組み込むのと同じシナリオに直面しました。複雑なhtml結果が返されるためです。私は、サーバー側からエンコードされたhtmlを返すことで修正を提供することができました。エンコードされたhtmlはutf8形式でさらにエンコードされます。この結果は、最終的にdivや任意のコントロールの出力のためにデコードされます。 これはpseusoコードです：

ASP.NET出力はjQueryを使ってJavaScriptのセクションから

dim Result as string=Server.HTMLEncode(htmlouput) 
return Result 

で返さなければなりません（VBのスタイル、お好みの任意の言語を使用）

$('#<%=btn.ClientID %>').click(function() {///begin 
       $.ajax({ 
        type: "POST", 
        url: "page.aspx/staticmethod", 
        data: "{}", 
        contentType: "application/json; charset=utf-8", 
        dataType: "html", 
        success: function(html) { 
         try { 
          var out = encode_utf8(html); 
          $('#result').html(htmlDecode(encode_utf8(html))); 
         } catch (ex) { 
          alert(ex); 
         } 
        }, 
        error: function(msg) { 
         //alert error 
        } 
       }) 
       return false; 
      }); //ends 

      //decode html 
      function htmlDecode(value) { 
       if (value) { 
        return $('<div />').html(value).text(); 
       } else { 
        return ''; 
       } 
      } 
      //remove the 'd' encapsulator and other unwanted characters 
     function removedencapsulator(value) { 
      return value.replace('{"d":"', '').replace('"}', '').replace(/(?:\s+)?   <(?:\s+)?/g, '<').replace(/(?:\s+)?>(?:\s+)?/g, '>').replace(/\s+/g, ' '); 
     } 
     ////replace the quote string in the return query 
     function replacequote(value) { 
      return value.replace('\u0027', ''); 
     } 
     //unescape the utf-8 code 
     function encode_utf8(s) { 
      var normalizedData = replacequote(removedencapsulator(s)); 
      return unescape(encodeURIComponent(normalizedData.toString())); 
     } 

これがこの問題を解決することを願っています。

Answer 4

答えは、単純な1行の変更です：jQueryのHTMLにそれをデコードさせるページに追加されませんされていない新たな要素のinnerHTMLプロパティを設定し

success: function (data) 
    { 
    var decoded = $('<div/>').html(data.d).text(); //here you go 
    $('#content').html(decoded); 
    } 

、.textですから引き戻さ（）。

。