Jun 21st, 2018, 12:16 PM
#1
Thread Starter
PowerPoster
How to get code-behind to react based on javascript?
I have a simple form where I click on a Label controls that is contained within an <a> element. There are actually two Label controls that when clicked on, they just show or hide two different <div> elements. What I'm trying to do is also attach that click to a code-behind event and just don't know how to do that. I thought of making the <a> an ASP Control but there is no such control. I need a code-behind event to fire when one of these Labels are clicked on.
Thanks,
Jun 21st, 2018, 01:41 PM
#2
Re: How to get code-behind to react based on javascript?
You should show some markup.
Do you have RUNATSERVER set for that element?
Jun 21st, 2018, 01:51 PM
#3
Re: How to get code-behind to react based on javascript?
Each control that is going to have backend code needs runat="server"
Code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="showimage.aspx.vb" Inherits="showimage" %>
<!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>Show Student Pictures</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<asp:Repeater ID="repeater1" runat="server">
<ItemTemplate>
<tr>
<td class="imagesize">
<asp:Image ID="imgStudent1" runat="server" /><!--Height="240px" Width="192px" />-->
</td>
<td class="imagesize">
<asp:Image ID="imgStudent2" runat="server" /><!--Height="240px" Width="192px" />-->
</td>
<td class="imagesize">
<asp:Image ID="imgStudent3" runat="server" /><!--Height="240px" Width="192px" />-->
</td>
</tr>
<tr>
<td>
<asp:HyperLink ID="lnkStudent1" runat="server" Width="192px" Height="50px" Target="_new">HyperLink</asp:HyperLink>
</td>
<td>
<asp:HyperLink ID="lnkStudent2" runat="server" Width="192px" Height="50px" Target="_new">HyperLink</asp:HyperLink>
</td>
<td>
<asp:HyperLink ID="lnkStudent3" runat="server" Width="192px" Height="50px" Target="_new">HyperLink</asp:HyperLink>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</div>
</form>
</body>
</html>
Jun 21st, 2018, 06:38 PM
#4
Thread Starter
PowerPoster
Re: How to get code-behind to react based on javascript?
Here is the HTML for the elements in question.
Code:
<body>
<script type="text/javascript">
window.addEventListener('load',
function () {
var x = document.getElementById("divVideos");
x.style.display = "none";
document.getElementById("VidImg").Value = "I";
});
</script>
<script type="text/javascript">
function ImageOrVideo(obj)
{
if (obj == "imageLink") {
document.getElementById("VidImg").Value = "I";
document.getElementById("divVideos").style.display = "none";
document.getElementById("divImages").style.display = "block";
}
else {
document.getElementById("VidImg").Value = "V";
document.getElementById("divImages").style.display = "none";
document.getElementById("divVideos").style.display = "block";
}
alert(obj);
}
</script>
<div class="divHeader">
<table style="width: 100%; vertical-align: top;" border="0">
<tr>
<td id="whatsnew">What's new with Blake</td>
<td style="width: 50%; text-align: right;"><label id="lblLoggedUser" runat="server"></label></td>
</tr>
</table>
</div>
<div class="menu">
<a id="imageLink" onclick="ImageOrVideo(id)"><asp:Label ID="lblImage" runat="server" class="menuItems">Images</asp:Label></a>
<a id="videoLink" onclick="ImageOrVideo(id)"><asp:Label ID="lblVideo" runat="server" class="menuItems">Videos</asp:Label></a>
</div>
The highlighted <div> contains the Label controls. Even though they are contained within <a> tags, using the C# code-behind, how can I tell when one of the Labels are clicked on?
Thanks,
Jun 22nd, 2018, 08:22 AM
#5
Re: How to get code-behind to react based on javascript?
If you want your label to have a click event in the code behind you need to create one for it.
If you start typing OnClick inside you label tag the intellisense should come up, and when you select it it will say - tab to create the handler (or something similar), do that and it will create your click event in the code behind for you.
Please Mark your Thread "Resolved",
if the query is solved & Rate those who have helped you
Jun 22nd, 2018, 11:31 AM
#6
Thread Starter
PowerPoster
Re: How to get code-behind to react based on javascript?
Well, I tried that and it worked to a point. However, there was no OnClick event in the intellisense. See Image.
Attached Images
Last edited by blakemckenna; Jun 22nd, 2018 at 11:36 AM .
Blake
Jun 22nd, 2018, 12:31 PM
#7
Re: How to get code-behind to react based on javascript?
<a> elements are supposed to have HREF's.
Are you sure you can use them as you are trying?
Jun 22nd, 2018, 01:25 PM
#8
Thread Starter
PowerPoster
Re: How to get code-behind to react based on javascript?
Should the "href" contain the event name?
Jun 22nd, 2018, 02:29 PM
#9
Re: How to get code-behind to react based on javascript?
Have you tried a label outside the <a> element? Can you get OnClick to appear in your CategoryLabel?
Been a long time since I've done asp.net - sorry for being so little help!
Jun 22nd, 2018, 02:35 PM
#10
Thread Starter
PowerPoster
Re: How to get code-behind to react based on javascript?
Yes, I actually removed the <a> element so the Label controls were stand-alone and there still was no OnClick Event in the intellisense.
And no worries...I understand not using technologies for a long time.
Jun 22nd, 2018, 03:03 PM
#11
Re: How to get code-behind to react based on javascript?
Why is that DIV outside your FORM??
Jun 22nd, 2018, 03:48 PM
#12
Thread Starter
PowerPoster
Re: How to get code-behind to react based on javascript?
I didn't realize that. Thanks for the heads up. Unfortunately, it didn't make a difference pertaining to the ASP:Label controls.
Jun 25th, 2018, 03:43 AM
#13
Re: How to get code-behind to react based on javascript?
Ah yes i just went and checked and a label doesn't have a click event which does kind of make sense really in the web, a label is just a way of displaying data.
Maybe what you should be using is a Linkbutton control. take a look at it and see what you think !
Please Mark your Thread "Resolved",
if the query is solved & Rate those who have helped you
Jun 25th, 2018, 12:15 PM
#14
Thread Starter
PowerPoster
Re: How to get code-behind to react based on javascript?
LinkButton worked...thanks NeedSomeAnswers!
Posting Permissions
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Click Here to Expand Forum to Full Width