Image preview on asp:file upload control - asp.net

I have an asp:file upload which I allowed users to select multiple files, I want it that if the user clicks on browse and pressed ok, I want the users to be able to preview the images selected (just like facebook image upload) how can i do this?

http://www.aspforums.net/Threads/165544/Display-Image-Preview-without-saving-file-physically-after-upload-in-ASPNet/
also refer this link...........

<asp:FileUpload ID="FileUpload1" runat="server"
style="top: 256px; left: 533px; position: absolute; height: 23px; width: 217px" ForeColor="White" />
<asp:Button ID="btnset" runat="server" Font-Bold="False" Font-Names="Times New Roman" Font-Size="Medium" style="top: 309px; left: 605px; position: absolute; height: 26px; width: 81px" Text="Set Photo " />
<asp:Image ID="Image2" runat="server" style="top: 66px; left: 568px; position: absolute; height: 152px; width: 136px" BorderColor="#CCCCFF" BorderStyle="Ridge" />
VB Code :
Protected Sub btnset_Click(ByVal sender As Object,
ByVal e As System.EventArgs) Handles btnset.Click
Image2.ImageUrl = FileUpload1.FileName
End Sub

Related

How to selected value from dropdownList URL aspx

I have a popupButton (custom component) in my aspx page. (Car.aspx)
This button has a URL that calls a new view. (Color.aspx)
I would like to pass as a URL parameter a selected value from the dropdown on the Car.aspx page
I tried the code below but it does not send the selected value in the request but the text <%:ddlCodMercado.SelectedValue%>
Cars.aspx
<asp:DropDownList id="ddlCodMercado" style="Z-INDEX: 111; LEFT: 10px; POSITION: absolute; TOP: 50px" runat="server" Width="130px" accessKey="R" CssClass="campo" tabIndex="2">
<asp:ListItem Value="3433">3433</asp:ListItem>
<asp:ListItem Value="3431">3431</asp:ListItem>
</asp:DropDownList>
<gvs:popupbutton id="pubConcessionaria" style="Z-INDEX: 109; LEFT: 400px; POSITION: absolute; TOP: 50px"
tabIndex="2" runat="server" ImageUrl="../img/img_lupa.gif" URL="../Pop-ups/Color_pop.aspx?codMercado=<%:ddlCodMercado.SelectedValue%>"></gvs:popupbutton>
How to pass selected value from dropwdown?
Try this;
<asp:DropDownList id="ddlCodMercado" style="Z-INDEX: 111; LEFT: 10px;
POSITION: absolute; TOP: 50px" runat="server" Width="130px" accessKey="R"
CssClass="campo" tabIndex="2">
<asp:ListItem Value="3433">3433</asp:ListItem>
<asp:ListItem Value="3431">3431</asp:ListItem>
</asp:DropDownList>
<gvs:popupbutton id="pubConcessionaria" style="Z-INDEX: 109; LEFT: 400px;
POSITION: absolute; TOP: 50px"
tabIndex="2" runat="server" ImageUrl="../img/img_lupa.gif" URL='<%#
string.Format("../Pop-ups/Color_pop.aspx?codMercado={0}",
ddlCodMercado.SelectedValue) %>'></gvs:popupbutton>

UpdateProgress div positioning

