JQuery ajax return list from c# function

Question

I'm a bit confused when trying to implement C# and jquery to work together. I have a .cs file and a javascript document in the same solution/project. My c# function returns a list of strings, which I would like to append to some HTML data using Javascript. I am also using a webform for my HTML. Is it possible to return my list on the javascript side?

javascript

$(function () {
    $.ajax({
        type: "GET",
        url: "Test/GetListData", 
        dataType: "data: Array<any>" //Something like this?
    });

    //Can i return the list and use it here?
});

c# method

public List<string> GetListData()
{
    List<string> mylist = new List<string>();
    mylist.Add("test1");
    mylist.Add("test2");
    mylist.Add("test3");
    return mylist;
}

the jQuery $.ajax docs are very well detailed and even include examples — charlietfl
– charlietfl, Commented Nov 3, 2014 at 21:53
possible duplicate to stackoverflow.com/questions/17402242/… and stackoverflow.com/questions/19264373/… — Koti Panga
– Koti Panga, Commented Nov 3, 2014 at 22:14
@VenkataPanga Thanks for the advice. It turns out I had to go in an entirely different direction, see my answer below. — wheatfairies
– wheatfairies, Commented Nov 4, 2014 at 17:53

Community · Accepted Answer · 2017-05-23 10:33:49Z

2

Pulled from this thread:

You can serialize that list into some nice tidy JSON like this:

using System.Web.Script.Serialization;
var jsonSerialiser = new JavaScriptSerializer();
var json = jsonSerialiser.Serialize(aList);

edited May 23, 2017 at 10:33

CommunityBot

11 silver badge

answered Nov 3, 2014 at 21:53

Michael Anthopolous

2311 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

wheatfairies Over a year ago

So is it necessary to serialize my list to JSON in order to use the data in JQuery?

Michael Anthopolous Over a year ago

It'd be the easiest way to go about it. JSON objects are light and easily parsed by jQuery.

wheatfairies Over a year ago

Thanks for the tip. See my updated answer below for how I solved my issue.

wheatfairies · Accepted Answer · 2014-11-04 17:53:22Z

1

Well after careful research I realized that I was going about my problem the wrong way. I wanted to have C# communicate with javascript/html for a web form in the same project. Using a list was a bad idea as my javascript couldnt effectively see it unless I formatted it as one big JSON String. Here is the updated code that solved my problem, hopefully it helps someone down the line. [ComVisible(true)] allows the external window named test to see my c# function, and the $.parseJSON(myarray) was able to parse my JSON string into a usable array.

c#

[ComVisible(true)]
public string GetData()
{
    string test = "[{"Name": "test1"}, {"Name": test2"}, {"Name": "test3"}]";
    return test;
}

javascript

<script type="text/javascript">
            var test = window.external;
            var myarray = test.GetData();
            var obj = $.parseJSON(myarray);
            alert(obj[1].Name);
        }

   </script>

answered Nov 4, 2014 at 17:53

wheatfairies

3552 gold badges7 silver badges19 bronze badges

1 Comment

user1017102 Over a year ago

Did you mean: {"Name": "test2"}, instead of {"Name": test2"} ?

Steve Wellens · Accepted Answer · 2014-11-03 22:25:39Z

0

Try something like this (Note: I had a file already setup so the name is different):

   <script type="text/javascript">

        $(function ()
        {
            $.ajax({
                url: "WebService.asmx/GetListData",
                success: OnSuccess,
                error: OnError
            });

        });

        function OnSuccess(data)
        {
            for (var i = 1; i < data.all.length; i++)
            {
                alert(data.all[i].textContent);
            }
        }
        function OnError(data)
        {
            alert(data.statusText);
        }
    </script>

answered Nov 3, 2014 at 22:25

Steve Wellens

20.6k2 gold badges31 silver badges70 bronze badges

Collectives™ on Stack Overflow

JQuery ajax return list from c# function

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related