Bootstrap Modal Popup showing after some Delay on PostBack in ASP.Net

Last Reply one year ago By Mudassar

Posted one year ago

Hello, I'm using PostBackTrigger to get the value of the file loaded, but since the page got the return, the modal is closed, what I did was to show the modal again in the Save button event.

The problem is that there is a delay in showing the modal, this is very annoying visually, how can I solve this problem?

Thank you,

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);
    }
}


protected void btnSubmit_Click(object sender, EventArgs e) 
{ 
     /*...more code..*/ 
     ScriptManager.RegisterStartupScript(this, this.GetType(), "script", "openpopup();", true); 
}

 

<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>

 

<script language="javascript" type="text/javascript">
     function openpopup() {
           $("#myModal").modal('show');
     }
</script>

 

 

Posted one year ago

I am checking. I will get back to you soon.


Posted one year ago

When you load the Popup again after PostBack it will show only after all the CSS and Scripts are loaded.

Hence the delay which you are expecting is natural and cannot be removed.


Posted one year ago

Thank you for responding, then, there is some way to make the popup not close after the PostBack, to not open the popup again.


Posted one year ago

No there is no way. As the page gets postback you need to reopen it after PostBack.


Posted one year ago

You need to understand, PostBack means whole page what you see is discarded and a new one comes from server.

Thus what you want is practically not possible.

The only way is to remove FileUpload and use the AJAX File Upload alternatives.

Drag and Drop multiple File upload using jQuery AJAX in ASP.Net using C# and VB.Net

Upload multiple files with Progress Bar using AngularJS in ASP.Net using C# and VB.Net