HTML input within a asp:UpdatePanel - asp.net

I have a html input control within a asp:UpdatePanel and I have its associated upload button specified within a asp:PostBackTrigger tag. Here is the aspx code:
<asp:UpdatePanel ID="upGallery" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<portal:ModuleTitleControl id="Title1" runat="server" />
<portal:OuterBodyPanel ID="pnlOuterBody" runat="server">
<portal:InnerBodyPanel ID="pnlInnerBody" runat="server" CssClass="modulecontent">
<div id="Uploader" runat="server">
<h2>Upload a docx file to be translated.</h2>
<input id="input_FileUpload" runat="server" type="file" />
<asp:Button ID="button_UploadFile" runat="server" OnClick="button_UploadFile_Click" Text="Upload" />
</div>
</portal:InnerBodyPanel>
</portal:OuterBodyPanel>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="button_UploadFile" />
</Triggers>
</asp:UpdatePanel>
Here is the code behind to retrieve the value of the input control "input_FileUpload":
string filename = input_FileUpload.Value;
filename is always empty when I step through the code.
What am I doing wrong?

The FileUpload control has known problems with the UpdatePanel. Check out this prior discussion: FileUpload control inside an UpdatePanel without refreshing the whole page?

Related

Page gets refreshed while loading Crystal Report

I am working on an Asp.net project and we have some interfaces to load corresponding reports.
My html code is as follows:
<form id="form1" runat="server">
<div>
/*----html code for selecting parameters----*/
<asp:Button Text="Submit" AutoPostBack="False" CssClass="btn btn-primary" runat="server" ID="btnSubmit" OnClientClick="javascript:return Validate()" OnClick="btnSubmit_Click" />
/*----Button to check validity and load report----*/
</div>
/*----Some html codes----*/
<CR:CrystalReportViewer ID="CRViewer" runat="server" AutoDataBind="true" EnableParameterPrompt="False" ReuseParameterValuesOnRefresh="True" ToolPanelView="None" EnableDatabaseLogonPrompt="False" HasCrystalLogo="False" HasToggleGroupTreeButton="False" HasToggleParameterPanelButton="False" HasDrilldownTabs="False" HasDrillUpButton="False" HasRefreshButton="True" HasPageNavigationButtons="True" HasPrintButton="True" DisplayToolbar="True" />
/*----this is where report get loaded----*/
</form>
after selecting parameters and clicking submit button, the report gets loaded, but the page gets reloaded and all parameters get reset.
How do I prevent the parameters from getting reset?
To prevent the whole page from reloading you need to use a updatepanel to do partial postback.
The example would look like this
<asp:UpdatePanel ID="UpdatePanel" runat="server>
<ContentTemplate>
<CR:CrystalReportViewer ID="CRViewer" runat="server" AutoDataBind="true" EnableParameterPrompt="False" ReuseParameterValuesOnRefresh="True" ToolPanelView="None" EnableDatabaseLogonPrompt="False" HasCrystalLogo="False" HasToggleGroupTreeButton="False" HasToggleParameterPanelButton="False" HasDrilldownTabs="False" HasDrillUpButton="False" HasRefreshButton="True" HasPageNavigationButtons="True" HasPrintButton="True" DisplayToolbar="True" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSubmit" />
</Triggers>
</asp:UpdatePanel>
Make the button the trigger for the updatepanel meaning if you press the button only the part inside the updatepanel will reload so you won't lose any values

FileUpload.Hasfile is returning false(What is the reason?)

I have a fileupload control on my .aspx page.
<asp:FileUpload ID="FileUpload1" runat="server" />
I am validating my control on my CS page.
if (FileUpload1.HasFile)
but this if condition is returning always false. I am not getting what is the actual reason! Can anyone help me in this?
FileUpload control is not compatible with UpdatePanel. You have two options
Move the control outside of UpdatePanel
If not possible, add a PostBackTrigger on the UpdatePanel
An example
<Triggers>
<asp:PostBackTrigger ControlID="yourButtonIdThatSubmitsFile" />
</Triggers>
For more information, you can refer to http://forums.asp.net/t/1142794.aspx
I have put my FileUpload Control into a Updatepanel. Then apply a trigger on those buttons from where data is submitting.
<td>
<asp:UpdatePanel runat="server" ID="updatepanel1">
<Triggers><asp:PostBackTrigger ControlID="btnsubNxtClm" /></Triggers>
<Triggers><asp:PostBackTrigger ControlID="btnsubmit" /></Triggers>
<ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</td>

AsyncPostBack FileUpload on a ModalPopup

