More on Bootstrap 4 modals in ASP.NET Web Forms applications using UpdatePanels

johna by | April 9, 2019 | ASP.NET Web Forms Bootstrap Web Development

ASP.NET Bootstrap 4 Modal

I've now written a couple of posts on the topic of using Bootstrap modals in ASP.NET Web Forms projects, one on using native Bootstrap modal methods with ClientScript and another attempting to control them with server-side code only. Both methods had some issues.

In this, my third post, I go over the methods I am using now and the problems I have encountered and overcome.

The previous server-side method was ideal, but I couldn't get around some issues, so I now believe the best method is to use the native JavaScript methods to hide and show the modals.

Here's some sample code for how I do this now:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" CssClass="btn btn-primary" OnClick="Button1_Click" Text="Show Modal" />
</ContentTemplate>
</asp:UpdatePanel>

<asp:Panel ID="Modal1" runat="server" CssClass="modal" data-backdrop="static" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Sample Modal</h5>
</div>
<div class="modal-body">
Sample modal content.
</div>
<div class="modal-footer">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="Button2" runat="server" CssClass="btn btn-primary" OnClick="Button2_Click" Text="Continue" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
</asp:Panel>


protected void Button1_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(), "Modal1_show", "$(function(){$('#" + Modal1.ClientID + "').modal('show');});", true);
}

protected void Button2_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(UpdatePanel2, UpdatePanel2.GetType(), "Modal1_hide", "$(function(){$('#" + Modal1.ClientID + "').modal('hide');});", true);
}


It is important that any controls inside the modal that cause a postback are contained in an UpdatePanel inside the modal. Remember that UpdatePanel contents are recreated on partial postback, and if this happens the modal gets destroyed and can no longer be controlled so you must not update the UpdatePanel that wraps the modal itself. This will leave the page with no modal but still with the grey backdrop making the page unusable.

In my example, I have an UpdatePanel wrapped around Button2 which is used to close the modal.

What if you want some other part of the page to update based on an action inside the modal or when the modal is closed? You need to have an UpdatePanel wrapping the other content you want to update and in your server-side code you must manually force an update to both (or more) UpdatePanels.

Let's change the above code so that when the modal is clicked it updates a Label control in another UpdatePanel:

<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
<div>
</ContentTemplate>
</asp:UpdatePanel>


protected void Button2_Click(object sender, EventArgs e)
{
Label1.Text += "Modal closed. ";

ScriptManager.RegisterStartupScript(UpdatePanel2, UpdatePanel2.GetType(), "Modal1_hide", "$(function(){$('#" + Modal1.ClientID + "').modal('hide');});", true);

UpdatePanel2.Update();
UpdatePanel3.Update();
}


Note that this applies to both Bootstrap v3.x and v4.x.

Related Posts

Web Development

How to set up a debugging using the Turnkey Linux LAMP stack and VS Code

by johna | December 19, 2023
The second part in my guide to setting up a website and database using the Turnkey Linux LAMP stack.

Website Hosting Web Development

How to set up a website and database using the Turnkey Linux LAMP stack

by johna | November 18, 2023
If you need to host your own website for the purposes of web development, Turnkey Linux LAMP Stack is an easy to install all-in-one solution that you can set up on a spare computer or a VM (Virtual Machine).

Bootstrap

How I use the new Bootstrap Icons web font

by johna | January 7, 2022
But using a free online tool, you can create your own web font with just the Bootstrap icons you need.

Comments

There are no comments yet. Be the first to leave a comment!

Leave a Comment

About

...random postings about web development and programming, Internet, computers and electronics topics.

I recommend ASPnix for web hosting and Crazy Domains for domain registration.

Subscribe

Get the latest posts delivered to your inbox.