Calling a web Method that returns a non String by AJAX [ASP.net]

Question

i made a web function in the C# file called test it returns a simple List for testing

[WebMethod(EnableSession = false)]
public static List<string> test()
{
    List<string> a = new List <string>() ; 
    a.Add("1s");
    a.Add("2s");
    return a; 
}

i tried to call this WEBMETHOD from the front end using JQUERY AJAX

     function Test() {

            $.ajax({
                type: "POST",
                url: "Default.aspx/test",
                data: "",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    x = msg;
                    $(".resultbox").html(msg.d);
                }
            });

            return x;

}

when i call test() ; from the console the message was :

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8   jquery-1.6.1.min.js:18

in common cases i convert objects into JSON and return them and this usually work but i'm interested to know how objects are returned from the WEBMETHOD to the front end are they serialized into text , why did this error happened .

no point in returning x. x will most probably be null as the it fires before the callback. — naveen, Feb 19 '12 at 06:00
not right , i've defined x as a global variable , also not the scope of the answer — Hady Elsahar, Feb 19 '12 at 06:08
lets argue later on callback methods and global scope and why return a globally scoped variable later. :) — naveen, Feb 19 '12 at 07:32

score 1 · Answer 1 · answered Feb 19 '12 at 07:31

1

Try this.

function Test() {

    $.ajax({
        type: "POST",
        url: "Default.aspx/test",
        data: "",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            msg = msg.hasOwnProperty("d") ? msg.d : msg;
            $.each(msg, function (index, value) {
                $(".resultbox").append("<p>" + value + "</p>");
            });
        }
    });

}

answered Feb 19 '12 at 07:31

naveen

53,448
46
161
251

actually u didn't get what the Question Says , i don't have problem in calling web methods in from Jquery , i had another Inquery – Hady Elsahar Feb 19 '12 at 17:58
@HadyElsahar: i believe your problem will be solved when you understand that you are just starting to learn javascript. trust us. :) – naveen Feb 20 '12 at 15:43

score 1 · Answer 2 · answered Feb 19 '12 at 18:59

1

I believe that DOM exception is related to passing an array object into innerHTML(), via jQuery's html() method. Try formatting your array values as a string first instead:

success: function (msg) {
  // Builds a string like '1s, 2s'
  var formattedMessage = msg.d.join(', ');

  $(".resultbox").html(formattedMessage);
}

Manually building the formatted string is no fun, of course. To improve that situation, look into client-side templating solutions like jQuery Templates and its successor JsRender.

answered Feb 19 '12 at 18:59

Dave Ward

59,815
13
117
134

from ur answer ,i see that the WEBMETHOD returns the LIST to the front end a JSarray , is that true ? what about the other objects ? that was the core of the Question – Hady Elsahar Feb 20 '12 at 07:42
2

Any collection like a List or Array will become a JavaScript array. Objects will become JavaScript key/value pairs. Scalar values will map to their corresponding JavaScript type. – Dave Ward Feb 20 '12 at 07:49

ShankarSangoli · Answer 3 · 2012-02-20T20:55:51.720

-2

Since you are sending a list of string from the WebMethod so msg will be an array. In that case msg.d will give you undefined result. If you want to show them as a combined string seperated by comma then try this.

ajax is async in nature by default you cannot return the ajax response from Test method. If you want to return it then set async to false which will wait until the response comes and then you can return it.

function Test() {
            var x = null;//Define variable x
            $.ajax({
                type: "POST",
                async: false,
                url: "webservice.asmx/test",//Web service url
                data: "",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    x = msg;
                    $(".resultbox").html(msg.join(','));
                }
            });

            return x;
}

edited Feb 20 '12 at 20:55

answered Feb 19 '12 at 06:03

ShankarSangoli

69,612
13
93
124

2

its perfectly valid. its a page method! http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/ – naveen Feb 19 '12 at 06:05
page methods are a valid tocall from the front end , actually it's designed to be so . however this is not the issue i've posted in the Question – Hady Elsahar Feb 19 '12 at 06:09
oh shankar. i didn't read your answer at all. this deserves a -1. please spare some time and read this http://haacked.com/archive/2009/06/25/json-hijacking.aspx – naveen Feb 20 '12 at 15:48
@naveen - Why does it deserve -1? And how does the link you provided links to my answer or OP's question. – ShankarSangoli Feb 20 '12 at 20:56
`.d` is bound to be there. thats why and hey did you -1 my answer? any valid reasons? – naveen Feb 21 '12 at 04:56
Looking at the `WebMethod`'s code how can you say `.d` is bound to be there? It is is returning a List which gets converted to JavaScript array. `msg` is an array. Understand the question and answer before downvoting! – ShankarSangoli Feb 21 '12 at 05:48

Calling a web Method that returns a non String by AJAX [ASP.net]

3 Answers3