I am using a UpdatePanel, and my submit button is one of the triggers along with the clear button. But the problem is I have a FileUpload Control in the div. This is a modal popup, so it displays a form for a user to upload a little note. When I try to upload a file with AsyncPostBackTrigger it does nothing (which I have read about). My question is how do I not use the PostBackTrigger because I want to use the asyncpostbacktrigger because if an error occurs, then the Modal popup closes and the user doesnt know if the file was uploaded or not. What can I do?
Code:
<asp:Panel ID="addnotepanel" runat="server" style="/*display:none;*/" CssClass="addnotepanel">
<asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" />
<br />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ClrBtn" />
<asp:PostBackTrigger ControlID="SubmitBtn" />
</Triggers>
</asp:UpdatePanel>
File:
<br />
<asp:Label ID="ErrorLabel" runat="server" Visible="False"></asp:Label>
<br />
<asp:Button ID="Submitbtn" runat="server" Text="Submit"
onclick="Submitbtn_Click" />
<asp:Button ID="CnlBtn" runat="server" Text="Cancel" onclick="CnlBtn_Click" />
<asp:Button ID="ClrBtn" runat="server" onclick="ClrBtn_Click"
Text="Clear" />
</div></asp:Panel>
keep SubmitBtn as a PostBackTrigger but dont set it as the "OkControlID" of the modalpopupextender.
in the Submitbtn_Click server side sub, call yourModalpopupextenderID.hide() if the upload is completed so the Modal pop up closes only if there is no error.
You could use a AsyncFileUpload from the AjaxControlToolkit
Here, as an exemple some code to show how to use it :
<AjaxControlToolkit:AsyncFileUpload ID="AttachementsFileUpload"
runat="server"
OnUploadedComplete="AttachementsFileUpload_UploadedComplete"
OnClientUploadComplete="uploadComplete" />
<script type="text/javascript">
var UpdateAttachementsGridViewButton = '<%= UpdateAttachementsGridViewButton.ClientID %>';
function uploadComplete(sender, args) {
$get(UpdateAttachementsGridViewButton).click();
}
</script>
As you see, when the upload is complete, I use Javascript to trigger an click on an hidden button. Meanwhile I retrieve the file in the AttachementsFileUpload_UploadedComplete using something like this:
Dim AttachementsFileUpload As AjaxControlToolkit.AsyncFileUpload = AnnouncementFormView.FindControl("AttachementsFileUpload")
Attachements.add(e.filename, AttachementsFileUpload.FileBytes)
It's how I used it in my situation, but you will find plenty of examples on how it work

<asp:FileUpload with UpdatePanel

Im trying tp upload more than one image, and when each one I upload I will show it in a repeater, but in the code behind the FileUpload1.HasFile is always False , this is a piece of my code :
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional" >
<ContentTemplate>
<asp:Repeater ID="rpUploadedImages" runat="server">
<ItemTemplate>
<img src='../Images/<%# DataBinder.Eval(Container.DataItem, "ImagePath")%>'/><br />
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnupload" EventName="click" />
</Triggers>
</asp:UpdatePanel>
<asp:FileUpload ID="FileUpload1" runat="server" /><br />
<asp:Button ID="btnupload" runat="server" Text="Upload" onclick="btnupload_Click" />
The FileUpload control does not work with UpdatePanel, you will need to do a full post back to get the file on the server... Now there are a lot of tricks to make it ajaxy...
http://geekswithblogs.net/ranganh/archive/2008/04/01/file-upload-in-updatepanel-asp.net-ajax.aspx
Another tricky way is to create iframe with fileupload + submit button(or some trigger) inside your main form. iframe will postback with no effect to main page.

Creating Multiple Hidden Div's in ASP.Net |Ajax | JQuery

i'm kinda new in web programming,
i'm trying to design a search page.
i want to creating few radio buttons where each click on a radio button will show a div
contains the related search div's.
and from there to do the query to the database(not related to the post)
how can i do that ?
tried to search for it , and didn't get good answer.
i want that the change of the page will be in server side and not the client side.
p.s.
i have been working with ajax control kit so far..
thanks for the help.
You just need an UpdatePanel, radio buttons and a MultiView control.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<asp:RadioButton ...
<asp:RadioButton ...
</div>
<asp:MultiView ID="mvAll" runat="server" ActiveViewIndex="-1">
<asp:View ID="vwFirst" runat="server">
</asp:View>
<asp:View ID="vwSecond" runat="server">
</asp:View>
...
</asp:MultiView>
</ContentTemplate>
</asp:UpdatePanel>
When the selected radio button changed you just set the View related to be active,
mvAll.SetActiveView(ViewIDYouNeed);
You can accomplish this with Panels and an Update Panel.
<asp:RadioButton ID="rdo1" AutoPostBack="true" GroupName="radios" runat="server" OnCheckedChanged="ShowDivs" />
<asp:RadioButton ID="rdo2" AutoPostBack="true" GroupName="radio2" runat="server" OnCheckedChanged="ShowDivs" />
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnl1" runat="server" Visible="false"></asp:Panel>
<asp:Panel ID="pnl2" runat="server" Visible="false"></asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="rdo1" />
<asp:AsyncPostBackTrigger ControlID="rdo2" />
</Triggers>
</asp:UpdatePanel>
You would then handle setting the Visible property of the panels in your ShowDivs method in your code behind.
Or, you could use jquery/javascript to accomplish this.
<input type="radio" onClick="ShowDiv(1)" />
function ShowDiv(id) {
HideDivs();
$(id).show('slow');
}

Resources