I'm trying to show a div on top of my grid view when the grid is loading.
This is how I placed my UpdateProgress, UpdatePanel and GridView:
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdtPnlRefList" >
<ProgressTemplate>
<div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
<span style="border-width: 0px; position: fixed; padding: 50px; background-color: #FFFFFF; font-size: 36px; left: 40%; top: 40%;">Loading ...</span>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdtPnlRefList" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView>
......
</asp:GridView>
...
I've used the ProgressTemplate code from another question which I've lost track to, however this code greys out the whole page, but i need to only grey out my grid.
Is that possible?
I've achieved this in the past by using the Ajax Control Toolkit's UpdatePanelAnimationExtender control.
<ajaxToolkit:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server" TargetControlID="YourUpdatePanel">
<Animations>
<OnUpdating>
<Sequence>
<ScriptAction Script="UpdatePanel_OnUpdating(updatePanelClientID, divToOverlayClientID);" />
<Parallel duration="0">
<FadeOut minimumOpacity=".5" />
</Parallel>
</Sequence>
</OnUpdating>
<OnUpdated>
<Sequence>
<Parallel duration="0" >
<FadeIn minimumOpacity=".5" />
<ScriptAction Script="UpdatePanel_OnUpdated(divToOverlayClientID);" />
</Parallel>
</Sequence>
</OnUpdated>
</Animations>
Ensure that you set the two required ClientIDs on load, like so:
<script type="text/javascript">
var updatePanelClientID = '<%=YourUpdatePanel.ClientID %>';
var divToOverlayClientID = '<%=divUpdateProgress.ClientID %>';
</script>
My div comprises this:
<div id="divUpdateProgress" runat="server" align="center" style="display: none; height: 40px; width: 200px; text-align: center; vertical-align: middle;">
<asp:Image ID="imgProgress" runat="server" ImageUrl="~/images/common/waitspin.gif" />
</div>
The final piece of the puzzle is the pair of JS functions called by the UpdatePanelAnimationExtender. They look like this:
function UpdatePanel_OnUpdating(updatePanelClientID, divClientID) {
// Displays a div over an updating UpdatePanel
// Get the update progress div
var divUpdateProgress = $get(divClientID);
// Make it visible
divUpdateProgress.style.display = '';
// Get the UpdatePanel element
var pnlUpdatePanel = $get(updatePanelClientID);
// Get the bounds of both the UpdatePanel and the progress div
var pnlUpdatePanelBounds = Sys.UI.DomElement.getBounds(pnlUpdatePanel);
var divUpdateProgressBounds = Sys.UI.DomElement.getBounds(divUpdateProgress);
// Work out where to position the element (the centre of the UpdatePanel)
var x = pnlUpdatePanelBounds.x + Math.round(pnlUpdatePanelBounds.width / 2) - Math.round(divUpdateProgressBounds.width / 2);
var y = pnlUpdatePanelBounds.y + Math.round(pnlUpdatePanelBounds.height / 2) - Math.round(divUpdateProgressBounds.height / 2);
// Set the progress element to this position
Sys.UI.DomElement.setLocation(divUpdateProgress, x, y);
}
function UpdatePanel_OnUpdated(divClientID) {
// Related to UpdatePanel_OnUpdating, above. Hides the div once the UpdatePanel has been updated
$get(divClientID).style.display = 'none';
}
This code was originally written almost 10 years ago, but I've just successfully reused it in a legacy project.
<asp:GridView>
<div style="position: relative;">
Code goes here
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdtPnlRefList" >
<ProgressTemplate>
<div style="position: absolute; display: table; width: 100%; text-align: center; top: 0; right: 0; left: 0; bottom: 0; z-index: 9999999; background-color: rgba(255,255,255,0.7);">
<span style="border-width: 0px; padding: 50px; font-size: 36px; display: table-cell"; vertical-align: middle;>Loading ...</span>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</asp:GridView>
place the <ProgressTemplate></ProgressTemplate> inside the <asp:GridView></asp:GridView> tags.
and give the <div> a position: relative; and the div inside the <ProgressTemplate></ProgressTemplate> a position: absolute;
.
Don't use opacity as it applies for the whole tag and everything inside. Unless that's exactly what you want.
I have used an rgba(255,255,255,0.7); which will only decrease the opacity of the background color to 70%.
I have vertically centered the <span>Loading ...</span> by adding display: table-cell"; vertical-align: middle; and adding display: table; to the parent tag.
It would be advisable to use a separate stylesheet for all this. =)
Hopefully this helps.
Its a wonderful day to CODE =)

File Upload and display in a single click

