'
I have a problem with my site in ASP.NET. My applications contains a few buttons (imagebuttons) that are able to change. For example: When I press an empty button I want to be able to put a picture and a website in it. I've made this possible with a popupbox.
The problem where I'm running into:
When Im trying to give button 2 a image and a website, it gives button 1 a image and website because I told it in:
public partial class Ingelogd : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Image1_Click(object sender, ImageClickEventArgs e)
{
if (DropDown.SelectedItem.Value == "Youtube")
{
Btn_1.ImageUrl = "~/Images/Youtube.png";
Btn_1.PostBackUrl = ("http://www.youtube.com");
Btn_1.OnClientClick = "";
}
else
{
}
}
Now I actually want the same for Btn_2 , but then I have to write the exact same code but change Btn_1 to Btn_2. This is impossible to do because I want 19 website ( youtube but also facebook, twitter etc.) Im also going to have 19 buttons ( currently I only have Btn_1 and Btn_2). This would mean I have to make 19*19 = 361 pieces of code. I assume there is a way to make a sub program for this. My teacher also told me I could use cookies for the buttonclick, but I have no idea how to make a cookie with a Imagebutton.
What is the best solution to solve this problem?
I also have the ASP.NET Code here for you who wants to see that code aswell.
<title>Ingelogd</title>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
<style type="text/css">
#popupBoxOnePosition{
top: 0; left: 0; position: fixed; width: 100%; height: 120%;
background-color: rgba(0,0,0,0.7); display: none;
}
.popupBoxWrapper{
width: 550px; margin: 50px auto; text-align: left;
}
.popupBoxContent{
background-color: #FFF; padding: 15px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
Dit is de pagina als je ingelogd bent.
</div>
<div id="popupBoxOnePosition">
<div class="popupBoxWrapper">
<div class="popupBoxContent">
<h3>Instellingen</h3>
<p>Kies uit een van de volgende links.</p>
<asp:DropDownList ID="DropDown" runat="server">
<asp:ListItem >Select</asp:ListItem>
<asp:ListItem >Youtube</asp:ListItem>
<asp:ListItem >Facebook</asp:ListItem>
</asp:DropDownList>
<br />
<asp:ImageButton ID="Button1" runat="server"
OnClick="Image1_Click"/>
<br />
<asp:Button ID="Button_afsluiten" runat="server" Height="48px" OnClientClick="toggle_visibility('popupBoxOnePosition');return false;" Text="Afsluiten" />
</div>
</div>
</div>
<asp:ImageButton ID="Btn_1" runat="server" Height="48px" OnClientClick="toggle_visibility('popupBoxOnePosition');return false;"
ImageUrl="" />
<asp:ImageButton ID="Btn_2" runat="server" Height="48px" OnClientClick="toggle_visibility('popupBoxOnePosition');return false;"
ImageUrl="" />
</form>
</body>
</html>
You can try to add attributes to DropDownList and to use it. For example add two new attributes ImageUrl and SiteUrl. Your code should look:
protected void Image1_Click(object sender, ImageClickEventArgs e)
{
Btn_1.ImageUrl = DropDown.Attrubutes["ImageUrl"];
Btn_1.PostBackUrl = DropDown.Attrubutes["SiteUrl"];
Btn_1.OnClientClick = "";
}
I've never used asp, but most of those code is just plain c#, so I should be good.
Make 19 separate functions, one for each button, and dynamically add the Image and Url instead of using ifs:
protected void Image1_Click(object sender, ImageClickEventArgs e)
{
String val = DropDown.SelectedItem.Value;
Btn_1.ImageUrl = "~/Images/" + val + ".png";
Btn_1.PostBackUrl = "http://www." + val + ".com";
Btn_1.OnClientClick = "";
}
If you want 1 function for all buttons as well, you'll have to give all your buttons a Name and check the senders name inside the function.
Related
Is it possible to add an onClick event to an asp:label and let it call a c# method rather than js?
Something like:
<asp:Label
ID="lblTest"
runat="server"
Text=""
ToolTip="Amount of errors this person is processing"
Style="cursor: help;"
OnClick="lbl_Click"
/>
And on the server side:
protected void lbl_Click(object sender, EventArgs e)
{
lblTest.Text = "Clicked"
}
You can create linkedbutton and make it look like label using CSS like this:
<asp:LinkButton ID="LinkButton1"
runat="server"
CssClass="myclass"
OnClick="LinkButton1_Click">
MyButton
</asp:LinkButton>
and in CSS
a.myclass{ color: #000000; text-decoration: none; }
a.myclass:hover { text-decoration: none; }
and then call it like
public void LinkButton1_Click()
{
lblTest.Text = "Clicked"
}
I have an ascx page with a div, when the div is clicked it calls a JS function and send an int
//HTML
<div style="float: right; margin-right: 150px;" class="innerDivStyle"
onclick="userStartExtend(2)">
<h1 style="margin-top: 50px">Product</h1>
</div>
//JavaScript function
function userStartExtend(num) {}
I need to use the num from userStartExtend function in a c# (file/page/code). I thought about querystring - set in javascript code and get in c# (possible?). Any other ideas ??
To make things clear : the c# code and javascript code dont share the same page.
What one normally does in a case where he wants to pass something from Javascript to .NET he uses eventHandlers, just don't forget to add attributes runat="server" id="DivId" and event handler OnServerClick="DivHandler".
Example:
<div runat="server" id="DivId" OnServerClick="DivHandler" style="float: right; margin-right: 150px;" class="innerDivStyle" onclick="userStartExtend(2)" >
<h1 style="margin-top: 50px">Product</h1>
</div>
then on C# side
public void DivHandler(object sender, EventArgs e)
{
//here sender is your <div> and e is data about 'click' event.
}
UPDATE: It appears that OnServerClick does not work properly ether. Here is workaround
HTML:
<div runat="server" id="DivId" OnServerClick="testMe('param1')" style="float: right; margin-right: 150px;" class="innerDivStyle" onclick="userStartExtend(2)" >
<h1 style="margin-top: 50px">Product</h1>
</div>
JavaScript:
function testMe(params) {
var btnID= '<%=MyButton.ClientID %>';
__doPostBack(btnID, params);
}
Server-side Page_Load:
string parameter = Request["__EVENTARGUMENT"];
if (parameter == "param1")
MyButton_Click(sender, e);
Make your div server side
<div id="serverSideId" runat="server" />
In your C# code, Page_PreRender should have this
int myValue = 2;
serverSideId.OnClientClick = "userStartExtend(" + myValue.ToString() + ")";
Add a hidden Field control in your use control
<asp:HiddenField ID="hdnval" runat="server" Value="" Visible="false">
update your javascript function as this
function userStartExtend(num) {
var myHidden= document.getElementById('<%= hdnval.ClientID %>');
if(myHidden)
{
myHidden.value=num;
}
}
Now use can access this server control at code behind
I am intending to show a Div with loading image during page post-backs to inform the user about a runing operation. I am using a simple javascript function that shows the div, when I call this JavaScript from an html input button (without postback), the div is appearing normally. But when I use it with a post-back button, (by setting its OnClientClick property), the div is appearing, but without the image unloaded (showing as a box with unloaded image). I am not able to figure where the problem is, I even tried adding the image as a hidden html control so that it is preloaded before the post-back, but with no prevail. Here is my aspx code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript">
function PleaseWait(message) {
message = message ? message : PleaseWaitDefaultMessage;
var dsoctop = document.all ? window.document.body.scrollTop : window.pageYOffset;
var el = document.getElementById("PleaseWaitDiv");
el.style.top = (dsoctop + 100) + "px";
el.style.left = "0px";
el.innerHTML = "<div style='background-color:white;border: solid 0px black; width:100%;'><img src='" + WebSiteBaseURL + "Images/bigrotation2.gif' /><h3>" + message + "</h3></div>";
el.style.display = "";
}
</script>
<asp:Literal ID="InitLiteral" runat="server" EnableViewState="false"><script>var PleaseWaitDefaultMessage = "{0}"; var WebSiteBaseURL = "{1}"; </script>
</asp:Literal>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="PleaseWaitDiv" style="width: 100%; position: absolute; top: 0px; display: none;
text-align: center; z-index: 2; max-width: 1024px; min-width: 600px; height: 260px;
overflow: hidden; background: #fff; margin: 0 auto; left: 0; right: 0;">
</div>
<asp:Button ID="btnTestPleaseWait" runat="server" OnClientClick="PleaseWait();"
Text="Test Please wait with postback" onclick="btnTestPleaseWait_Click"
/>
<input type="button" onclick="PleaseWait();" value="Test Please wait no postback" />
</div>
</form>
</body>
</html>
and here is my code behind:
protected void Page_Load(object sender, EventArgs e)
{
InitLiteral.Text = string.Format(InitLiteral.Text, "Please Wait.....", Page.ResolveClientUrl("~/"));
}
protected void btnTestPleaseWait_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
}
I had same problem. I solved it by loading same image in another img tag with style="dispaly:none" attribute. (Don't do visible="false")
Img tag with display:none forces browser to load image when page is loaded.
I think the problem occurs because POST request gets sent before loading div comes into existence, therefore the GET request for IMG is sent immediately AFTER POST request is sent, and because server is busy processing POST request it takes time to respond because of which browser fails to display the image.
Hope this helps!
I have an asp.net repeater that displays a title and and image.
The title is very long , so I want to display the title again on mouse over.
I tried to implement a mouse over but I have the following problem.
My display looks like this :
Repeater Element 1 Repeater Element 2
Title 1 Title 2
Image 1 Image 2
Now on doing a mouse over on Element1 , my mouse over displays Title1.
On doing a mouseover on Element2 , my mouse over displays Title1 again ,and I would like it to
display Title2 ? Can anyone point me on how i can achieve this.
My code is below :
<asp:Repeater ID="rptMonitorSummary" runat="server" OnItemDataBound="rptMonitorSummary_OnItemDataBound">
<ItemTemplate>
<asp:Panel ID="Pnl" runat="server" onmouseover="return showsamplepopup();" onmouseout="return hidesamplepopup();">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">
<%# Eval("Name").ToString().Length > 9 ? (Eval("Name") as string).Substring(0, 9) : Eval("Name")%>
</h5>
<div id="popup" style="position: absolute; width: 80px; height: auto; background-color: Lime;
border-bottom: solid 3px gray; display: none; border-right: solid 3px gray; display: none;">
<%#Eval("Name")%>
</div>
<div class="center">
<asp:Image Width="50px" ID="btnPerformanceImage" runat="server" Height="28px"></asp:Image>
</div>
</li>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
The javascript functions are as follows :
function hidesamplepopup() {
document.getElementById('popup').style.display = 'none';
return false;
}
function showsamplepopup(e) {
e = (e) ? e : window.event;
var element = (e.target) ? e.target : e.srcElement;
var left = element.offsetLeft;
var top = element.offsetTop;
while (element = element.offsetParent) {
left += element.offsetLeft;
top += element.offsetTop;
}
document.getElementById('popup').style.display = 'block';
document.getElementById('popup').style.left = left;
document.getElementById('popup').style.top = top;
return false;
}
I do not know what is your requirement. It could have been a lot easier if you use jQuery tooltip.
This is just an alternative approach.
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function () {
$(document).tooltip();
});
</script>
<asp:Repeater ID="rptMonitorSummary" runat="server"
OnItemDataBound="rptMonitorSummary_OnItemDataBound">
<ItemTemplate>
<asp:Panel ID="Pnl" runat="server">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header" title="<%# Eval("Name").ToString() %>">
<%# Eval("Name").ToString().Length > 9 ?
(Eval("Name").ToString()).Substring(0, 9) : Eval("Name")%>
</h5>
<div class="center">
<asp:Image Width="50px" ID="btnPerformanceImage"
runat="server" Height="28px"></asp:Image>
</div>
</li>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
Notice that getElementById will return the first element with that ID. And you're using the same ID for your Div's.
You should either use a different ID for each item of the repeater (generating different ID's for each of them), or change your logic to fetch them by some other property. I highly recommend using jQuery as well.
I would change the way which you are binding the events to elements, as your sample code doesn't use jQuery I'll assume you don't want it :)
First things first, you'll want to add a class to the asp:panel so that there will be some way of identifying and selecting all the instances. Also you'll want to use classes for your popups not IDs as IDs should be unique on a page.
then you can do something like:
var elements = document.querySelectorAll('.thatClassYouAdded'),
i = 0, l = elements.length;
for(;i<l;i++)
{
elements[i].addEventListener('mouseover', function(e) {
var popup = this.querySelector('.popup');
//do some stuff to popup
});
}
It's also important to note that querySelector is not supported in legacy browsers (see https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector for more info and support table) and older IEs (pre 9) use attachEvent instead of addEventListener which you may need to write additional code to support
Here i have a div in which i am showing it during the mouse hover in the master page and after mouse hover three href links will appear in that div .After clicking that href link it is traversing to another page,postback happens and that div is getting hidden in the master page.I need to show that div after that click also.I have used updatepanel and tried it but still it is not working.here is my code
//Div part
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="Update" runat="server">
<ContentTemplate>
<div runat="server" class="divSUBMenu" id="describe" style="width: 700px; height: 20px;
font: Arial, Helvetica, sans-serif;" onclick="show(0)">
</div>
</ContentTemplate>
</asp:UpdatePanel>
//Onhover part
<a href="#" onmouseover="showit(0)">
<img src="Images/Analyze_over.jpg" name="image1" width="84" height="22" border="0"
id="image1" alt="" /></a>
//Javascript for mousehover(working fine)
var submenu = new Array();
submenu[0] = ' <font style="font-family: Arial, Helvetica, sans-serif; font-size: 12px;"><a style="color: #FFFFFF; text-decoration: none;" href="ATrendAnalysis.aspx">Trend Analysis</a> <a style="color: #FFFFFF; text-decoration: none;" href="AEventPerformance.aspx">Event Performance</a> <a style="color: #FFFFFF; text-decoration: none;" href="ACannibalization.aspx">Cannibalization</a> <a style="color: #FFFFFF; text-decoration: none;" href="AHaloEffect.aspx">Halo Effect</a> <a style="color: #FFFFFF; text-decoration: none;" href="AVolumeDecomposition.aspx">Volume Decomposition</a></font></span>';
var delay_hide = 500;
var menuobj = document.getElementById ? document.getElementById("describe") : document.all ? document.all.describe : document.layers ? document.dep1.document.dep2 : "";
function showit(which) {
clear_delayhide();
document.getElementById("describe").style.visibility = 'visible';
thecontent = (which == -1) ? "" : submenu[which];
if (document.getElementById || document.all) {
menuobj.innerHTML = thecontent;
}
else if (document.layers) {
menuobj.document.write(thecontent);
menuobj.document.close();
}
}
and finally the part below is not working during the onclick but this alert is working
function show(which) {
alert("test");
document.getElementById("describe").style.visibility = 'visible';
}
Any suggestion??
EDIT:
This is the href am clicking
<a style="color: #FFFFFF; text-decoration: none;" href="ATrendAnalysis.aspx">Trend Analysis</a>
You have to use ClientScriptManager
http://msdn.microsoft.com/en-us/library/3hc29e2a.aspx
Example:
void Page_Load(object sender, EventArgs e)
{
if(checkDisplayCount.Checked)
{
String scriptText = "";
scriptText += "function DisplayCharCount(){";
scriptText += " spanCounter.innerText = " +
" document.forms[0].TextBox1.value.length";
scriptText += "}";
ClientScriptManager.RegisterClientScriptBlock(this.GetType(),
"CounterScript", scriptText, true);
TextBox1.Attributes.Add("onkeyup", "DisplayCharCount()");
LiteralControl spanLiteral = new
LiteralControl("<span id=\"spanCounter\"></span>");
PlaceHolder1.Controls.Add(spanLiteral);
}
}
Since the div is set to runat=server, you could control this on the server side - setting describe.IsVisible = false initially, and changing it to describe.IsVisible = true post-click.
If for whatever reason this must be done on the client, due to reliance on other scripts or something, then make sure you're looking for the control by using the correct identifier - it could be, depending on the version of ASP.NET you're using, that the control is prefixed with ctl00_x. In fact, even in newer versions of ASP.NET (above .NET 3.5), I think the UpdatePanel might explicitly alter the identifiers of its elements using a prefix so as to keep track of what it contains, don't quote me on that though. Check the rendered markup output on the page to check this.