I have problem in implementing google maps api in asp.net. Here is my aspx code:
<%# Page Title="" Language="C#" AutoEventWireup="true" CodeFile="visual_loc.aspx.cs" Inherits="visual_loc" %>
<%--A sample project by Ghaffar khan--%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Your Data on Google Map </title>
<%--Google API reference--%>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false
&key=asdfg" type="text/javascript">
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<form id="form1" runat="server">
<asp:Panel ID="Panel1" runat="server">
<%--Place holder to fill with javascript by server side code--%>
<asp:Literal ID="js" runat="server"></asp:Literal>
<%--Place for google to show your MAP--%>
<div ID="map_canvas" style="width: 100%; height: 728px; margin-bottom: 2px;">
</div>
<br />
</asp:Panel>
<br />
</form>
</body>
</html>
And my code behind: getLocation() is the method which gets the longitude and latitude from my database. createDataTable() is method which create DataTable from those locations.
protected void Page_Load(object sender, EventArgs e)
{
string user_id;
user_id = Request.Cookies["cookie"]["Login"];
getLocation(user_id);
BuildScript( createDataTable());
}
private void BuildScript(DataTable tbl)
{
String Locations = "";
foreach (DataRow r in tbl.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 + " map.addOverlay(new GMarker(new GLatLng(" + Latitude + "," + Longitude + ")));";
}
// construct the final script
js.Text = #"<script type='text/javascript'>
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById('map_canvas'));
map.setCenter(new GLatLng(52.259, 21.012), 2);
" + Locations + #"
map.setUIToDefault();
}
}
</script> ";
}
whole operation result in displaying empty site with no content. What am i doing wrong?
Problem was that i did wrong directories to my markers, so that cannot be seen on Map. Once i did enter valid directories everything works.
Related
I try to save the changed text of an editable div. I put some text on page load into the div and change it in the browser, but I can't save the changes because the innerHTML content doesn't change.
This is my aspx file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Title</title>
</head>
<body>
<form id="form1" runat="server">
<div contenteditable="true" runat="server" id="txtText" ></div>
<asp:Button ID="btnSave" runat="server" Text="Speichern" OnClick="btnSave_Click" />
</form>
</body>
</html>
This is the code behind file:
public partial class editWordModule : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
txtText.InnerHTML = "This is the unmodified text";
}
protected void btnSave_Click(object sender, EventArgs e)
{
string test = txtText.InnerHtml;
//still shows "This is the unmodified text" while it was changed before in the div
}
}
}
So how do I save the edited innerHTML of the div?
Make a little trick with JavaScript.
When the button is clicked, get the innerHTML of DIV and put into a asp:HiddenField
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
function ChangeDiv() {
var div = document.getElementById("txtText");
var hdn = document.getElementById("hdnText");
hdn.value = div.innerHTML;
}
</script>
<form id="form1" runat="server">
<div contenteditable="true" id="txtText"></div>
<asp:HiddenField ID="hdnText" runat="server" ClientIDMode="Static" />
<asp:Button ID="btnSave" runat="server" Text="Speichern" OnClick="btnSave_Click" OnClientClick="ChangeDiv()" />
</form>
</body>
</html>
And in your code behind read the hidden field.
string hdn = hdnText.Value
I have a website where you can take a multi-choice quiz. There can be 1 to 5 possible answers for each question in the quiz. I am having trouble figuring out how to dynamically making the controls for the quiz based on how many answers there are. I can get the number of answers easily.
so if there are 3 answers i need to generate 3 textboxes (readonly) and corresponding radiobutton list. Then when the user presses a button the data is submitted and the next question is loaded. I am trying to do this all in C#.
I once did exactly same but creating only textbox dynamically.I am copying my code(bit busy to make changes right now) ,please edit to your need:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</script>
</head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
function GetDynamicTextBox(value)
{
return '<input name = "DynamicTextBox" class="dynamic" type="text" value = "' + "mymonthname" + '" />' +
'<input name = "DynamicTextBox1" class="dynamic" type="text" value = "' + "myYearname" + '" />' +
'<input type="button" value="Remove" onclick = "RemoveTextBox(this)" />'
}
function AddTextBox()
{
var div = document.createElement('DIV');
div.innerHTML = GetDynamicTextBox("");
document.getElementById("TextBoxContainer").appendChild(div);
}
function RemoveTextBox(div)
{
document.getElementById("TextBoxContainer").removeChild(div.parentNode);
}
// function RecreateDynamicTextboxes() {
// var values = "vishal";
// if (values != null) {
// var html = "";
// for (var i = 0; i < values.length; i++) {
// html += "<div>" + GetDynamicTextBox(values[i]) + "</div>";
// }
// document.getElementById("TextBoxContainer").innerHTML = html;
// }
// }
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="TextBoxContainer" style="text-align: center;" class="step">
</div>
<div>
<div style="text-align: center;" id="setPrinteraxcis1">
<input id="btnAdd" type="button" value="Add" onclick="AddTextBox()" class="ANPClass" />
</div>
</div>
</form>
</body>
and to access the values,you need to write below code in .cs"
string[] textboxValues = Request.Form.GetValues("DynamicTextBox");
if (textboxValues == null || textboxValues.Length == 0)
{
string empty = "true";
}
else
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
this.Values = serializer.Serialize(textboxValues);
foreach (string textboxValue in textboxValues)
{
MultipleId.Add(textboxValue);
}
}
where MultipleId is an arraylist:
public ArrayList MultipleId = new ArrayList();
P.S.
I read your requirement that you need on basis of some critteria,then you can use an counter in AddTextbox method and loop to create desired number of textbox.
I have a problem with rendering asp:image in code behind.
First I explain my method:
In Default.aspx I just use one label.
In code behind I make a string variable and fill it, then I fill the lable.Text by my string variable.
this is my Default.aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="test_Default2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</form>
</body>
</html>
and this is my form load function in Defaul.aspx.cs:
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = #"<asp:Image ID='Image1' runat='server' ImageUrl='~/images/sc/tiraje.jpg' />
<br/>
<img src='../images/sc/tiraje.jpg' />
";
}
Now this code must render two images. But first image used by asp:image doesn't work! I need to use asp:image in my string variable because my URL changes my result, for example if my URL is:
http://localhost:19551/website/test/Default.aspx
When I give it one "/":
http://localhost:19551/website/test/Default.aspx/
The second URL causes to change the src of second image in my string that I use in <img> tag. so that I want to use asp:image because it uses "~/" for src (imageUrl) that never changes by change URL!
The Literal control introduced by Abdullah ELEN is the easiest and it works. Like this:
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
And then in the code behind, assuming you have already captured the image source into a local variable (photo_src), you add this:
Literal1.Text += "<img src=" + '"' + photo_src + '"' + "/>";
You cannot create in this way because Asp:Image is a server object. I have prepared for you a simple example below.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="pageDefault" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Literal ID="literalControl" runat="server" />
</div>
</form>
</body>
</html>
Code-behind
protected void Page_Load(object sender, EventArgs e)
{
// Write here your SQL query for image URLs..
while(reader.Read())
{
literalControl.Text +=
"<img src=\"../images/sc/" + reader[0].ToString() + ".jpg\" /><br/>";
}
}
You shouldn't be using a label to render the images. Instead place two asp:image controls in the web form or use a placeholder control, such as:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Application.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Image runat="server" ID="Image1" />
<br />
<asp:PlaceHolder runat="server" ID="PlaceHolder1"></asp:PlaceHolder>
</div>
</form>
</body>
</html>
Then you can dynamically create a new image control and set the image urls through codebehind by using their ImageUrl properties:
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Image1.ImageUrl = "../images/sc/tiraje.jpg";
Image Image2 = new Image();
Image2.ImageUrl = "../images/sc/tiraje.jpg";
PlaceHolder1.Controls.Add(Image2);
}
}
I already created a textbox id called txt which it empty at the start. After I click button, the C# assigned information from user input to txt.Text and it did display the result in txt textbox then calling the javascript function and I use document.getElementById('txt'); to get value that is already displayed. However the javascript is showing that the txt is null even the information is already displayed on textbox. I tried with alert, it does trigger when calling that function. I don't understand why?
C# codes,
protected void ButtonRequest_Click(object sender, EventArgs e)
{
//more codes, I cut this short to main point
txt.Text = deviceName;
ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "call", "<script>CreateIsm();</script>", false);
}
In asp.net and javascript,
<%# Page Title="Home Page" Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" CodeBehind="~/Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js" type="text/javascript"></script>
<script>
// global variables
id = 'AUTH';
notes = '';
ismClassId = '';
caseType = '';
l1 = '';
l2 = '';
l3 = '';
// Create ISM Ticket
CreateIsm = function (funct) {
// alert("hello");
var textBox = document.getElementById('txt');
var txt = "Please add the following DNS entries\n" + textBox;
ismClassId = 'ServerName';
caseType = 'Request';
l1 = 'Request';
l2 = 'Network';
l3 = 'Static IP Address';
notes = txt;
//notes = $('#txt').val();
$.support.cors = true;
$.ajax({
type: "POST",
url: "http://serversite/SubmissionPage.aspx",
data: {
'Form_ID': '08.01.7',
'ISM_Class_ID': ismClassId,
'Case_Type': caseType,
'Level_1': l1,
'Level_2': l2,
'Level_3': l3,
'Case_Notes': notes,
'Contact_ID': id
},
success: function (data) {
//console.log(data);
var str = data;
var ticket = $(str).find("#ticketIDOutput").val();
var hreff = "http://egsd.jvservices.com/Form/SRApproval/SRApproval.aspx?ticketID=" + ticket;
var a = "<a href='" + hreff + "' target='blank'>" + ticket + "</a> created."
$('#output').html(a);
},
error: function (jqXHR, textStatus, errorThrown) {
$('#output').html("Error creating ISM ticket: " + textStatus + " - " + errorThrown);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<center>
<asp:Button ID="ButtonRequest" runat="server" onclick="ButtonRequest_Click"
Text="Request" Visible="False" style="height: 26px" />
<br />
<br />
<div id="output">
</div>
<asp:TextBox ID="txt" runat="server" visible="true" TextMode="MultiLine"
Width=356px Height=200px style="margin-left: 0px"></asp:TextBox>
</center>
</form>
</body>
</html>
You need to access ClientID
var textBox = document.getElementById('<%=txt.ClientID %>');
If you are using .Net framework 4.0 or higher you can use ClientIDMode Enumeration on your control.
In your aspx page specify ClientIDMode = "Static" wiht your control like:
<asp:TextBox ID="txt" ClientIDMode="Static" runat="server" visible="true" TextMode="MultiLine"
Width=356px Height=200px style="margin-left: 0px"></asp:TextBox>
and then you can access it like:
var textBox = document.getElementById('txt');
If you look at the markup generated in your browser.. you'll see that the ID isn't actually what you think it is.
You can force it to be what you want.. by setting the ClientIDMode to Static:
<asp:TextBox ID="txt" runat="server" visible="true" TextMode="MultiLine"
Width=356px Height=200px style="margin-left: 0px" ClientIDMode="Static"></asp:TextBox>
Or you could use the ClientID property of the control in your page code.
I've got a upload function that pops up in a diffrent window, when i've submitted i want to send infomation back to the page that the upload window opened from.
Is that possible some way with ASP.net or C#?
Or would i have to use some javascript ? and how?
My 2 pages:
news.aspx - Contains a formview with my news. and a form with some inputs in.
This is where the link to open the upload page is...
uploader.aspx - Contains my upload controller and C# code to upload.
This should send a string from my C# code back to news.aspx and put it in one of my input fields or a label, not important.
uploader.aspx file:
<form id="form1" runat="server">
<div>
Vælg en fil at uploade:<br />
<asp:FileUpLoad id="FileUpLoad1" runat="server" />
<asp:Button id="UploadBtn" Text="Upload File" OnClick="UploadBtn_Click" runat="server" Width="105px" />
<br />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</div>
</form>
Behind Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class admin_Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void UploadBtn_Click(object sender, EventArgs e) {
Label1.Text = "Status: Uploader...";
if (FileUpLoad1.HasFile) {
FileUpLoad1.SaveAs(#"C:\Users\138409\Documents\Visual Studio 2010\Projects\Musicon\img\news\" + FileUpLoad1.FileName);
Label1.Text = "Status: " + FileUpLoad1.FileName + " er blevet uploadet";
} else {
Label1.Text = "Status: Filen blev ikke uploadet...";
}
}
}
Here is some Javascript code to create a popup window and, before the popup window closes, retrieve some information. (I will add a jQuery example in a bit)
//Site1.Master
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="PopupRedirect.Site1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
//Page1.aspx
<%# Page Title="" Language="C#" MasterPageFile="Site1.Master" AutoEventWireup="true" CodeBehind="Page1.aspx.cs" Inherits="PopupRedirect.Page1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
var message = "Hello World!";
var closeWindow = function(event) {
event.preventDefault();
window.close();
};
window.onload = function() {
document.getElementById('upload').addEventListener('click', closeWindow, false);
};
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<button id="upload">Upload File</button>
</asp:Content>
//UploadPage.aspx
<%# Page Title="" Language="C#" MasterPageFile="Site1.Master" AutoEventWireup="true" CodeBehind="UploadPage.aspx.cs" Inherits="PopupRedirect.UploadPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
var popupWindow;
var windowOptions = "menubar=yes,location=yes,resizable=no,scrollbars=no,status=yes,width=350,height=350";
var upload = function (event) {
event.preventDefault();
popupWindow = window.open("Page1.aspx", "Upload Page", windowOptions);
popupWindow.onbeforeunload = pageClose;
};
var pageLoad = function(event) {
document.getElementById('uploadLink').addEventListener('click', upload, false);
};
var pageClose = function (event) {
//put the code here that you want to execute when the window is done.
//like getting the value of some javascript variables
if(typeof (popupWindow.message) != "undefined") {
alert(popupWindow.message);
}
};
window.onload = pageLoad;
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<span>Welcome to this page! Click to upload.</span>
<button id="uploadLink">Upload</button>
</asp:Content>