design a button with a custom image? is it possible? - asp.net

Is it possible to put a button on my user control .ascx (the web part in this case), and have a customized image with that? What I am trying to do is have a "print" button to print the page.
However, I don't want to use the default asp button, I want to have a the special "print" icon associated with it. So, can I do this and still use <asp:button>?
Or is it just better to make that "print" icon a link, and do OnClick on the link event?

You can use link button as suggested.
But in my opinion you should not use any server-side control if you don't have to use it on server side.
What you can do create an image tag <img src.... and use onclick event on this image.
When you create a server side controls it is added to your view state key value pair of information. Which is an overhead.
or you can use like this
<a href="javascript:window.print()">
<img src="print.gif">
</a>
or even
<img src="print.gif" name="pic" onclick="javascript:window.print()"/>

You could try the ImageButton class, then you can have a printer icon for example.

Try this:
<asp:ImageButton ID="submitButton" runat="server" OnClick="submitButton_Click" ImageUrl="~/images/printer.jpg" />

Related

Set Default Button Enter - Master Page

Hi everybody i have the next problem. I have to set a button as default when i press Enter. I can use DefaultButton in the Form because now all my pages inherits from Master Page and i have a Content from the Master Page and this isn't work. Somebody could give me any alternative to solve this please. Thanks
According to Enter Key - Default Submit Button:
ASP.NET 2.0 introduces a wonderful work around for this. By simply
specifying the "defaultbutton" property to the ID of the ,
whose event you want to fire, your job is done.
The defaultbutton property can be specified at the Form level in the
form tag as well as at panel level in the definition tag.
The form level setting is overridden when specified at the panel
level, for those controls that are inside the panel.
Also, the Event Handler for the specified button, fires thereby
simulating a true submit button functionality.
Like this
<form id="form1" runat="server" defaultbutton="Button1">
<div>
<asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Click" />
</div>
Or you can achieve this by
Page.Form.DefaultButton = crtlLoginUserLogin.FindControl("LoginButton").UniqueID
or just
Page.Form.DefaultButton = LoginButton.UniqueID
This will work.
One way is through to recursively search through all your child pages controls and find the first button, get the id and set the default button of your form.
Although I have never tried this, I dont think its a very good idea as it is slow and error prone.
An alternative may be to do it through javascript/jquery, see this answer:
Submit form with Enter key without submit button?

Is it possible to replace an asp:button with a HTML element

