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);
});
}
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.
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
MSDN Community Support
Please remember to "Mark as Answer" the responses that resolved your issue.
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() });All-Star
44831 Points
19379 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");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
maybe i didn't explain properly:
the problem is that the c# function : creaDiv() don't attach the div
All-Star
44831 Points
19379 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.
All-Star
40485 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,
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
MSDN Community Support
Please remember to "Mark as Answer" the responses that resolved your issue.