Is there a way to add an onclick event to an ASP.NET Label server control? - asp.net

I wanted to do something like this:
<asp:Label ID="lblMyLabel" onclick="lblMyLabel_Click" runat="server">My Label</asp:Label>
I know that in Javascript I can do:
<span onclick="foo();">My Label</span>
So I'm wondering why I can't do that with a Label object.

You can use Attributes to add onclick client side callback.
I didn't know you can do this on span tags, but if it works you can add 'onclick' by lblMyLabel.Attributes.Add("onclick", "foo();");
But foo(); would need to be a client side javascript function.
System.Web.UI.WebControls.Label does NOT have OnClick server event. You could look into using AJAX if you want server callback with example above.
You could also use LinkButton like other say. You can make it not look like a link by using CSS, if it is just that underline you are concerned about.
ASPX:
<asp:LinkButton ID="LinkButton1" runat="server"
CssClass="imjusttext" OnClick="LinkButton1_Click">
LinkButton
</asp:LinkButton>
CSS:
a.imjusttext{ color: #000000; text-decoration: none; }
a.imjusttext:hover { text-decoration: none; }

Your question doesn't specify if you mean to raise the click event on the server (VB or c#) or the client (javascript.) If you're looking for a server-side event you should use a link button with css that makes the link appear as a label. You can then use the link button's server-side click event. If you're looking for a client-side click event - just type it into your server control markup asp:label id="MyLabel" runat="server" onclick="javascript:alert('hello');" Text="Click Me"; ASP.NET will emit additional attributes in the html markup that generates.

You can do it in code in the page_load eg:
void Page_Load(object sender, EventArgs e)
{
lblMyLabel.Attributes.Add("onclick",
"javascript:alert('ALERT ALERT!!!')");
}

If you want an onclick event, why don't you use a linkbutton, which has the onclientclick event:
<asp:linkbutton id="lblMyLink" onclientclick="lblMyLink_Click" runat="server">My Label</asp:linkbutton>
You can use CSS to make the link look like whatever you want

I think you can, but it's a client-side onclick handler, not server side. It will complain about the attribute not being supported (or some such) but I think it renders correctly. If you want to to a server-side handler, I think you'll need to do a LinkButton.

As far as I know that's impossible. Label control emits <span> element which is “unclickable” on the server side. You would need to replace your Label control with a LinkButton.

Another hack would be to use a hidden link or button with style="display:none;" and trigger the click on the server control from a javascript function in the span.
Something like this:
<asp:linkbutton id="lblMyLink" onClick="lblMyLink_Click" runat="server" style="display:none;">My Link</asp:linkbutton>
<span onclick="document.getElementById('lblMyLink').click();">My Label</span>

you could always roll out your own control which produces a span, with the .net's standard postback javascript, but as stated earlier using a linklabel with a CSS class would be easier

Just to chime in on this issue,
I used a label in my .aspx page that was only to be visible in my DataList Item template if there were child records in the dataset.
I added a onclick function to the label:
moreOptionsLabel.Attributes.Add("onclick", string.Format("toggle_visibility('{0}')", div.ClientID));
in my .cs file. It will now control a div tag in the .aspx page to show or hide the records - because the onclick points to a client side javascript function. Notice the div.ClientID, that makes this workable in a datalist.
As noted above - the span tag does indeed become functional with "onclick". And since the label control is rendered as a span after the page request, using the Addtribute.Add("onclick".... does work.
The result is show/hide functionality of data with out doing a postback. If you use the LinkButton, or simlar controls - the postback and page reload is unavoidable - unless you want to get into some Ajax stuff.
NOTE: the span tag won't look clickable unless you style it with an underline and hand cursor.
Credit to this idea comes from Will Asrari over at http://www.willasrari.com/blog/display-nested-repeaters-and-gridviews-asynchronously/000292.aspx

You need to create a class object that inherits from the label and onclick event handler which will be a method by yourslef and use your object as a custom label.

Related

Jquery UI Button Server + Client Click Handlers

I am trying to write a simple HTML form using asp.net and Jquery UI but am running into a problem when trying to process click event handlers on a button within this form. I was tryign to use OnClientClick and OnClick but once the clientside method gets accessed and returns the boolean the server side method is not called accordingly( not called at all actually)
Linky to code since I could not get the code tags to work properly: http://pastebin.com/LZNMqASt
I found the problem, Actually you are displaying "div#loginForm" element in to the dialog and its not taking the form element.
Put form element inside of "div#loginForm" container and the problem will be fixed.
For some reason the return type of the javascript method was not being accepted as a valid boolean. The below solution fixes the OnClientClick event
<asp:Button runat="server" ID="btnLogin" Text="Login" OnClick="btnLogin_OnClick"
OnClientClick="if(ValidateLoginForm() != true) return(false);" UseSubmitBehavior="False" />

Set Attribute OnClick of a UserControl

I am using a third party control which not shows any onclick event option, since its a user control how can i add onclick event to it?
Thanx
serverControl.Attributes.Add("onclick", "yourMethod()");
should do the trick
though the control might explicitly block you from doing this.
I can't guarantee this will work on the control you're using, but certainly for the standard ASP.NET controls, you can just add it to the markup. You'll get a little squiggle under it, but just ignore that and it will make it into the final markup:
<asp:Panel ID="Panel1" runat="server" onclick="alert('hi!');"/>

HTML buttons: Code-behind operation

Earlier, I had a button control on my web page. but now I changed it to a CSS button suting my needs. Before this, the button control was performing code-behind operation but now I switched to this CSS button.
Delete profile
How can I accomplish the same code-behind process now?
You can change the anchor to be a server side control (turning it to a HtmlAnchor control) and use the ServerClick event:
Delete profile
To keep it simple, you could use a linkbutton and get the server side click event
<asp:LinkButton ID="lb1" runat="server" onclick="lb1_Click" CssClass="cssClass" />

link button property to open in new tab?

In my application I have some link buttons there but when I right click on them I cannot (they are in disable mode) find the menu items Open in new tab or Open in new window.
How do I show those menu items?
Code example:
<asp:LinkButton id="lbnkVidTtile1" runat="Server" CssClass="bodytext" Text='<%#Eval("newvideotitle") %>' />
From the docs:
Use the LinkButton control to create a hyperlink-style button on the Web page. The LinkButton control has the same appearance as a HyperLink control, but has the same functionality as a Button control. If you want to link to another Web page when the control is clicked, consider using the HyperLink control.
As this isn't actually performing a link in the standard sense, there's no Target property on the control (the HyperLink control does have a Target) - it's attempting to perform a PostBack to the server from a text link.
Depending on what you are trying to do you could either:
Use a HyperLink control, and set the Target property
Provide a method to the OnClientClick property that opens a new window to the correct place.
In your code that handles the PostBack add some JavaScript to fire on PageLoad that will open a new window correct place.
Here is your Tag.
<asp:LinkButton ID="LinkButton1" runat="server">Open Test Page</asp:LinkButton>
Here is your code on the code behind.
LinkButton1.Attributes.Add("href","../Test.aspx")
LinkButton1.Attributes.Add("target","_blank")
Hope this will be helpful for someone.
Edit
To do the same with a link button inside a template field, use the following code.
Use GridView_RowDataBound event to find Link button.
Dim LB as LinkButton = e.Row.FindControl("LinkButton1")
LB.Attributes.Add("href","../Test.aspx")
LB.Attributes.Add("target","_blank")
try by Adding following onClientClick event.
OnClientClick="aspnetForm.target ='_blank';"
so on click it will call Javascript function an will open respective link in News tab.
<asp:LinkButton id="lbnkVidTtile1" OnClientClick="aspnetForm.target ='_blank';" runat="Server" CssClass="bodytext" Text='<%# Eval("newvideotitle") %>' />
This is not perfect, but it works.
<asp:LinkButton id="lbnkVidTtile1" runat="Server"
CssClass="bodytext" Text='<%# Eval("newvideotitle") %>'
OnClientClick="return PostToNewWindow();" />
<script type="text/javascript">
function PostToNewWindow()
{
originalTarget = document.forms[0].target;
document.forms[0].target='_blank';
window.setTimeout("document.forms[0].target=originalTarget;",300);
return true;
}
</script>
LinkButton executes HTTP POST operation, you cant change post target here.
Not all the browsers support posting form to a new target window.
In order to have it post, you have to change target of your "FORM".
You can use some javascript workaround to change your POST target, by changing form's target attribute, but browser will give a warning to user (IE Does), that this page is trying to post data on a new window, do you want to continue etc.
Try to find out ID of your form element in generated aspx, and you can change target like...
getElementByID('theForm').target = '_blank' or 'myNewWindow'
When the LinkButton Enabled property is false it just renders a standard hyperlink. When you right click any disabled hyperlink you don't get the option to open in anything.
try
lbnkVidTtile1.Enabled = true;
I'm sorry if I misunderstood. Could I just make sure that you understand the purpose of a LinkButton? It is to give the appearance of a HyperLink but the behaviour of a Button. This means that it will have an anchor tag, but there is JavaScript wired up that performs a PostBack to the page. If you want to link to another page then it is recommended here
that you use a standard HyperLink control.
It throws error.
Microsoft JScript runtime error: 'aspnetForm' is undefined
<asp:LinkButton ID="LinkButton1" runat="server" target="_blank">LinkButton</asp:LinkButton>
Use target="_blank" because It creates anchor markup. the following HTML is generated for above code
<a id="ctl00_ContentPlaceHolder1_LinkButton1" target="_blank" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LinkButton1','')">LinkButton</a>

How to get at repeater Item from jQuery

I've got a repeater on the page. The repeater is actually in an .ascx. In the repeater each item has a few things such as an Add button, and a couple of other fields.
What I am trying to the Container.DataItem but the one that relates to the Add button that was clicked. If the user clicks the add button in the repeater list, give me reference to the Container.DataItem for that related to the button in that ItemTemplate that the user just clicked.
The add button is really just a regular HTML hyperlink wrapped around a regular HTML image. I added an ID to the hyperlink but don't know how to really link the two and gain reference to the DataItem.
I'm all set and can fly with jQuery and do whatever client-side stuff I want.
Example of what I started:
<script type="text/javascript">
$(document).ready(function()
{
$(myUserControl.MyRepeater).
}
</script>
The repeater doesn't generate any HTML of its own. It'll only write what you tell it to write.
So what you'll have to do is somehow identify each item, preferably with unique id's in the HTML. That way you can gain access to it through the DOM.
For example, if the rendered markup looked like this then you could actually access "item1" via jquery:
<div id="item1">abc</div>
<div id="item2">def</div>
To accomplish this you might try something like this in your ItemTemplate :
<ItemTemplate>
<div id="item<%#Container.ItemIndex %>">bla</div>
</ItemTemplate>
The Repeater and the DataItems are server-side control which is available from the code-behind of your pages/controls. You cannot access it from client-side code (javascript).

Resources