I want to upload a file and display the contents of that file in a grid using a FileUpload and a button control .But i need to do both the events in a single button click .I tried to Hide the FileUpload control but this doesn't work that well.
Following are the css style definitions i tried to apply :
<div style="height: 89px; width: 620px; position: relative; top: 226px; left: 229px; overflow:hidden">
<asp:FileUpload ID="FileUpload1" runat="server"
Style=" top:1px; left:-10px; width: 265px; position: relative; height: 26px; opacity: 0; filter: alpha(opacity=0)"
Font-Size="30pt" />
<asp:Button ID="Button1" runat="server" Text="Choose file.."
Style="top: -5px; left:-265px; z-index: -1; width: 251px; position: relative;"
Height="22px" />
</div>
This doesn't seem to serve my purpose.
Is there any way that will allow me to browse the file and display it in single button click?
Maybe this code will help
uploadButton.Attributes.Add("style", "visibility:hidden");
inputFile.Attributes.Add("onchange", "var uploadControl = document.getElementById('" + uploadButton.ClientID + "'); uploadControl.click();");

Text box display based on drop down list

I have a drop down list that shows all of the job numbers that are current. I need a text box to display the "name" equivalent of this number. The drop down list is based on a query to a separate table within the same database. The drop down list is:
<asp:DropDownList ID="dlRef" runat="server" DataSourceID="DataRef" DataTextField="Ref"
DataValueField="Ref" style="z-index: 1; left: 155px; top: 68px; position: absolute;
width: 115px; height: 29px; bottom: 254px;" AutoPostBack="True">
</asp:DropDownList>
What I need to do is have the text box tbADName to be associated with a datasource that uses a query such as this select Name from ActiveJobs where Ref = dlRef.DataValueField.
Is this possible or do I need to use another construct to display this information?
You can use the following function
onchange="showText(this.options[this.selectedIndex].text);"
Adding in your dropdown it will be
<asp:DropDownList ID="dlRef" runat="server" DataSourceID="DataRef" DataTextField="Ref"
DataValueField="Ref" style="z-index: 1; left: 155px; top: 68px; position: absolute;
width: 115px; height: 29px; bottom: 254px;" AutoPostBack="True"
onchange="showText(this.options[this.selectedIndex].text);">
</asp:DropDownList>
Create a function in java-script
function showText(value)
{
document.getElementById("textboxid").value=value
}
Edit 1
<head>
<title>DropDown</title>
<script type="text/javascript">
function chkind(){
var dropdown1 = document.getElementById('dlRef');
var textbox = document.getElementById('textbox');
var a = dropdown1.options[dropdown1.selectedIndex].text;
textbox.value = a;
}
}
</script>
</head>
<body>
<asp:DropDownList ID="dlRef" runat="server" DataSourceID="DataRef" DataTextField="Ref"
DataValueField="Ref" style="z-index: 1; left: 155px; top: 68px; position: absolute;
width: 115px; height: 29px; bottom: 254px;" AutoPostBack="True"
onchange="chkind()">
<option>Hi</option>
<option>Bye</option>
</select><br />
<asp:textbox id="textbox" type="text" runat="server" />
</body>
I'd use javascript to do this. Add an onchange=functionName() in your asp:DropDownList and handle the onchange in javascript to change the textbox text to the value in the dropdown list.
EDIT:
you could call the onchange event like this:
<asp:DropDownList ID="dlRef" runat="server" DataSourceID="DataRef" DataTextField="Ref"
DataValueField="Ref" style="z-index: 1; left: 155px; top: 68px; position: absolute;
width: 115px; height: 29px; bottom: 254px;" AutoPostBack="True" onchange="changeTextBox(this)">
</asp:DropDownList>
And your script like this:
<script>
function changeTextBox(data) {
document.getElementById("yourTextBoxId").value = data.value;
}
</script>
If you want the text displayed I'm guessing you should use the text property.
Note: As of html5 the script tags can be used like so without the type attribute.

Update Panel Only Updates Once Radio Button List Async Postback

