Reputation: 979

How to Embed C# code correctly inside JavaScript Block contained within a C#.net Page?

I am basically merging two features of my Google map web app. but I need the co-ordinates which are accessible by backend so I have made a Data Table and it is then passed on to the javascript.

But as I was merging the code I am facing some syntax problem (most likely).

Update: Error that I get is Operator '+' cannot be applied to operands of type 'string' and 'method group'

Update #2 : See below for the Page_Load code (creation of the data table & main code execution if fired from that code)

Update #3: Added Main Page's code. Error now I am getting: Microsoft JScript runtime error: The value of the property 'initialize' is null or undefined, not a Function object

At Line var myLatLng = new google.maps.LatLng(" tblPoints.Rows[i][0].ToString @", " + tblPoints.Rows[i][1].ToString + @"); I am getting some strange error related to openeing/closing of @" & ";

Any answer/suggestion is appreciable..Thanks..

Code for the Main Page (where the JS func is called):

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>maps integ</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
        <div id="map_canvas" style="width: 100%; height: 100%;"></div>
        <script type="text/javascript">
            window.onload = function (e) {
                initialize();
            }
        </script>
    </form>
</body>
</html>

Code for the Page_Load in Main Page:

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add(new DataColumn("Latitude"));
            dt.Columns.Add(new DataColumn("Longitude"));
            dt.Columns.Add(new DataColumn("Info"));

            DataRow row = dt.NewRow();
            row["Latitude"] = 28.483109;
            row["Longitude"] = 77.107756;
            row["Info"] = "INFO #1";
            dt.Rows.Add(row);

            row = dt.NewRow();
            row["Latitude"] = 28.483243;
            row["Longitude"] = 77.107624;
            row["Info"] = "INFO #1";
            dt.Rows.Add(row);

            row = dt.NewRow();
            row["Latitude"] = 28.483293;
            row["Longitude"] = 77.107579;
            row["Info"] = "INFO #1";
            dt.Rows.Add(row);

            row = dt.NewRow();
            row["Latitude"] = 28.483359;
            row["Longitude"] = 77.107536;
            row["Info"] = "INFO #1";
            dt.Rows.Add(row);

            row = dt.NewRow();
            row["Latitude"] = 28.483559;
            row["Longitude"] = 77.107273;
            row["Info"] = "INFO #1";
            dt.Rows.Add(row);

            //row = dt.NewRow();
            //row["Latitude"] = 28.4804;
            //row["Longitude"] = 77.1251;
            //dt.Rows.Add(row);

            js.Text = GPSLib.PlotGPSPoints(dt);
        }
    }

Code for the class file:

public static class GPSLib
{
    public static String PlotGPSPoints(DataTable tblPoints)
    {
        try
        {
            String Locations = "";
            String sJScript = "";
            int i = 0;


            foreach (DataRow r in tblPoints.Rows)
            {
                // bypass empty rows 
                if (r["latitude"].ToString().Trim().Length == 0)
                    continue;

                string Latitude = r["latitude"].ToString();
                string Longitude = r["longitude"].ToString();

                // create a line of JavaScript for marker on map for this record 
                Locations += Environment.NewLine + @"
                path.push(new google.maps.LatLng(" + Latitude + ", " + Longitude + @"));

                var marker" + i.ToString() + @" = new google.maps.Marker({
                    position: new google.maps.LatLng(" + Latitude + ", " + Longitude + @"),
                    title: '#' + path.getLength(),
                    map: map
                });";

                i++;

            }

            // construct the final script
            // var cmloc = new google.maps.LatLng(33.779005, -118.178985);

            // map.panTo(curmarker.position); //zooming on current marker's posn.
            // map.panTo(myOptions.getPosition());
            sJScript = @"<script type='text/javascript'>

            var poly;
            var map;

            function initialize() {
                var cmloc = new google.maps.LatLng(28.483243, 77.107624);
                var myOptions = {
                    zoom: 19,
                    center: cmloc,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);


                var polyOptions = {
                    strokeColor: 'blue',
                    strokeOpacity: 0.5,
                    strokeWeight: 3
                }
                poly = new google.maps.Polyline(polyOptions);
                poly.setMap(map);

                var path = poly.getPath();

               " + Locations + @"

                    }

            final initPoints(){
         //  var map;
            var infowindow;

            var mapOptions = {
                zoom: 19,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: centr
             };

            map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);
            infowindow = new google.maps.InfoWindow();
            drop();


            }

        function drop() {
            for (var i = 0; i < "+ tblPoints.Rows.Count + @"; i++) {
        var myLatLng = new google.maps.LatLng("+ tblPoints.Rows[i][0].ToString+ @", "+ tblPoints.Rows[i][1].ToString + @");
        var mark = new google.maps.Marker({
            position: myLatLng,
            map: map,
        });
    iWindow(mark, "+ tblPoints.Rows[i][2].ToString +@");
   }
}

function iWindow(marker, title) {
    google.maps.event.addListener(marker, 'click', function () {

        infowindow.setContent(title);
        infowindow.open(map, marker);
    });
}
                </script>";
            return sJScript;
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }
}

Upvotes: 0

Answers (2)

Vasil Trifonov

Reputation: 1867

Why don't you use String.Format instead of these concatenations. It looks better, it's easier to maintain and most probably will fix your problem?

Update 1: Are you sure the following code wouldn't do the job?

