How do I use an asp:Button or asp:LinkButton as asp:Hyperlink?
The existing Hyperlink just goes to another section on the same page: NavigateUrl="#Section2"
I want to do this in the aspx file without additional coding. Thanks.
The purpose is to have a button look instead of the underlined text BUT I don't want to use an image with hyperlink to achieve this purpose.
You can use OnClientClick event to call a JavaScript function:
<asp:Button ID="Button1" runat="server" Text="Button" onclientclick='redirect()' />
JavaScript code:
function redirect() {
location.href = 'page.aspx';
}
But i think the best would be to style a hyperlink with css.
Example :
.button {
display: block;
height: 25px;
background: #f1f1f1;
padding: 10px;
text-align: center;
border-radius: 5px;
border: 1px solid #e1e1e2;
color: #000;
font-weight: bold;
}
There is a middle way. If you want a HTML control but you need to access it server side you can simply add the runat="server" attribute:
<a runat="server" Id="lnkBack">Back</a>
You can then alter the href server side using Attributes
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
lnkBack.Attributes.Add("href", url);
}
}
resulting in:
<a id="ctl00_ctl00_mainContentPlaceHolder_contentPlaceHolder_lnkBack"
href="url.aspx">Back</a>
The best way to accomplish this is by simply adding "href" to the link button like below.
<asp:LinkButton runat="server" id="SomeLinkButton" href="url" CssClass="btn btn-primary btn-sm">Button Text</asp:LinkButton>
Using javascript, or doing this programmatically in the page_load, will work as well but is not the best way to go about doing this.
You will get this result:
<a id="MainContent_ctl00_SomeLinkButton" class="btn btn-primary btn-sm" href="url" href="javascript:__doPostBack('ctl00$MainContent$ctl00$lSomeLinkButton','')">Button Text</a>
You can also get the same results by using using a regular
.
This can be done very easily using a PostBackUrl and a regular button.
<asp:Button ID="Button1" runat="server" Text="Name of web location" PostBackUrl="web address" />
you can use linkbutton for navigating to another section in the same page by using PostBackUrl="#Section2"
Related
I'm working on a ASP.Net Web Forms project .I need to show icon in Gridview row dynamically based on a condition and need to show a tool tip when user hovers on that icon. Using the title attribute I was able to show the tool tip, but I need to design the tool tip as required (Square). How can I achieve that ..? ,How to add style to title attribute ..?
This is the code behind method
protected string GetUnsupportedIcon(MNDto a)
{
if (!a.Supported)
{
return $#"<i class=""fa fa-warning"" title='{message}' style=""color:#EEA42E;font-size:16px""></i>";
}
else return $#"<i class=""hidden""></i>";
}
Calling this method from aspx page
<asp:TemplateField HeaderText="<%$ Resources:ColumnNewCategory.HeaderText %>" HeaderStyle-HorizontalAlign="Left" HeaderStyle-VerticalAlign="Middle" ItemStyle-VerticalAlign="Middle" ItemStyle-CssClass="mxcell" HeaderStyle-CssClass="Outside">
<ItemTemplate>
<%# ((MNDto)Container.DataItem).SuggestedCategory %> <%# GetUnsupportedIcon((MNDto)Container.DataItem) %>
</ItemTemplate>
</asp:TemplateField>
You can't style an actual title attribute
How the text in the title attribute is displayed is defined by the browser and varies from browser to browser. It's not possible for a webpage to apply any style to the tooltip that the browser displays based on the title attribute.
You can make a pseudo-tooltip with CSS and a custom attribute (e.g. data-title)
Example code:
<a href="http://www.google.com/" title="Hello Stackoverflow!">
Example code --- Hover me
</a>
Example CSS:
a {
position: relative;
display: inline-block;
margin-top: 20px;
}
a[title]:hover::after {
content: attr(title);
position: absolute;
top: -100%;
left: 0;
}
I am not able to get the click evet in CSS
My code is like this
<input name="btn" type="button" onclick="~/Default22.aspx" value="Home" class="classname" style="position:absolute; left: 286px; top: 160px; margin-bottom: 0px;"/>
and I have class="classname"
.classname
{
text-indent:1px;
display:inline-block;
color:#132354;
font-family:Arial;
font-size:17px;
font-weight:bold;
font-style:normal;
height:32px;
line-height:50px;
width:144px;
padding 0px 0px 0px 0px;
text-decoration:none;
text-align:center;
cursor: pointer;
opacity:.5;
}
.classname:hover
{
background:-webkit-gradient( linear, left top, left bottom,color-stop(0.05, #77d42a), color-stop(5, #5cb811) );
background:-moz-linear-gradient( center top, #ffffff 60%, #c0C0C0 90% );
filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#77d42a',endColorstr='#5cb811');
background-color:#5cb811;
opacity:1;
}
.classname:active
{
position:relative;
top:1px;
}
The problem is when I click the button click event is not happening..not redirecting the page to Deafault22.aspx
I am working on Asp.net framework
Please help me
An HTML input element will not redirect to a web page in the onclick attribute, because it does not know how to redirect via that attribute.
Use a server control, like this:
Markup:
<asp:Button id="Button1" runat="server" Text="Home" OnClick="Button1_Click" />
Code-behind:
protected void Button1_Click(object sender, EventArgs e)
{
// Redirect here
Response.Redirect("Default22.aspx);
}
Use JavaScript/jQuery to handle the click event and redirect, like this:
$(document).ready(function() {
$('.classname').click(function() {
window.location = "Default22.aspx";
});
});
Try use onclick='window.open("Default22.aspx");' instead of onclick="~/Default22.aspx"
Inline Script:
onclick='window.location.href ="Default22.aspx";'
javascript function:
function Redirect(){
window.location.href ="Default22.aspx";
}
<input name="btn" type="button" onclick="Redirect();" value="Home" class="classname" style="position:absolute; left: 286px; top: 160px; margin-bottom: 0px;"/>
Jquery:
$(function() {
$('.classname').click(function() {
window.location.href = "Default22.aspx";
});
});
OnClick attribute of any HTML control is meant to be used for JavaScript. You have confused it with HREF attribute of <a></a> element
Here is what you need to do:
onclick="window.location.href ='Default2.aspx';return true;"
Firstly, 'the click event in CSS' - not sure what you're talking about. You can't handle click events in CSS.
Secondly, that's not how the <input type="button"> works. onClick - the client-side event - is expecting some Javascript, not a URL.
Try this: -
onclick="window.location = '/Default22.aspx';"
Note that the ~ (tilde) is an ASP.NET-specific thing and not relevant to IIS; don't use it in a regular URL.
Hope that helps.
Direct onclick="~/Default22.aspx" will not work here as this is a input type button, have to add client side events like..
onclick="window.location.href ='Default22.aspx';return true;" for opening in the same window.
or
onclick="window.open('Default22.aspx');", for opening the page in a tab.
Also you can created a javascript method and call that method inside the onClick and redirecting the page to Deafault22.aspx.
I have a button on my asp.net page that (upon mouseover) needs to act like a hyperlink (the hand cursor). I cannot use a linkbutton because I need the GUI of a regular asp:button.
Is there a way to create the hyperlink cursor on mouseover?
Thanks
Using css you can say:
.anchor {cursor: pointer; cursor: hand;}
and then in your aspx:
<asp:Button CssClass="anchor" ... >
Use the following for the hand cursor on button mouse over:
<asp:Button ID="Button1" runat="server" Text="Click Me" CssClass="ButtonClass" />
The in a style sheet or inline in the page itself define the class:
.ButtonClass
{
cursor: pointer; cursor: hand;
}
Use both (pointer and hand) for cross browser compatibility.
Add this into your button's markup...
style="cursor: pointer; cursor: hand;"
so...
<asp:Button id="test" text="test" runat="server" style="cursor: pointer; cursor: hand;" />
I have the following CSS that I can apply to an HTML input tag.
#headerSearch
{
width: 265px;
}
#headerSearch .text
{
width: 215px;
}
#headerSearch #searchButton
{
background: url(../images/searchButton.png) no-repeat 0 0;
width: 36px;
border: 1px solid #ccc;
margin: 0;
}
#headerSearch #searchButton:hover
{
background: url(../images/searchButton.png) no-repeat 0 -28px;
}
And the HTML to which I apply it...
<div id="headerSearch" class="float">
<input id="txtSearch" class="text left" type="text" />
<input id="searchButton" class="submit right" type="submit" value="" />
</div>
It works wonderfully.
However, I want to use an ImageButton control instead of the input tag because I want the page submit behavior of the ImageButton (which occurs when you click on it and click event is raised, etc.), but I am not sure how to go about mixing CSS with the ImageButton. I tried something simple like
<asp:ImageButton ID="ibtnSrch" runat="server" CssClass="searchBtn" onclick="ibtnSrch_Click" AlternateText="Search" />
but what occurs is the image displays with a red X in a white box (the default image is missing icon) over top of it.
So, more succinctly, how do I mix elegant CSS with the .NET ImageButton?
based on the sample code you have set the <asp:ImageButton /> CssClass to "searchBtn" but there is no CSS for .searchBtn
perhaps add this to your css
.searchBtn {
background: url(../images/searchButton.png) no-repeat 0 0;
border: 1px solid #ccc;
margin: 0;
}
.searchBtn:hover {
background: url(../images/searchButton.png) no-repeat 0 -28px;
}
an <asp:ImageButton /> renders down to <input type="image" name="ibtnSrch" id="ibtnSrch" class="searchBtn" src="" alt="Search" style="border-width:0px;" />
since the control is an image input with no image source that is why you get a red x
If you change your searchButton style to be a class, then you can just use an <asp:Button>
<asp:Button ID="ibtnSrch" runat="server"
CssClass="submit right searchButton" OnClick="ibtnSrch_Click" />
You can then put that button in a separate ValidationGroup or set CausesValidation="false".
If you want to keep it all client-side and do the redirect to the search page in JavaScript but also want to take advantage of the ASP.NET validation you've set up on your controls, you can use the client-side ASP.NET validation.
In short I would not use the asp image button.
I would use your current html controls and then add some javascript to click a hidden asp:Button control when your submit input is clicked.
<div id="headerSearch" class="float">
<input id="txtSearch" class="text left" type="text" />
<input id="searchButton" class="submit right" type="submit" value="" onclick="<% hiddenSearch.ClientID %>.click();" />
<asp:Button ID="hiddenSearch" runat="server" style="display:none;" />
</div>
I don't quite recall if that is the correct syntax to get the client id...
I add hover images to .Net LinkButtons using the following method:
.rollover a
{
background-image:url(/images/shoppingcart/butpill_continue.gif);
}
.rollover a:hover
{
background-image:url(/images/shoppingcart/butpill_continue_over.gif);
}
<div class="rollover">
<asp:LinkButton ID="btnContinue" runat="server"></asp:LinkButton>
</div>
This works fine with regular link buttons.
I need to add this to my next/previous buttons in a DataPager. I tried setting the ButtonType to "Link" and applying the ButtonCssClass="rollover" but this doesn't work. Is there a way to accomplish this?
Try changing your css to
a.rollover { background-image:url(/images/shoppingcart/butpill_continue.gif); }
a.rollover:hover { background-image:url(/images/shoppingcart/butpill_continue_over.gif); }
Or just
.rollover { background-image:url(/images/shoppingcart/butpill_continue.gif); }
.rollover:hover { background-image:url(/images/shoppingcart/butpill_continue_over.gif); }
You'll also have to change your other images to something like this
<asp:LinkButton ID="btnContinue" runat="server" CssClass="rollover" />