Как вернуть HTML из вызова ASP.Net WebMethod с помощью Jquery? - PullRequest
Новая
       18

Как вернуть HTML из вызова ASP.Net WebMethod с помощью Jquery?

0 голосов
/ 20 февраля 2012

Использование Asp.Net 4.0 Web Forms и Jquery 1.6.2.Я хочу сделать Ajax-вызов WebMethod на странице и вернуть 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 ........

Как заставить WebMethod просто возвращать HTML?

Ответы [ 4 ]

8 голосов
/ 21 февраля 2012

Независимо от того, что я установил для dataType, он всегда возвращает объект Json, завернутый в «d» ( Здесь - это объяснение того, почему возвращаемые данные всегда переносятся в объявлении). 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"
});
}

и работает как положено.

0 голосов
/ 21 февраля 2015

Ответом является простое однострочное изменение: 

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

Устанавливает innerHTML нового элемента, который не добавляется на страницу, в результате чего jQuery декодирует его в HTML, вытягивая обратно с помощью.текст().

.

0 голосов
/ 27 июня 2012

Я столкнулся с тем же сценарием при включении jquery mobile в веб-форму ASP.Net из-за сложного HTML-результата, который я возвращаю.Я смог обеспечить исправление, вернув зашифрованный HTML-код со стороны сервера.Кодированный HTML-код дополнительно кодируется в формате utf8.Этот результат будет окончательно декодирован для вывода в div или любой другой элемент управления по выбору.Это псевдокод:

ASP.NET (стиль vb, используйте любой язык на ваш выбор) должен быть возвращен с 

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

Из раздела javascript с 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()));
        }

Надеюсь, это решит вопрос.

0 голосов
/ 20 февраля 2012

Вероятно, WebMethod возвращает JSON по умолчанию, так как метод .ajax () jQuery по умолчанию принимает интеллектуальное предположение о возвращаемом типе данных.

К счастью, параметр dataType метода .ajax позволяет вам сказатькакой тип возвращать:

dataType: "html"

В примечании к параметру в документации сказано, что jQuery может преобразовать тип данных, который был возвращен в заголовке Content-Type ответак другому типу, если хотите.В этом случае, если тип содержимого ответа - JSON, вы можете преобразовать его с помощью:

dataType: "json html"

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

...