Update 2: The drop function is now created in the beginning

Update 3: OK here is my next update :)

I would offer you to use this.Page.ClientScript.RegisterStartupScript instead of literal for adding the script to the page. I've made some fixes as well in the GPSLib. So Here's the Page_Load()

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add(new DataColumn("Latitude"));
        dt.Columns.Add(new DataColumn("Longitude"));
        dt.Columns.Add(new DataColumn("Info"));

        DataRow row = dt.NewRow();
        row["Latitude"] = 28.483109;
        row["Longitude"] = 77.107756;
        row["Info"] = "INFO #1";
        dt.Rows.Add(row);

        row = dt.NewRow();
        row["Latitude"] = 28.483243;
        row["Longitude"] = 77.107624;
        row["Info"] = "INFO #1";
        dt.Rows.Add(row);

        row = dt.NewRow();
        row["Latitude"] = 28.483293;
        row["Longitude"] = 77.107579;
        row["Info"] = "INFO #1";
        dt.Rows.Add(row);

        row = dt.NewRow();
        row["Latitude"] = 28.483359;
        row["Longitude"] = 77.107536;
        row["Info"] = "INFO #1";
        dt.Rows.Add(row);

        row = dt.NewRow();
        row["Latitude"] = 28.483559;
        row["Longitude"] = 77.107273;
        row["Info"] = "INFO #1";
        dt.Rows.Add(row);

        //row = dt.NewRow();
        //row["Latitude"] = 28.4804;
        //row["Longitude"] = 77.1251;
        //dt.Rows.Add(row);

        var script = GPSLib.PlotGPSPoints(dt);

        this.Page.ClientScript.RegisterStartupScript(
            this.GetType(),
            "focus",
            script, false);
    }
}

and here is GPSLib

public static class GPSLib
{
    public static String PlotGPSPoints(DataTable tblPoints)
    {
        try
        {
            StringBuilder locations = new StringBuilder();
            StringBuilder drop = new StringBuilder();

            //function drop() {{
            //    for (var i = 0; i < {1}; i++) {{
            //    var myLatLng = new google.maps.LatLng({2}, {3});
            //    var mark = new google.maps.Marker({{
            //        position: myLatLng,
            //        map: map,
            //    }});
            //    iWindow(mark, {4});
            //    }}
            //}}

            drop.AppendFormat(@"function drop() {{{0}", Environment.NewLine);
            int i = 0;
            foreach (DataRow r in tblPoints.Rows)
            {
                // bypass empty rows 
                if (r["latitude"].ToString().Trim().Length == 0)
                    continue;

                string latitude = r["latitude"].ToString();
                string longitude = r["longitude"].ToString();
                string info = r["info"].ToString();

                // create a line of JavaScript for marker on map for this record 
                locations.AppendFormat(@"{0}path.push(new google.maps.LatLng({1}, {2}));

        var marker{3} = new google.maps.Marker({{
            position: new google.maps.LatLng({1}, {2}),
            title: '#' + path.getLength(),
            map: map
        }});", Environment.NewLine, latitude, longitude, i);

                drop.AppendFormat(@"var myLatLng{0} = new google.maps.LatLng({1}, {2});
        var mark{0} = new google.maps.Marker({{
        position: myLatLng{0},
        map: map,
        }});
        iWindow(mark{0}, '{3}');", i, latitude, longitude, info);

                i++;

            }

            drop.Append("}");

            // construct the final script
            // var cmloc = new google.maps.LatLng(33.779005, -118.178985);

            // map.panTo(curmarker.position); //zooming on current marker's posn.
            // map.panTo(myOptions.getPosition());
            string sJScript = string.Format(@"<script type='text/javascript'>

    var poly;
    var map;

    function initialize() {{
        var cmloc = new google.maps.LatLng(28.483243, 77.107624);
        var myOptions = {{
            zoom: 19,
            center: cmloc,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }};

        map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);


        var polyOptions = {{
            strokeColor: 'blue',
            strokeOpacity: 0.5,
            strokeWeight: 3
        }}
        poly = new google.maps.Polyline(polyOptions);
        poly.setMap(map);

        var path = poly.getPath();

        {0}

    }}

    function initPoints(){{
        //  var map;
        var infowindow;

        var mapOptions = {{
            zoom: 19,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: centr
            }};

        map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);
        infowindow = new google.maps.InfoWindow();
        drop();
    }}

    {1}

    function iWindow(marker, title) {{
        google.maps.event.addListener(marker, 'click', function () {{

            infowindow.setContent(title);
            infowindow.open(map, marker);
        }});
    }}
    </script>", locations, drop);
            return sJScript;
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }
}

Here's my aspx page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
        <script type="text/javascript">
            window.onload = function (e) {
                initialize();
            }
        </script>
    </form>
</body>
</html>

Upvotes: 3

Destrictor

Reputation: 752

You forgot some '+', the correct line is

var myLatLng = new google.maps.LatLng(" + tblPoints.Rows[i][0].ToString + @", " +
                   tblPoints.Rows[i][1].ToString + @");

Edit:

You also forgot () after ToString, correction:

var myLatLng = new google.maps.LatLng(" + tblPoints.Rows[i][0].ToString() + @", "
                 + tblPoints.Rows[i][1].ToString() + @");

Upvotes: 1

How to Embed C# code correctly inside JavaScript Block contained within a C#.net Page?

Answers (2)

Edit:

Related Questions