I'm trying to use a radio button list to change some label texts in an update panel, but for whatever reason the SelectedIndexChanged event seems to only fire the first time and then never again. I've Googled and Googled but everything I've found to try has had no luck fixing the issue.
Autopostback is set to true, I've tried both the standard .net ScriptManager and the ToolkitScriptManager, both act the same, I've tried specifying the Event in the Trigger and having it unspecified (which falls back on the default for that control type) ... I've also tried binding the rbl in a if not me.ispostback then... structure for the page load event.
The VB I'm using in the event is just a simple If this index is selected, label.text="whatever" else "yadda" ... nothing fancy at all. It all works great if the Update panel isn't in play, except I was hoping to get rid of the screen flash from a full postback. I'm sticking the meat & potatoes of my asp.net below...Help!
Type1
Type2
<asp:Panel ID="DesignInfoHeaderPanel" runat="server" CssClass="headerpanel">
<asp:Label ID="lblDesignInfo" runat="server" font-bold="true"
style="z-index: 1; left: 5px; top: 5px; position: absolute" Text="Design Information"></asp:Label>
</asp:Panel>
<div class="cpdiv">
<asp:Panel ID="DesignInfoPanel" runat="server" CssClass="collapsepanel">
<asp:UpdatePanel runat="server" ID="DIUpdatePanel" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" font-bold="true"
style="z-index: 1; left: 5px; top: 7px; width: 95px; position: absolute; text-align: right"
Text="Account Name"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server" Font-Names="Verdana" Font-Size="8pt"
style="z-index: 1; left: 110px; top: 4px; width: 144px; position: absolute"></asp:TextBox>
<asp:Label ID="Label2" runat="server" font-bold="true"
style="z-index: 1; left: 270px; top: 7px; width: 140px; position: absolute"
Text="Est. Volume (# units)"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server" Font-Names="Verdana" Font-Size="8pt"
style="z-index: 1; left: 415px; top: 4px; width: 60px; position: absolute"></asp:TextBox>
<asp:Label ID="Label3" runat="server" font-bold="true"
style="z-index: 1; left: 7px; top: 35px; width: 95px; position: absolute; text-align: right"
Text="Sales Manager"></asp:Label>
<asp:DropDownList ID="DropDownList1" runat="server" Font-Names="Verdana" Font-Size="8pt"
style="z-index: 1; left: 110px; top: 32px; width: 150px; position: absolute">
</asp:DropDownList>
<asp:Label ID="Label4" runat="server" font-bold="true"
style="z-index: 1; left: 485px; top: 7px; width: 140px; position: absolute"
Text="Personalization Type"></asp:Label>
<asp:DropDownList ID="DropDownList2" runat="server" Font-Names="Verdana" Font-Size="8pt"
style="z-index: 1; left: 630px; top: 4px; width: 150px; position: absolute">
</asp:DropDownList>
<asp:CheckBox ID="CheckBox1" runat="server" font-bold="true"
style="z-index: 1; left: 298px; top: 32px; position: absolute" Text="Rental"
TextAlign="Left" />
<asp:CheckBox ID="CheckBox2" runat="server" font-bold="true"
style="z-index: 1; left: 397px; top: 32px; position: absolute" Text="Dir Sales"
TextAlign="Left" />
<asp:RadioButtonList ID="RadioButtonList1" runat="server" BorderColor="#640000"
BorderStyle="Solid" BorderWidth="2px" Font-Bold="true"
RepeatDirection="Horizontal"
style="z-index: 1; left: 545px; top: 28px; position: absolute"
TextAlign="Left">
<asp:ListItem Value="0">Type1</asp:ListItem>
<asp:ListItem Value="1">Type2</asp:ListItem>
</asp:RadioButtonList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="rblEmblemType" />
</Triggers>
</asp:UpdatePanel>
It could be because UpdatePanel is Updating. Since You have not post any information about your Code-Script, I assume that you have not used The following code in your Event Method.
UpdatePanel1.Update()
This(The Following One) is a less chance that could happen.
You don't need to use asyncPostBackTrigger if you use AutoPostBack..! You need to use trigger when an Image Button/Image/Grid..etc Event happens which or this Error Occurs
The message received from the server could not be parsed.
Try to add ClientIDMode="AutoID" to your RadioButtonList.
My code and yours are very similar.
In my cases, SelectedIndexChanged events are fired when I set PostBackTrigger.
Actually, Event fires only once means click events are attached the other Radio buttons (which is not selected).
So, I simply solved to delete "Selected=true"

Resources