I'm using asp forms and wanted to know if it's possible to replace the standard buttons with HTML elements that are styled using CSS.
My login page uses a standard button
<asp:Button ID="LoginButton" runat="server" Text="Login"
onclick="LoginButton_Click" />
linked to code behind (C#) which performs the login check.
I've seen some nice buttons implemented using the HTML <button> element and styled with CSS which can have features such as images and roll over highlighting. The basic HTML looks like this
<button type="submit" class="positive" onclick ="...">
<img src="/icons/tick.png" alt=""/>
Login
</button>
I've seen another question discussing the Difference between asp:button and html's button so I understand the <button> element is not a drop-in replacement but I'd like to know if the asp:button can be replaced and still call the LoginButton_Click C# code behind?
EDIT:
Although I'm using ASP I don't mind using some client side javascript if necessary.
The buttons I saw which got me thinking about this were found here: Rediscovering the Button Element
EDIT 2:
I tried the answer from XIII using the LinkButton asp control and that worked, rendering the button as I wanted and activating the C# when clicked
<asp:LinkButton ID="LoginBtn" CssClass="button positive"
OnClick="LoginButton_Click" runat="server">
<img src="/icons/tick.png" alt=""/>
Login
</asp:LinkButton>
Javascript is inserted in to the page (as mentioned by Curt) which was not a problem for me but may be for other people; but since the asp:loginview and other controls associated with forms authentication already need javascript I'm not sure this is a problem with the solution.
I decided to accept jwiscarson's answer as this is a cleaner implementation and, despite what I thought, <button> can be a drop-in replacement for <asp:button>
The answer to your question:
if the asp:button can be replaced and still call the LoginButton_Click C# code behind?
is yes. If you have a button like:
<button type="submit" id="submit" class="positive" runat="server">Submit</button>
The attribute you need to set is not onclick, but onserverclick. You could also do something like:
protected override OnInit(EventArgs e)
{
submit.ServerClick += new EventHandler(submit_ServerClick);
}
If you need to do styling on that button, I think the best way to tackle that is via CSS classes like you have in your example.
An alternative approach would be to make use the LinkButton control and style that completely with CSS. We used to do so for a certain project in the past. Worked out pretty great for our customer.
The property of interest if CssClass
You may set CSS class via cssClass property of <asp:Button/>. However you may set runat="server" and onserverclick="LoginButton_Click" attribute to <button/>.
You could use HTML button if you desire, and learn how to call the __doPostBack() method with the proper arguments. Asp.Net buttons and HTML buttons are pretty much the same when it comes to the way they are rendered in the client.
As had been posted here already you could style the HTML rendered by your asp:button or use another asp control. Your asp:button will be rendered as a <input type="submit"> with possibly more limited CSS options than a <button> tag.
From some googling I think it is possible to get a <button> tag rendered but it looks like a non trivial excercise see How can I use the button tag with ASP.NET?

How to manually set button input type in ASP.NET?

I have a jQueryUI dialog with some textboxes, plus a button. Right now, the asp:Button tag used to generate the button automatically sets its type as type="submit". The structure of the dialog is such that pressing enter at any of the textboxes should not call the button click event. It seems like the cleanest way to solve the problem, if it is doable, is to manually set the button's type to something other than submit. Is there a way to do this?
Edit: Forgot to mention this, but the button text is bound to a database item by <%# Eval() %>, which doesn't work without a server-side tag.
"
UseSubmitBehavior="false"
OnClientClick="return" />
The UseSubmitBehavior property tells ASP.NET to render as type="button" and inserts a __doPostBack() function call into the onclick property. The text of the OnClientClick property gets prepended to the client-side onclick event (with a trailing semicolon if you don't include it yourself), therefore putting return simply short-circuits the event handler and ends up doing nothing at all.
You can use just a regular html button and set it to whatever you want. It doesn't have to be a serverside asp button.
In your aspx file:
<input type="button" value="My Button" onclick="DoSomeScript();" />
I don't think you can set the Button control's AutoPostBack to false, which would normally do what you want.
In this case, I would simply not use asp:Button and just use <input type='button'>.

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

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.

How to change the Text of the browse button in the FileUpload Control (System.Web.UI.WebControls)

I want to change the Text of the browse button in the FileUpload Control (System.Web.UI.WebControls), instead of the [Browse...] text I want to use [...]
This is old, but wanted to offer another solution. You can use jQuery on a standard HTML hyperlink and fire asp:FileUpload on click of the HREF. Just hide the asp:FileUpload at design and doctor the href any way you'd like.
Link
Attach File
asp:FileUpload
<asp:FileUpload ID="fuSOW" runat="server" style="visibility:hidden;"/>
Then the jQuery:
$("#lnkAttachSOW").click(function () {
$("#fuSOW").click();
});
This isn't technically possible for security purposes, so the user cannot be misled.
However, there are a couple of workarounds, although these require working with the raw HTML rather than the .NET server control - take a look at http://www.quirksmode.org/dom/inputfile.html for one example.
This was how I did it in .NET using AsynchFileUpload and JavaScript...
<asp:Button ID="bUploadPicture" runat="server" Text="Upload Picture"
OnClientClick="document.getElementById('<%=tFileUpload1.ClientID%>')
.click();return (false);" />
<div style="display:none;visibility:hidden;">
<asp:AsyncFileUpload ID="tFileUpload1" runat="server"
OnUploadedComplete="tFileUpload1_UploadedComplete" />
</div>
Some third party tools provide this option. For example, we use the Telerik Upload control:
Changing the text of the Browse/select button
Example of Rad Upload control
You could use another button and java script to trigger upload browse button, Check this cute and simple solution How to change Text in FileUpload control
Hope this help.

Resources