I need to create a link for an ASP.NET page that has an image & text, which when clicked will trigger an event on the webserver.
This is what the link should look like:
This is the HTML for what the link would look like if I wasn't working with ASP.NET:
<a id='PdfLink' href='#'>
<img src="App_Themes/.../Images/PDF.gif" alt="Click for fact sheet PDF"/>
<span>Latest Performance</span>
</a>
The problem with this is that I want to be able to click this and trigger an server-side event, but I don't know if I can do that with plain old HTML controls.
With ASP.NET I can see that there are various controls such as ImageButton & HyperLink but I don't see how I can have a Hyperlink & an ImageButton as part of the same clickable control.
What's the best way for me to get a link similar to the image that is bound to server-side functionality?
I wouldn't do this by using a mixture of controls.
I would use a <asp:LinkButton> control
<asp:LinkButton id="LinkButton1" runat="server" OnClick="ButtonClick_Event" CssClass="latest-performance">Latest Performance</asp:LinkButton>
Then I would use the CssClass "latest-performance" to style up the link.
e.g.
.latest-performance{
display: block;
padding-left: 20px;
background: url(url-to-the-pdf-icon) no-repeat left center;
}
You will have to tweek the style to fit with what you need, but this will basically look exactly the same as what you need. It also keeps your code clean, and separates out the style.
You can do like..
<asp:LinkButton ID="LinkButton1" runat="server"
Text="<img src='App_Themes/.../Images/PDF.gif' /> PdfLink"></asp:LinkButton>
To do what you want to do in ASP .NET you'd need to do something like this:
<asp:LinkButton ID="LinkButton1" runat="Server" OnClick="ButtonClick_Event">Text</asp:LinkButton>
<asp:ImageButton ID="ImageButton1" runat="Server" ImageUrl="image.gif" OnClick="ButtonClick_Event"></asp:ImageButton>
You could then write a custom server or user control to encapsulate those controls so they only expose the properties you wish to set once, such as the event when clicked.
<a href="../default.aspx" target="_blank">
<img src="../images/1.png" border="0" alt="Submission Form" />
<br />
<asp:Literal ID="literalID" runat="server">Some text</asp:Literal></a>
The benefit of this is that asp:Literal is lightweight. You can also programmatically change the text inside the asp:Literal, by using literalID.Text in the code behind, if you need to. I like this because you only need to use a single control inside of a simple tag. You can give it whichever href, target, and img you want. Hope this helps.
You can do like this, this answer is correct.
<asp:HyperLink ID="hyperlink1" runat="server" NavigateUrl="Default.aspx" Target="_parent"><img src="Images/1.jpg"/>click</asp:HyperLink>
Related
Is there a good reason why I can't do this
<asp:Button runat="server" ID="Btn1" OnClick='<%# Response.Redirect("wibble.aspx?ID=" + Eval("ID")) %>'/>
I get a compilation error:
The best overloaded method match for 'System.Convert.ToString(object, System.IFormatProvider)' has some invalid arguments
I appreciate I can create a code behind routine to handle the redirect but I would like to be able to create these type of buttons on the fly.
I can use a <asp:HyperLink> and it works fine using the NavigateUrl property, but why can't I do this with a button?
You can use the OnClientClick attribute instead. This will allow you to add Javascript code for the onclick HTML attribute.
<asp:Button runat="server" ID="Btn1" OnClientClick="window.location ='wibble.aspx?ID=<%# Eval("ID")).ToString() %>"/>
You can not do this as this will be rendered as input[type=submit] as html in browser, and for html its not functionality to redirect when you click on button.
If you have such request of having hyperlink in button , ASP.net gives linkbutton control , which will solve your need.
<asp:linkbutton PostBackUrl="~/something.aspx?id=1" runat="server">LinkButton</asp:linkbutton>
I want to use an asp.net button to launch an outlook window using the following html.
<a href="mailto:sample#website.com?subject=Insurance Text">
What do I need to do to file html code from my onClick event?
Try this
<asp:Button runat="server"
ID="btn"
OnClientClick="document.location = 'mailto:sample#website.com?subject=Insurance Text'; return false;"
Text="Mail" />
There are two approaches. If you want the standard button, you could use something like this:
<asp:Button ID="MailToButton"
Text="Send Email"
OnClientClick="javascript: navigate('mailto:blah#blah.com'); return false;"
runat="server" />
EDIT 2: Never mind about the UseSubmitBehavior property - I was incorrect. You'll just have to use return false;. Apparently ASP.NET does not render a regular non-submit button. How to disable postback on an asp Button
If you want an anchor tag, you can just use the NavigateUrl property of the Hyperlink tag:
<asp:HyperLink ID="MailToHyperlink"
Text="Send Email"
NavigateUrl="mailto:blah#blah.com"
runat="server" />
You cannot launch Outlook from the standard click event in the code behind, however. The code behind click event occurs on the server, not on the client's machine, so whatever you do it needs to happen on the client's machine either through standard HTML or through javascript.
Why an ASP.NET button?
Just use a simple HTML button.
They are plenty of example on the web. This one should work: using mailto button click event
How can I convert
<button type="submit" class="blue">
<span>Login</span>
</button>
Into an asp button?
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="blue"><span>Login</span></asp:LinkButton>
I just simply cannot find a way to do it. Sorry its a crappy question, but it's throwing me for a loop, might just need to sleep on it.
I agree with Davide that CSS is the best solution but if you have some styling requirement which requires multiple tags then LinkButton is your best bet. You can apply all the styles you would to have put on 'button' tag on to the 'a' tag.
<asp:LinkButton ID="submit" runat="server" OnClick="Submit_Click" CssClass="block-button">
<span runat="server" ID="submitText" ClientIDMode="Static" class="block-button-text">Submit</span><span class="block-button-arrow"> </span>
</asp:LinkButton>
If you really must have a button tag then the only way is to create a custom control that implements all the functionality of asp:button
See here for a solution by prabhakarbn http://forums.asp.net/t/1496938.aspx/1
If you really need rich formatting either you use a css class and define all styling in the css side or you can use an html anchor
I am not aware of another way to compose the inner html of a button or linkbutton like you are trying to do.
This isn't exactly Fermat's last theorem, but it keeps coming back to annoy me like an unpaid phone bill from college. Sometimes I want to create a HyperLink that does not cause a postback, so I want the target url to be #. When the markup happens to be from a UserControl in a subfolder,
/
|- Home.aspx (uses UC.ascx)
|- Sub
|- UC.ascx
the URL is rewritten with a relative path, e.g.
<asp:HyperLink runat="server" NavigateUrl="#" >Click Me!</asp:HyperLink>
becomes
Click Me!
Which is, unfortunately, wrong. Obviously I can get around this by not using a server control, but it seems stupid. Can this be avoided?
The point here is I will add a click event with jQuery or in code-behind, and I never want it to cause a postback, but I want it to be a hyperlink for CSS reasons.
easy way:
<asp:HyperLink ID="HyperLink1"
navigateUrl="#"
onclick="javascript:return false;"
runat="server">HyperLink</asp:HyperLink>
or
<asp:HyperLink ID="HyperLink1"
href="#"
runat="server">HyperLink</asp:HyperLink>
or jquery add a class to the link you don't want to have a postback (nopostback) :
$("a.nopostback").bind('click', function () {
return false;
})
You can set attributes for server-side elements.
<asp:HyperLink ID="HyperLink1" runat="server" Text="Click me"
href="#" style="color: red;" />
In the code-behind as well, using Attributes property
HyperLink1.Attributes
Actually, adding the control to the page without the href/NavigateUrl attribute(s) offers the greatest flexiblity.
<asp:HyperLink ID="HyperLink1" runat="server"/>
Then assigning the href attribute in your code behind looks like Bruno's answer:
HyperLink1.Attributes.Add("href","{your-value-here}");
Though, Bruno and Caspar's answers work they break in certain contexts. For example, say your HyperLink control is nested in a Repeater. If you then wanted to conditionally set the href attribute to an actual URL or '#' those approaches will not work. The '#' will be rendered every time.
Hi i want to display an image on a Linkbutton to make it looks attractive in asp.net
any one have idea how to do it...
<asp:LinkButton runat="server" ...>
<img src="yourimageurl" />
</asp:LinkButton>
Why not use ImageButton?