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.
Related
I am developing web applications in asp.net using c#, so I placed asp:textbox in web application. When i am loading page, i want to have default text in text box and when i place cursor on it and type the first letter, the text box become clear from textbox.
what you are asking is called watermarking. There are so many ways to do it
Third Party tools like :
a. Ajax ToolKit. you can see it in action here
b. Telerik RadTextBox Control (by setting its EmptyMessage property) .
and so many.
You can yourself build one using simple javascript like below:
<script>
$(document).ready(function() {
var watermark = 'textbox watermark text';
$('#inputTextboxId').blur(function(){
if ($(this).val().length == 0)
$(this).val(watermark).addClass('watermark');
}).focus(function(){
if ($(this).val() == watermark)
$(this).val('').removeClass('watermark');
}).val(watermark).addClass('watermark');
});
</script>
and place an input control inside your container say body
<body>
<input id="inputTextboxId" type="text" />
</body>
Also, if your entire work area resides in HTML5 supported browsers,then simply do this:
<input type="text" placeholder="Enter your name...">
and your textbox will have watermark "Enter your name..." which would disappear on focus.
Another alternative is the HTML5 Placeholder tag, although this isn't fully supported in all browsers.
I would recommend the javascript alternative #Jon Malcolm suggested.
You can do this using the AjaxControlToolkit's TextBoxWatermark extender. Add the AjaxControlToolkit to your project (using Nuget is the easiest way), and then in your markup you can specify the text to be displayed like this:
<asp:textbox runat="server" id="MyTextBox" />
<ajaxtoolkit:TextBoxWatermarkExtender runat="server" id="MyTextBoxExtender" TargetControlId="MyTextBox" WatermarkText="Default Text" />
Or you can do this with the jQuery Watermark plugin - there's details on how to implement this in the answer to this question.
Try the below mentioned following code it wil help to you to solve your problem
<asp:TextBox ID="Textbox"
CssClass="Input"
onfocus="if(this.value == 'Name'){this.value='';}"
onblur="if(this.value == ''){this.value='Name';}"
Width="300"
runat="server"
text="Name" />
I was just curious as to how the textbox + button search actually performs the search to fill up my gridviews, because I couldn't see anywhere that causes the databounds or anything. Is it a post-back thing? How does it work?! o.o
<asp:TextBox ID="SearchBox" runat="server"></asp:TextBox>
<input id="Submit1" type="submit" value="Search" />
Thanks heaps :)
There is no magic binding between a textbox called "searchbox" and a "submit" button in asp.net. The work has to be done somewhere and it's probably just hidden away in some part of the project that you cannot easily find.
In this case, it seems like a normal postback is occurring and some logic in the code behind is interrogating the "SearchBox"'s .Text property.
Just do a project wide search on SearchBox.Text, you should be able to find where the logic is.
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?
I am working on ASP.net using VB.net. I need to load a page in a new window on button click.
Can someone suggest the code for the same.
If you do not need a postback to the new window, then this:
<input type="button" value="buttonName" onclick="window.open('[page]')" />
OR
<asp:button text="buttonName" onclientclick="window.open('[page]');return false;" />
Else you will have to set the 'target' attribute of the form to something e.g. "_blank"
You could try using this javascript within the Button.Attribute.Add method:
Button1.Attributes.Add("onclick", "window.open('mySite'); return false;");
You can remove the 'return false' if you want the button to continue its postback.
You can customise the javascript further. Parameter information can be found here:
http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
You should do that with javascript, for example using window.open().
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.