[Solved] FileUpload control not working inside Bootstrap Model Popup

Herlan
 
on Mar 22, 2018 08:00 AM
4693 Views

Hi, 

I have a problem when I put the file load in modal. When the user clicks on the Save button, the data of the file to be loaded is lost.

I share my code, I hope you help me with this problem.

Thank you.

<asp:GridView ID="grvResult" runat="server" AutoGenerateColumns="false"
					  DataKeyNames="ID" OnRowCommand="grvResult_OnRowCommand">
			<Columns>
				<asp:BoundField DataField="Id" HeaderText="Id"/>
				<asp:BoundField DataField="User" HeaderText="User"/>
                <asp:ButtonField CommandName="cncDetail" ControlStyle-CssClass="btn btn-info"
								 ButtonType="Button" Text="Detail" />
			</Columns>
		</asp:GridView>	

 

protected void grvResult_OnRowCommand(object sender, GridViewCommandEventArgs e)
        {
            if (e.CommandName.Equals("cncDetail"))
            {
                System.Text.StringBuilder sb = new System.Text.StringBuilder();

                sb.Append(@"<script type='text/javascript'>");
                sb.Append("$('#myModal').modal('show');");
                sb.Append(@"</script>");

                ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "MyModal", sb.ToString(), false);
            }
		}

 

<div id="myModal" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog">
			<div class="modal-dialog modal-content modal-lg">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
					<h3>Detail</h3>
				</div>
				<asp:UpdatePanel ID="upmisticket" runat="server">
					<ContentTemplate>
						<div class="modal-body">
							<div class="row">
								<div class="col-md-12">
								   <div class="form-group">
										<%----%>
										<asp:UpdatePanel ID="upFile" runat="server" UpdateMode="Conditional">
											<ContentTemplate>
												<asp:FileUpload ID="idFileUpload" runat="server" />
											</ContentTemplate>
											<%--<Triggers>
												<asp:PostBackTrigger ControlID="btnSubmit" />
											</Triggers>--%>
										</asp:UpdatePanel>
									</div>
								</div>
							</div>    
						</div>
						<div class="modal-footer">
							<asp:Button ID="btnSubmit" runat="server" Text="Save" OnClick="btncSubmit_OnClick">
							<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
						</div>
					</ContentTemplate>
					<Triggers>
						<asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />
					</Triggers>
				</asp:UpdatePanel>
			</div>
		</div>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
nagaraju60
 
on Mar 22, 2018 10:54 PM

Dear @Herlan, The problem is with updatepanel trigger event. you are declared

 

<asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />

fileupload control loose the data after postback control

so, you should delcare trigger event as 

<asp:PostBackTrigger ControlID="btnSubmit" />

please refer below code, it works fine..

<div id="myModal" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-content modal-lg">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
            <h3>Detail</h3>
        </div>
        <asp:UpdatePanel ID="upmisticket" runat="server">
            <ContentTemplate>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">

                                <asp:FileUpload ID="idFileUpload" runat="server" />

                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <asp:Button ID="btnSubmit" runat="server" Text="Save" OnClick="btnSubmit_Click" />
                    <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
                </div>
            </ContentTemplate>
            <Triggers>
                <%-- <asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />--%>
                <asp:PostBackTrigger ControlID="btnSubmit" />

            </Triggers>
        </asp:UpdatePanel>
    </div>
</div>