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?
Related
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" />
In my ASP.NET page I am using the "FileUpload" control.
The whole thing is implemented and is working as expected but...
I don't want the TextBox control which is a part of "FileUpload". (FileUpload = TextBox + Button)
Is it possible that I can remove/hide only the TextBox and let the Button look like a LinkButton?
Thanks
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />
This will surely work. i have tried it in my project.It dosent require javascript or CSS.
Actually, you can use this trick:
FileUpload fileUpload = new FileUpload();
fileUpload.Width = Unit.Pixel(83);
The button is 83 pixels and the textbox is the rest. If you force the control to a width of 83 pixels then the button is shown and the textbox is not.
For Asp.Net with HTML5 you can use document.getElementById('<%=ServerControlID.ClientID%>') to solve this issue.
My working code
HTML5
<asp:FileUpload ID="FileUpload1" runat="server" Style="display: none;" />
<input type="button" value="Browse" onclick="showBrowseDialog()"/>
Javascript
function showBrowseDialog() {
var fileuploadctrl = document.getElementById('<%=FileUpload1.ClientID%>');
fileuploadctrl.click();
}
Works in Firefox, IE & Chrome.
Not really. The fileUpload control is not style-able since it is sandboxed from the page for security. With HTML5 you can do your own file uploading or you can alternatively use flash, but otherwise you're stuck with what the browser gives you.
It can be done, but it's nasty. It involves some javascript and CSS cleverness to basically make the control invisible, placing an image in the background behind it.
See this answer from a couple years back.
Using jQuery I want to be able to click an element which will also checks it's related radio button. I had this working fine until we had to add runat="server" to the radio buttons.
When I apply this it prevents my jQuery function from working and I cant figure out how to get round it, heres a simplified version of the code:
HTML
<input type="radio" runat="server" id="sector1Radio" name="SectorGroup" title="Sector1" />
jQuery
$('#SomethingElse').click(function() {
$('input[title=Sector1]').attr('checked','checked');
});
I've found out that when its converted to a .net control instead of checked="checked" (as it would be usually) it is just Checked, so I changed that but on inspecting the DOM in multiple browsers, none of my radio buttons are being checked :-(
Are there any other ways I can use jQuery to check a radio button that has runat="server"?
Cheers!
I think that Your problem is that the id of the input is no longer sector1Radio but rather ctl00_sector1Radio or something similar. This happens if Your input control is inside e.g. a ContentPlaceHolder control (when using master pages).
Can You check the generated HTML code (in the browser) to verify if this is the case? What is the id of the input control?
If this is the case, You need to generate Your js jQuery code
$('#SomethingElse').click(function() {
$('input[title=Sector1]').attr('checked','checked');
});
from codebehind so that SomeThingElse is replaced with the ClientID of the control.
.is(':checked') works on ASP.NET radiobuttons and checkboxes
$('#SomethingElse').click(function() {
$('input[title=Sector1]').is(':checked');
});
try using
$('input[title=Sector1]').attr('checked',true);
and
$('input[title=Sector1]').attr('checked',false);
or maybe
$('#SomethingElse').click(function () {
$('input[title=Sector1]').attr('checked',!$('input[title=Sector1]').attr('checked'));
});
As suggested by others, ASP.net will not generate the html with the same ID you specified.
Quick solutions:
You can keep using the id but asks jquery to check the end of the id instead, example:
$("input[id$='sector1Radio']").is(":checked");
Or check against the title and name as Nico suggested
Use the class element which is not effected by ASP.net, example
<input type="radio" runat="server" id="sector1Radio" class="sector1Radio" name="SectorGroup" title="Sector1" />
$("input.sector1Radio").is(":checked");
Best thing is to view the generated html code and see what id is giving you, then you can use the appropriate jquery selector, because the generated id could have different extensions depends whether you use master pages, etc.
If you are using a MasterPage or are creating the controls dynamically then it is probable that the control ID's are being renamed #SomethingElse becomes #MainContent_SomethingElse.
The easiest way to check this is to use the WebDeveloper plugin for Firefox or Chrome.
Go to Information -> Display Element Information and then select the object in question. It will give you it's ID, class, as well as ancestor and children information.
Check to see if the ID is being changed dynamically by the .NET.
If that's the case:
To prevent this, in the server side code you can use the following attribute to create static ID's
SomethingElse.ClientIDMode = ClientIDMode.Static;
You can then reference in you jQuery
$('#SomethingElse').click(function() {
if ($('input[title=Sector1]').attr('checked')) {
//execute event
});
I think what happens is that in ASP NET Checkboxes and Radio Buttons generates an "input" and a "span" after the input. So you need to select the input only.
You can try:
$('.classname input[type=checkbox]').each(function() {
this.checked = true;
});
Two things here: finding the control and executing the check. In ASP.NET, your control's actual ID and name will end up getting changed based on the runat="server" containers in which it appears, even if those containers have no Ids.
Rendered ASP.NET controls always end with the same name as you started with, so a tag like:
<input type="radio" runat="server" id="sector1Radio" title="Sector1" />
might end up being rendered as
<input type="radio" runat="server" id="ctl0$ctl0$sector1Radio" name="ctl0_ctl0_SectorGroup" title="Sector1" />
You can find this element, even after it is rendered if you use the "contains" selection syntax in JQuery. So to find this element, once rendered, you could use:
$("input[type='radio'][id*='$sector1Radio']")
This syntax will find any radio button whose id contains "$sector1Radio"
Once you have the element, you can check or uncheck it using the following code, which you'd call from the click event of your other element.
// check the radio button
$("input[type='radio'][id*='$sector1Radio']").attr('checked', true);
// uncheck the radio button
$("input[type='radio'][id*='$sector1Radio']").attr('checked', false);
One last thing... if you just want a block of text to click the button when pressed (wrap it in an tag and set the AssociatedControlId property to the control name of your radio button, like this...
<input type="radio" runat="server" id="sector1Radio" title="Sector1" />
<asp:label runat="server" id="lblsector1Radio" associatedControlID="sector1Radio">clicking here clicks and unclicks the radio button</asp:label>
I had the same problem. To use the jQuery UI to make your radiobuttons nice one has to write:
<div id="radio">
<input type="radio" id="radio1" runat="server" />
<label for="radio1">The label of the radio button</label>
...
</div>
<script type="text/javascript">
$('#radio').buttonset();
</script>
The id of the input tag must be correctly referenced by the label's for attribute. If the webpage is inside a master page then the id of the input tag will be modified to something like ctl00_Something_radio1, and suddenly the label's for attribute no longer references the input tag. Beware of this in ASP.NET!
I'm using markdownsharp with my asp.net forms website.
I want to use MarkItUp as my editor and have found a straight forward article on how to integrate with MVC which seems straight forward enough: http://rsolberg.com/2010/09/asp-net-mvc-markitup-rich-text-editor/
However, how do I do this with a forms website?
How do I get the MarkItDown Textarea on a postback and get the preview to work as well?
Place the Javascript and CSS file links in the head portion of the page just as you would with MVC. Then in your form, place a TextArea control. Set the rows and columns as needed.
<asp:TextBox ID="txtEditor" runat="server" TextMode="MultiLine" Columns="40" Rows="5" Text="" />
Then use JQuery to enable to functionality.
$(document).ready(function() {
$('<%=txtEditor.ClientID%>').markItUp(mySettings); });
Then on PostBack the contents of the editor will be available in the Text property of the TextBox control.
txtEditor.Text
This is not the only way to do this, you could also use a HTML TextArea control with a runat="server" attribute. Use whatever your personal preference is.
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.