locked
How to create div in c#? called in javascript?? asp.net RRS feed

  • Question

  • User1599793613 posted

     want to create a system where i get (from db) coordinates, add marker in a map and create a div... and when i click the marker it shows the corresponding div..

    i successfully add marker(and i can open the corresponding when i manually create them), but i didn't create the div.

    below i attach the code:

    c#

     protected void Page_Load(object sender, EventArgs e)
        {
        }
        public string ConvertDataTabletoString()
        {
            string _namedb = System.Configuration.ConfigurationManager.AppSettings["nameDB"];
            _namedb = HttpContext.Current.Server.MapPath(_namedb);
            string connStr = @"Provider = Microsoft.Jet.OLEDB.4.0; Data Source = " + _namedb + "; Persist Security Info = True";
    
            OleDbConnection conn = new OleDbConnection(connStr);
            OleDbCommand cmd = new OleDbCommand("select latitudine,longitudine,id from post", conn);
            OleDbDataAdapter da = new OleDbDataAdapter(cmd);
            DataTable dt = new DataTable();
            da.Fill(dt);
            System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
            List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
            Dictionary<string, object> row;
    
            foreach (DataRow dr in dt.Rows)
            {
                row = new Dictionary<string, object>();
                foreach (DataColumn col in dt.Columns)
                {
                    row.Add(col.ColumnName, dr[col]);
                }
                rows.Add(row);
    
                creaDiv(row);
    
            }
    
            return serializer.Serialize(rows);
        }
    
        public void creaDiv(Dictionary<string,object> row) {
    
            System.Web.UI.HtmlControls.HtmlGenericControl div = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            div = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            div.Attributes.Add("class", "myInfoCont");
            div.ID = "info-container" + row["id"].ToString();
            div.InnerText = row["id"].ToString();
    
            divInfoCont.Controls.Add(div);
        }

    aspx 

    function initialize() {
    
                String.prototype.replaceAll = function (search, replacement) {
                    var target = this;
                    return target.replace(new RegExp(search, 'g'), replacement);
                };
    
                var markers = JSON.parse('<%=ConvertDataTabletoString() %>');
                var stringified = JSON.stringify(markers);
                stringified = stringified.replaceAll('latitudine', 'Lat');
                stringified = stringified.replaceAll('longitudine', 'Lng');
                markers = JSON.parse(stringified);
    
                var mapOptions = {
                    center: new google.maps.LatLng(markers[0].Lat, markers[0].Lng),
                    zoom: 5,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                    //  marker:true
                };
    
                var infoWindow = new google.maps.InfoWindow();
                var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    
                for (i = 0; i < markers.length; i++) {
                    var data = markers[i]
                    var myLatlng = new google.maps.LatLng(data.Lat, data.Lng);
                    var marker = new google.maps.Marker({
                        ,
                        map: map,
                        id: data.id
    
                    });
                    (function (marker, data) {
    
                        google.maps.event.addListener(marker, "click", function (e) {
    
                            var q = document.querySelectorAll(".myInfoCont");
                            for (var i = 0; i < q.length; i++) {
                                q[i].style.visibility = "hidden";
                            }
    
                            console.log(marker.id);
                            console.log(data.id);
    
                          //  $('#info-container' + marker.id).css("visibility","visible")
                            $('#ContentPlaceHolder1_info-container' + marker.id).css("visibility","visible")
                        });
    
                    })(marker, data);
    
    
                }
                google.maps.event.addListener(map, "click", function (e) {
                   // alert(e.latLng);
                });
            }

    and the maps is load in the following way:

     function loadGoogleMap() {
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyANvhRY6mYK0EvLX6mzS6RJdN5b9nxYZek' + '&callback=initialize';
            document.body.appendChild(script);
        }
    
        $(function () {
            loadGoogleMap()
        });   

    Wednesday, December 4, 2019 2:06 PM

All replies

  • User475983607 posted

    Access the div using a standard class selector.

    jQuery

    var myDiv = $('.myInfoCont');

    JavaScript

    document.querySelector(".myInfoCont");

    Wednesday, December 4, 2019 2:12 PM
  • User1599793613 posted

    Access the div using a standard class selector.

    jQuery

    var myDiv = $('.myInfoCont');

    JavaScript

    document.querySelector(".myInfoCont");



    maybe i didn't explain properly:

    the problem is that the c# function : creaDiv() don't attach the div

    Wednesday, December 4, 2019 2:15 PM
  • User475983607 posted

    I recommend using standard Web Forms server controls like a Repeater to render dynamic content rather than rendering dynamic HTML manually. 

    https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.repeater?view=netframework-4.8

    When HTML content is render dynamically then it is up to you to maintain state and make sure the correct content is returned to the browser on each and every request.  I don't see this type of code in your code snippet.  Also, there is no indication if divInfoCont exists.

    If you want or need control over the HTML then consider moving to MVC.

    Wednesday, December 4, 2019 2:40 PM
  • User61956409 posted

    Hi barbe_99,

    want to create a system where i get (from db) coordinates, add marker in a map and create a div... and when i click the marker it shows the corresponding div

    If possible, you can try to implement a WebMethod to retrieve data from your database, then on client side, you can make AJAX call to your WebMethod to get expected data and dynamically initialize map and generate corresponding div(s) based on returned data in AJAX success callback function.

    With Regards,

    Fei Han

    Saturday, December 28, 2019 3:05 AM