Bootstrap Modals inside UpdatePanels in ASP.NET Web Forms

I have been working on an ASP.NET Web Forms project that is being converted to Bootstrap 3 and have run into a few issues with Modals.

From this experience, here's how you can structure your markup for when you need to use Bootstrap Modals inside ASP.NET UpdatePanels.

The most important part of this is that you don't place Modals inside UpdatePanels.

Okay, so that contradicts a bit with what I said above, but I'm not suggesting you don't use UpdatePanels, just that you place them appropriately.

Bootstrap Modals don't work when the relevant parts of the DOM are altered after the page is initially rendered. This makes them a bit more difficult to implement in an ASP.NET Web Forms environment.

Let's look at an example where we have a list of records generated by a Repeater, each having an edit button which opens a Modal where the record can be edited.

I would wrap an UpdatePanel around the table, have the Modal outside of this UpdatePanel, but have a second UpdatePanel inside the Modal.

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
	<ContentTemplate>
		<ul>
			<asp:Repeater ID="Repeater1" runat="server" OnItemCommand="Repeater1_ItemCommand">
				<ItemTemplate>
					<li><asp:LinkButton ID="Button1" runat="server" CommandArgument='<%# Eval("ID") %>' Text='<%# Eval("Title") %>'></asp:LinkButton></li>
				</ItemTemplate>
			</asp:Repeater>
		</ul>
	</ContentTemplate>
</asp:UpdatePanel>

<asp:Panel ID="Panel1" runat="server" CssClass="modal" DefaultButton="btnContactInsertSubmit" tabindex="-1" role="dialog" aria-labelledby="myLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
				<ContentTemplate>
					<div class="modal-header">
						<h4 class="modal-title" id=" myLabel ">Edit</h4>
					</div>
					<div class="modal-body">
						...
					</div>
					<div class="modal-footer">
						<asp:Button ID="Button2" runat="server" CssClass="btn btn-primary" OnClick="Button2_Click" Text="Submit" />
						<asp:LinkButton ID="Button3" runat="server" CssClass="btn btn-link" OnClick="Button3_Click" Text="Cancel"></asp:LinkButton>
					</div>
				</ContentTemplate>
			</asp:UpdatePanel>
		</div>
	</div>
</asp:Panel>

In the code behind we can handle the showing and hiding of the Modal by injecting some JavaScript on asynchronous PostBack, and selectively updating only the appropriate UpdatePanel.

protected void repContact_ItemCommand(object sender, RepeaterCommandEventArgs e)
{
	int id = Utilities.IntParse(e.CommandArgument.ToString());
//Populate your form inside the Modal here
ScriptManager.RegisterStartupScript(UpdatePanel2, UpdatePanel2.GetType(), "show", "$(function () { $('#" + Panel1.ClientID + "').modal('show'); });", true);
UpdatePanel2.Update();
}

protected void Button3_Click(object sender, EventArgs e)
{
	ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(), "hide", "$(function () { $('#" + Panel1.ClientID + "').modal('hide'); });", true);
	UpdatePanel1.Update();
}

protected void Button2_Click(object sender, EventArgs e)
{
	//Save your record here
	ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(), "hide", "$(function () { $('#" + Panel1.ClientID + "').modal('hide'); });", true);
	UpdatePanel1.Update();
}

This solution has worked perfectly for me even in complex Web Forms scenarios.