Bootstrap modals in ASP.NET Web Forms applications using UpdatePanels

I've tried various methods of attempting to control Bootstrap's modals in ASP.NET Web Forms but I now realise the best way is just to use Bootstrap's native techniques.

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

Markup:

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

Code-behind:

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.