FileUpload control is rendering differently in different browsers. In the Firefox, it's showing Browse/No file selected while in Chrome Choose File/No file chosen. Is there a way to display the File Upload in the same way irrespective of browser. My ASP.NET Code and screenshots are attached below:
<asp:Label runat="server" ID="lblFileName" AssociatedControlID="fileUploader"></asp:Label>
<asp:FileUpload ID="fileUploader" runat="server" Width="350" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" />
Firefox
Chrome
If you want consistent Button Look-And-Feel....you will need to apply the style you wish it to be.
You are using the Default Browser CSS styles. Check your Developer Tools for the associated browser to see how the Look-And-Feel of the controls is being rendered.
try following code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Uploader Demo</title>
<script src="Scripts/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
function hookFileClick() {
// Initiate the File Upload Click Event
document.getElementById('fileUploader').click();
}
function fnOnChange(obj)
{
document.getElementById("txtUploadFile").value = obj.value;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" runat="server"
id="txtUploadFile" disabled="disabled" />
<input type="button" runat="server"
id="btnUpload" value="Browse"
onclick="hookFileClick()" />
<asp:Button runat="server"
ID="btnUploadFileToServer"
Text="Upload File To Server"
OnClick="btnUploadFileToServer_Click" />
<asp:FileUpload runat="server"
ID="fileUploader" Style="visibility: hidden;"
onchange="fnOnChange(this);" />
</div>
</form>
</body>
</html>
C#
protected void btnUploadFileToServer_Click(object sender, EventArgs e)
{
string strFileName = fileUploader.FileName;
fileUploader.SaveAs("d:\\Somepath\\ " + strFileName);
}
Thank you very much #GoldBishop for giving me some hint to write custom css and the following css worked for me.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.upload-btn-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
}
.btn {
border: 2px solid gray;
color: gray;
background-color: white;
padding: 8px 20px;
border-radius: 8px;
font-size: 20px;
font-weight: bold;
}
.upload-btn-wrapper input[type=file] {
font-size: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="upload-btn-wrapper">
<asp:Label runat="server" ID="lblFileName" AssociatedControlID="fileUploader"></asp:Label>
<asp:FileUpload ID="fileUploader" runat="server" Width="350" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" CssClass="btn" />
</div>
</form>
</body>
</html>
Related
I read a tutorial about Asp.Net and copy some of the code in it it doesn't compile and I can't understand why.
Here's my code:
Default.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="MyFonts" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
body
{
font-family: Verdana, Arial, Sans-Serif;
font-size: small;
color: yellowgreen;
}
.heading1
{
font-weight: bold;
font-size: large;
color: lime;
}
.heading2
{
font-weight: bold;
font-size: medium;
font-style: italic;
color: #C0BA72;
}
.blockText
{
padding: 10px;
background-color: #FFFFD9;
border-style: solid;
border-width: thin;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btSubmit" Text="Submit" runat="server" OnClick="Button_Click" />
<div>
<asp:Label ID="Label1" runat="server" />
</div>
<div>
<asp:Label CssClass="heading1" ID="Label2" runat="server" Text="This Label Uses heading1"/>
<br />
This is sample unformatted text.<br /><br />
<asp:Label CssClass="heading2" ID="Label3" runat="server" Text="This Label Uses heading2"/>
<br />
Here's more unformatted text.<br />
<br />
<div class="blockText" id="DIV1" runat="server">
This control uses the blockText style. This control uses the blockText style. This
control uses the blockText style. This control uses the blockText style.
</div>
<asp:Label ID="lblTime" runat="server" OnInit="lblTime_Init"/>
</div>
</div>
</form>
</body>
</html>
Default.aspx.cs:
public partial class MyFonts : System.Web.UI.Page
{
private void Page_Load(Object sender, EventArgs e)
{
}
public void Button_Click(Object sender, EventArgs e)
{
Response.Write(((Button)sender).Text);
Label1.Text = "You clicked <b>" + ((Button)sender).Text + "</b>";
}
protected void lblTime_Init(object sender, EventArgs e)
{
lblTime.Font.Name = "Verdana";
lblTime.Font.Size = 20;
lblTime.Font.Underline = true;
lblTime.Font.Bold = true;
lblTime.Font.Italic = true;
lblTime.Font.Overline = true;
lblTime.Font.Strikeout = true;
lblTime.Text = DateTime.Now.ToString() + ". Font Name: " + lblTime.Font.Name;
}
}
On default.aspx.cs it doesn't recognize lblTime and Label1.
Why does it happen?
Earlier, before I added LabelTime it runs just fine and I can't understand what's wrong with the code I added.
Edit: in Default.aspx.cs no control from Default.aspx recognized...
Thank you
It seems that the code was right but I used probably a wrong project, that's why it didn't compile...
I need to center align a panel. I use the following:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="TestDefault.aspx.cs" Inherits="tregware.TestDefault" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:Panel ID="Root" runat="server" BackColor="Red" HorizontalAlign="Center" Style="left: 0px; top: 0px; width: 100%; height: 100%; position: absolute; z-index: 0;">
<asp:Panel ID="Body" runat="server" BackColor="Blue"
Style="left: 0px; top: 24px;width: 800px; height: 100%; position: absolute; z-index: 0;"
HorizontalAlign="Center">
</asp:Panel>
</asp:Panel>
</form>
</body>
</html>
However the panel ("Body") will not center. How would I do so?
You've set position: absolute, so a lot of the regular methods you would use to center elements probably won't work.
Since you've set a fixed width of 800px, you could use:
Style="left: 50%; margin-left: -400px; ..."
Panel has the property of HorizontalAlign
<asp:Panel id="reqId" runat="server" HorizontalAlign="center" >
Your Text Here
</asp:Panel>
Create a css called .panel { align:center }
and then add it to the panel CssClass = "panel"
When i type in either of the textboxes i get little circles appearing instead of text. Why is this happening and how do i stop it?
Code is as follows:
HTML:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="MainPage.aspx.cs" Inherits="Foods.MainPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link id="Link1" rel="stylesheet" type="text/css" href="Styles/mainStyle.css"/>
</head>
<body>
<form id="form1" runat="server">
<div class = "userIDTboxDiv">
<div class = "userIDTboxText">
Enter User ID:
</div>
<asp:TextBox id="userIDBox" TextMode="password" runat="server" Height="52px"
Width="200px" />
</div>
<div class = "passwordTboxDiv">
<div class = "passwordTboxText">
Enter User Password:
</div>
<asp:TextBox id="TextBox1" TextMode="password" runat="server" Height="52px"
Width="200px" />
</div>
</form>
</body>
CSS:
body
{
text-decoration:none;
background: white;
}
input
{
margin-left: 0px;
margin-top: 7px;
}
.userIDTboxDiv
{
padding-top: 20%;
padding-left: 45%;
width: 15%;
height: 30%;
}
.userIDTboxText
{
padding-left: 17%;
height: auto;
width:203px;
}
.passwordTboxDiv
{
padding-top: 2%;
padding-left: 45%;
width: 15%;
height: 111px;
}
.passwordTboxText
{
padding-left: 10%;
height: auto;
width:203px;
}
I would guess this has something to do with it:
TextMode="password"
in your <asp:TextBox> elements. Remove the TextMode or change them to:
TextMode="SingleLine"
which happens to be the default.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 11 years ago.
Here i have 2 list boxes ,when i click add button then items should be added to second list box in asp.net using jquery.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="ListBoxExample.aspx.cs" Inherits="ListBoxExample" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Adding,removing elements from First Listbox to Second Listbox</title>
<style type="text/css">
.lstbx1
{
font-family: Verdana;
font-size: medium;
font-style: normal;
background-color: Aqua;
height: auto;
width: auto;
}
.lstbx2
{
font-family: Verdana;
font-size: medium;
font-style: normal;
background-color: Lime;
height: auto;
width: auto;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js" />
<script type="text/javascript">
function Move_Elements() {
$("#lstbx1").appendTo("#lstbx2");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
<asp:ListBox ID="lstbx1" runat="server" CssClass="lstbx1" SelectionMode="Multiple">
<asp:ListItem>One</asp:ListItem>
<asp:ListItem>Two</asp:ListItem>
<asp:ListItem>Three</asp:ListItem>
<asp:ListItem>Four</asp:ListItem>
<asp:ListItem>Five</asp:ListItem>
<asp:ListItem>Six</asp:ListItem>
<asp:ListItem>Seven</asp:ListItem>
</asp:ListBox>
</td>
<td>
<asp:ListBox ID="lstbx2" runat="server" CssClass="lstbx2"></asp:ListBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnadd" runat="server" Text="Add" OnClientClick="Move_Elements();" />
</td>
<td>
<asp:Button ID="btnremove" runat="server" Text="Remove" OnClientClick="" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
<script type="text/javascript">
function Move_Elements() {
var originalList = $("#<%= this.lstbx1.ClientID %>");
var items = $('option', originalList);
var targetList = $("#<%= this.lstbx2.ClientID %>");
items/*.clone()*/.appendTo(targetList);
}
</script>
working example
edit:
anyway, i just want to warn you, that you are not able to access the items in code-behind, because these are serialized in viewstate and are not taken from the actual rendered control.
as a result: if you add n items with javascript and have one of these newly-added items selected as selectedItem in the ui, the asp.net-engine will fail to map the selectedValue at server-side to an item of the box, because it does not have these items in the viewstate!
try this...
<script type="text/javascript">
function Move_Elements() {
$('select[id=lstbx1] option').appendTo('#List2');
}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js" ></script>
<script type="text/javascript">
function Move_Elements() {
$(".lstbx1").children().appendTo(".lstbx2");
}
</script>
...
<asp:Button ID="btnadd" runat="server" Text="Add" OnClientClick="Move_Elements();return false;" />
I am trying to put inline css into an mvc page which inherits from a master page. I want to do this because this css is page specific and I feel it shouldn't go into a site wide file. What is the best way of doing this. My failed attempt is below. Nothing on the site will recognize testTwo styling. Thank you
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
.test
{
}
.testTwo *
{
float: left;
padding: 5px;
border: 2px solid gray;
margin: 3px;
}
</style>
</asp:Content>
missing the opening <style> tag? bad copy-paste, not the issue
Where is this ContentPlaceHolder at in your MasterPage?
Often times the TitleContent ContentPlaceHolder is inside the <head> tag within the <title> element like so:
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
Is this the case? If so, those styles will not be interpreted since browsers won't recognize the styles within <title><style>..</style></title>
I would suggest updating your MasterPage like this:
<head>
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link.... />
<link.... />
<asp:ContentPlaceHolder ID="StylesheetContent" runat="server" />
<script.... />
<script.... />
<asp:ContentPlaceHolder ID="ScriptContent" runat="server" />
</head>
Where is your opening
<style type="text/css">
?