Attempting to use a FileUpload or AsyncFileUpload control in an updatepanel on a NET 4.5/C# web application.
I've tried using either standard Scriptmanager or ToolKitScriptManager in my masterpage.
My Save button is set as a PostBackTrigger (tried AsyncPostbackTrigger too).
No matter what, my (Async)FileUpload.HasFile always returns false.
Remove the updatepanel and both uploadcontrols work fine.
What really throws me is that I have this working in another project (scriptmanager in masterpage, Fileupload in updatepanel, SaveButton is PostbackTrigger).
Is there some specific AJAX version or .NET version that can cause problems?
This is extremely frustrating.
Adding the button to the UpdatePanel's trigger tag, I got it working:
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<asp:FileUpload ID="FileUpload" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload"
OnClick = "btnUpLoad_OnClick" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID = "btnUpload" />
</Triggers>
</asp:UpdatePanel>
I did not have to do anything different server-side (like user5159158's answer).
In Page_Load add: Page.Form.Attributes.Add("enctype", "multipart/form-data");
File Upload will not work with a partial post back. It requires full page request. So add the below line in your page load.
ScriptManager.GetCurrent(this).RegisterPostBackControl(this.YourControlID);
FileUpload
FileUpload requires full page request. This is a limitation of the XmlHttpRequest component used in all AJAX frameworks for asynchronous calls to the application.
What really throws me is that I have this working in another project
(scriptmanager in masterpage, Fileupload in updatepanel, SaveButton is
PostbackTrigger).
I think you are using Full PostBack, although FileUpload is inside **UpdatePanel.
For example,
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="SaveButton" runat="server" OnClick="SaveButton_Click"
Text="Upload your file" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="SaveButton" />
</Triggers>
</asp:UpdatePanel>
AsyncFileUpload
If you use AsyncFileUpload with UpdatePanel, AsyncFileUpload.HasFile should only checked inside UploadedComplete (you cannot check inside Button click event).
The reason is AsyncFileUpload is uploaded the file via Async by itself.
Note: make sure you use ToolkitScriptManager instead of ScriptManager
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="Server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<ajaxToolkit:AsyncFileUpload runat="server" ID="AsyncFileUpload1"
OnUploadedComplete="AsyncFileUpload1_UploadedComplete" />
<asp:TextBox runat="server" ID="TextBox1" /><br/>
<asp:Button ID="SaveButton" runat="server" OnClick="SaveButton_Click"
Text="Save" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="SaveButton" />
</Triggers>
</asp:UpdatePanel>
private string FileName
{
get { return (string)(Session["FileName"] ?? ""); }
set { Session["FileName"] = value; }
}
protected void SaveButton_Click(object sender, EventArgs e)
{
string fileName = FileName;
string path = Server.MapPath("~/App_Data/");
var fileInfo = new FileInfo(path + FileName);
}
protected void AsyncFileUpload1_UploadedComplete(object sender,
AsyncFileUploadEventArgs e)
{
if (AsyncFileUpload1.HasFile)
{
FileName = AsyncFileUpload1.FileName;
string path = Server.MapPath("~/App_Data/");
AsyncFileUpload1.SaveAs(path + AsyncFileUpload1.FileName);
}
}
Other Thoughts
I personally do not like using AsyncFileUpload inside UpdatePanel. Instead, I'll rather use Full PostBack if I need to upload a file.
Related
I have a Listbox that exists in an UpdatePanel on an ASP.NET webform. Also inside the UpdatePanel, exists a Button that adds a bunch of ListItem's to the Listbox, this PostBackTrigger as shown below:
<asp:UpdatePanel ID="updSection6" runat="server">
<ContentTemplate>
<asp:LinkButton Text="Run Scan" ID="btnEditSectionStory6" runat="server" OnClick="btnRunScan_Click" />
<br />
<asp:ListBox ID="lbLog" runat="server" Height="263px" Width="747px"></asp:ListBox>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnEditSectionStory6" />
</Triggers>
</asp:UpdatePanel>
I add items in the click event:
protected void btnRunScan_Click(object sender, EventArgs e)
{
lbLog.Items.Add("Scan Beginning...");
.....hundreds of other items
}
The items are added to the ListBox, however it is after the entire btnRunScan_Click method is run, rather than adding them as each event occurs (So the user can receive messages as the actions occur). Am I missing an attribute or something on the UpdatePanel?
TIA
To Add Items without refreshing page or prevent from calling the cyclic events use following code and eliminate postBackTrigger inside the Trigger.Use following code that is tested working for me.Also use the scriptManager to prevent from exception over to use the updatePanel
.aspx design file
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="updSection6" runat="server">
<Triggers>
</Triggers>
<ContentTemplate>
<asp:LinkButton Text="Run Scan" ID="btnEditSectionStory6" runat="server" OnClick="btnRunScan_Click" />
<br />
<asp:ListBox ID="lbLog" runat="server" Height="263px" Width="747px"></asp:ListBox>
</ContentTemplate>
</asp:UpdatePanel>
.cs file
protected void btnRunScan_Click(object sender, EventArgs e)
{
lbLog.Items.Add("Scan Beginning...");
}
As other also mention you can also use jquery with ajax to code over the client side to do this one.
My updatePanel is in MasterPage and FileUpload is in Child Page.
As FileUpload requires a full PagePostBack I tried following approaches, but none of them worked, fileupload.hasfile gives false and postedfile is null. Not sure what else to do. Please go through and suggest. Is there anything that I am missing.
Using .NET Framework 4.0, Bootstrap 4
Approach 1 - Adding Postback trigger through code behind
AddTriggers(btnupload.UniqueID);
public static void AddTriggers(string ControlID)
{
UpdatePanel UP = Page.Master.FindControl("MainUpdPanel") as UpdatePanel;
UpdatePanelControlTrigger trigger = new PostBackTrigger();
trigger.ControlID = ControlID;
UP.Triggers.Add(trigger);
}
Approach 2 - Wrapping fileupload and it's button in a separate UpdatePanel in child Page
<asp:UpdatePanel ID="Upld" runat="server">
<ContentTemplate>
<div class="input-group form-inline">
<asp:FileUpload ID="FileUploadreq" runat="server" />
<asp:Button runat="server" ID="btnupload" Text="Upload" OnClick="btnupload_Click" />
<asp:LinkButton runat="server" Text="View" ID="lnkview" OnClick="lnkview_Click" Visible="False"></asp:LinkButton>
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnupload" />
</Triggers>
</asp:UpdatePanel>
Add enctype="multipart/form-data" to the form tag and add the trigger in your page Page_Init function
protected void Page_Init(object sender, EventArgs e)
{
AddTriggers(btnupload.UniqueID);
}
My problem is, the asp button's onclick is not working inside the updatepanel. Basically what my code does is, I have an asp fileupload control to upload a file. And then afterwards, the user can now click the button and the filename of the uploaded file will be displayed in the asp label control.
But when i tried it, it is not displaying the filename in the label. It does nothing.
Here is the aspx:
<asp:UpdatePanel runat="server" UpdateMode="Always" ID="updPnlName"
ChildrenAsTriggers="true">
<ContentTemplate>
<asp:FileUpload runat="server" ID="Image1"/>
<asp:Button ID="Button2" runat="server"
Text="Upload" OnClick="Button2_Click"/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button2"
EventName="Click"/>
</Triggers>
</asp:UpdatePanel>
<asp:Label ID="Label3" runat="server" Text="Label">
</asp:Label>
Here is the code-behind:
public void Button2_Click(Object sender, EventArgs e)
{
var filename1 = Image1.FileName;
Label3.Text = "Upload successfull - " + filename1;
}
By the way, the reason why i wanted to use updatepanel is to avoid refreshing the entire page when the user clicked the button. Please kindly help me on this one.
Place the label inside the UpdatePanel, this should update the label control's text value.
I DONT WANNA GET MY PAGE TO BE GET REFRESH OR POSTBACK
So I am trying uploading file in updatepanel but onclicking upload button the validation check shows that there is no file
my html code is
<asp:UpdatePanel ID="UpdatePanel16" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:FileUpload ID="fp_upload" runat="server" />
<asp:Button ID="btn_browse" runat="server" Text="Upload" OnClick="btn_browse_Click" />
</ContentTemplate>
</asp:UpdatePanel>
It seems to be
my .cs code is
protected void btn_browse_Click(object sender, EventArgs e)
{
if (fp_upload.HasFile)
{
Response.Write("contains file");
}
else
{
Response.Write("no file");
}
}
when I used to browse the file and click on upload button every times it goes in else condition. Whats the problem.
ALSO I DONT WANNA GET MY PAGE TO BE GET REFRESH OR POSTBACK
To use a FileUpload control inside an UpdatePanel control, set the postback control that submits the file to be a PostBackTrigger control for the panel.
just add PostBackTrigger after </ContentTemplate> for the FileUploader as below:
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="FileUpload1" />
</Triggers>
</asp:UpdatePanel>
and add the below code in page load :
ScriptManager.GetCurrent(this).RegisterPostBackControl(FileUpload1);
or if you want to make it async, you can use this :
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnAsyncUpload" runat="server"
Text="Async_Upload" OnClick = "Async_Upload_File" />
<asp:Button ID="btnUpload" runat="server" Text="Upload"
OnClick = "Upload_File" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID = "btnAsyncUpload"
EventName = "Click" />
<asp:PostBackTrigger ControlID = "btnUpload" />
</Triggers>
</asp:UpdatePanel>
Write trigger will instruct the button that we are using for the upload to perform a full postback
<asp:UpdatePanel ID="UpdatePanel16" runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="btn_browse" />
</Triggers>
<ContentTemplate>
<asp:FileUpload ID="fp_upload" runat="server" />
<asp:Button ID="btn_browse" runat="server" Text="Upload" OnClick="btn_browse_Click" />
</ContentTemplate>
</asp:UpdatePanel>
I have two asp.net updatepanels on my page. One of them has a checkbox and other one has some labels. I want to update the contents of second updatepanel when checkbox is checked/unchecked. I am using following code:
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm._doPostBack('UpdatePanel2', '');
but it is doing full page post back.
Please suggest a solution.
You can set checkbox's AutoPostback to True and make it a trigger of the second UpdatePanel:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="CheckBox1" EventName="CheckedChanged" />
</Triggers>
</asp:UpdatePanel>
And then you can add label changing code in checkbox's "CheckedChanged" event handler, e.g.
protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
{
Label2.Text = DateAndTime.Now;
}
It seems you are looking for update panel triggers, you don't need to trigger it by javascript...