How to create div in c#? called in javascript?? asp.net RSS

• • Reply
  barbe_99

  None

  0 Points

  2 Posts

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

  Dec 04, 2019 02:06 PM|barbe_99|LINK

   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({
                      position: myLatlng,
                      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()
      });   

• • Reply
  mgebhard

  All-Star

  53641 Points

  23992 Posts

  Re: How to create div in c#? called in javascript?? asp.net

  Dec 04, 2019 02:12 PM|mgebhard|LINK

  Access the div using a standard class selector.

  jQuery

  var myDiv = $('.myInfoCont');

  JavaScript

  document.querySelector(".myInfoCont");

• • Reply
  barbe_99

  None

  0 Points

  2 Posts

  Re: How to create div in c#? called in javascript?? asp.net

  Dec 04, 2019 02:15 PM|barbe_99|LINK

  mgebhard

  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

• • Reply
  mgebhard

  All-Star

  53641 Points

  23992 Posts

  Re: How to create div in c#? called in javascript?? asp.net

  Dec 04, 2019 02:40 PM|mgebhard|LINK

  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.

• • Reply
  Fei Han - MS...

  All-Star

  40565 Points

  6233 Posts

  Microsoft

  Re: How to create div in c#? called in javascript?? asp.net

  Dec 28, 2019 03:05 AM|Fei Han - MSFT|LINK

  Hi barbe_99,

  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

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.