How to return HTML from ASP.Net WebMethod call using Jquery?

问题

Using Asp.Net 4.0 Web Forms and Jquery 1.6.2. I want to make an Ajax call to a WebMethod on a page and have it return html. On the server side the WebMethod looks like this.

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

and here is the calling Ajax function.

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

The data that is returned from the WebMethod is always wrapped up as a json object that start like this.

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

How can I get the WebMethod to just return HTML?

回答1:

Regardless of what I set the dataType to, it always returns a Json object wrapped up with a "d" (Here is an explanation as to why the data returned is always wrapped in a d) But the Json object "d" just wraps up the Unicode Escaped html I am looking for, so all I have to do is change the Jquery Ajax call to this

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

and it works as expected.

回答2:

Likely the WebMethod returns JSON by default, as jQuery's .ajax() method will default to an intelligent guess of the returned data type.

Luckily the dataType parameter of the .ajax method allows you to tell it what type to return:

dataType: "html"

A note on the parameter in the documentation says that jQuery can convert the data type that was returned on the Content-Type header of the response to another type, if you like. In this case, if the Content-Type of the response is JSON, you can convert it by using:

dataType: "json html"

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

回答3:

I faced the same scenario in incorporating jquery mobile in ASP.Net web form because of the complex html result i return. I was able to provide a fix by returning an encoded html from the server side. The encoded html is further encoded in utf8 format. This result will be finally decoded for output in a div or any control of choice. This is the pseuso-code :

ASP.NET (vb style, use any language of your choice) output must be returned with

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

From the javascript section with jquery

$('#<%=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()));
        }

I hope this solves the question.

回答4:

The answer is a simple one line change:

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

Set the innerHTML of a new element which is not not appended to the page, causing jQuery to decode it into HTML, pulled back out with .text().

来源：https://stackoverflow.com/questions/9354659/how-to-return-html-from-asp-net-webmethod-call-using-jquery

标签

jquery

ASP.NET

webmethod