如何将服务器端类型传递给asp.net Webform以使用JavaScript

Question

I'm currently trying to pass a known Type (List) to a asp.net webform that needs to be picked up by javascript on the pageload.

the mock data I am creating looks like this :

   protected List<MapCoords> createCoordinateList()
    {
       List<MapCoords> latlng = new List<MapCoords>();
       MapCoords m = new MapCoords();
       m.xCoord = 34.241182;
       m.yCoord = -77.946839;
       latlng.Add(m);
       m.xCoord = 34.242176;
       m.yCoord = -77.94538;
       latlng.Add(m);
       return latlng
     }

Where I am stuck (maybe just late in the day) is that in the past I have made an ajax call and returned the object on success of the result back to the page. However in this scenario this mock data is being generated by a sever side event so ajax is not used to invoke or call the method. Since the object has multiple properties (x,y) I can't just set the values to a hidden field which is why I think this needs to be passed as an object. If push comes to shove I could use ajax to invoke the method but this would almost be a double call for what I am trying to do so I would like to avoid this is possible

So the question is how can I take this list containing the coordinates and make it accessible to javascript in the client? This type could become more robust (ie more properties so I need to ensure that the properties retain their association x to y )

cheers,

Answer 1

You can pass array of class using web method both in aspx page or .asmx webservice. ScriptService attribute will convert your class array to json object. This simple example to understand how you can do it, jQuery Ajax with asp.net

[ScriptService]
public class YourClass : Page
{
    [WebMethod]   
    public static []MapCoords createCoordinateList()
    {
        //Your code
        return arrOfMapCoords;   
    }
}

Answer 2

Created a little example for you:

Server code:

public class MapCoords
{
    public double x { get; set; }
    public double y { get; set; }
}
public partial class _Default : System.Web.UI.Page
{
    [WebMethod]
    public static List<MapCoords> createCoordinateList()
    {
        List<MapCoords> latlng = new List<MapCoords>();
        MapCoords m = new MapCoords();
        m.x = 2.00;
        m.y = 3.1512;
        latlng.Add(m);

        m = new MapCoords();
        m.x = 3.00;
        m.y = 4.1512;
        latlng.Add(m);
        return latlng;
    }
}

Client Code:

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            url: "Default.aspx/createCoordinateList",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                if (msg != null) {
                    for (i = 0; i <= msg.d.length; i++) {
                        alert(msg.d[i].x + " " + msg.d[i].y);   
                    }
                }
            }
        });
    });
</script>

This uses jQuery and jSon. Don't forget to include the jQuery library. Good luck!