c# - C#.netページに含まれるJavaScriptブロック内にC#コードを正しく埋め込む方法は?

Question

基本的に、Google マップ Web アプリの 2 つの機能を統合しています。しかし、バックエンドからアクセスできる座標が必要なので、作成Data Tableし、JavaScript に渡します。

しかし、コードをマージしていると、構文の問題に直面しています (おそらく)。

更新:私が得るエラーはOperator '+' cannot be applied to operands of type 'string' and 'method group'

更新 #2 : Page_Load コードについては以下を参照してください (データテーブルの作成と、そのコードから起動された場合のメインコードの実行)

更新 #3:メインページのコードを追加しました。エラーが発生しました：Microsoft JScript runtime error: The value of the property 'initialize' is null or undefined, not a Function object

Linevar myLatLng = new google.maps.LatLng(" tblPoints.Rows[i][0].ToString @", " + tblPoints.Rows[i][1].ToString + @");で、@" & "; の開始/終了に関連する奇妙なエラーが発生します。

回答/提案はかなりのものです..ありがとう..

メインページのコード (JS 関数が呼び出される場所):

<%@ 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>

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

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

クラスファイルのコード:

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

score 3 · Accepted Answer

これらの連結の代わりに String.Format を使用しないのはなぜですか。見栄えが良く、メンテナンスが簡単で、おそらく問題を解決できますか?

更新 1 : 次のコードでは機能しないと思いますか?

更新 2 : ドロップ機能が最初に作成されるようになりました

更新 3 : 次の更新は次のとおりです :)

ページにスクリプトを追加するには、リテラルの代わりに this.Page.ClientScript.RegisterStartupScript を使用することをお勧めします。GPSLib にもいくつかの修正を加えました。だからここに 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);
    }
}

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

これが私のaspxページです：

<%@ 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>

score 1 · Accepted Answer

「+」をいくつか忘れました。正しい行は次のとおりです

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

編集：

また、ToString の後に忘れてい()ました。修正:

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

c# - C#.netページに含まれるJavaScriptブロック内にC#コードを正しく埋め込む方法は?

2 に答える 2

編集：

Related

Reference