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;
}

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;
}

• javascript
• c#
• jquery
• ajax
• webforms

Share Improve this question Follow edited Nov 3, 2014 at 22:46 Masoud Mohammadi 1,74911 gold badge2323 silver badges4242 bronze badges asked Nov 3, 2014 at 21:51 wheatfairieswheatfairies 35522 gold badges77 silver badges1919 bronze badges 5

• the jQuery $.ajax docs are very well detailed and even include examples – charlietfl Commented Nov 3, 2014 at 21:53
• What kind of web-application is it? webforms or mvc? – Koti Panga Commented Nov 3, 2014 at 22:06
• @VenkataPanga Web forms – wheatfairies Commented Nov 3, 2014 at 22:07
• possible duplicate to stackoverflow./questions/17402242/… and stackoverflow./questions/19264373/… – 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 Commented Nov 4, 2014 at 17:53

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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);

Well after careful research I realized that I was going about my problem the wrong way. I wanted to have C# municate 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>

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>