Bootstrap Modals inside UpdatePanels in ASP.NET Web Forms

John Avis by | July 14, 2015 | Bootstrap 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.
Update: I'm now using a purely server-side technique to control Bootstrap 3.x modals. See my new post.

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.

Update: I'm now using a purely server-side technique to control Bootstrap 3.x modals. See my new post.

Related Posts

ASP.NET Web Forms Bootstrap

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

by John Avis | April 9, 2019

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


ASP.NET Web Forms Classic ASP

Custom error pages for ASP.NET Web Forms and Classic ASP in IIS 7 and 8.5

by John Avis | February 20, 2019

I was recently doing some work on a website which has a mixture of older Classic ASP pages and ASP.NET Web Forms pages and ran into problems with custom error pages.


Bootstrap

Sample Bootstrap 4 template for a search orientated two row navbar

by John Avis | January 16, 2019

This sample lends itself to an ecommerce website.

Comments

Mark

by Mark | June 19, 2016

Thanks. I was looking for this

Reply

Barry Michael Doyle

by Barry Michael Doyle | July 11, 2016

Thanks man! What a great help :) It helped me instantly with all my problems!!

Reply

....

by .... | September 22, 2016

Thank You So Much.Great help.

Reply

Francisco Huit

by Francisco Huit | February 20, 2017

gracias, llevaba aproximadamente 35 horas buscando esta solución y lo único que me faltaba era hacer esto

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

crear una función para llamar al modal y no llamarla directamente desde una etiqueta script

Reply

Andrea Marchi

by Andrea Marchi | July 21, 2017

Thank you. I've solved all my problems.

Reply

Yuki Gunawan

by Yuki Gunawan | February 6, 2018

Wonderful thanks you, i have been a week searching for this

Thanks you John Avis

Reply

VincentTaf

by VincentTaf | March 16, 2018

it's a really great site!A lot of helpful information and handy ideas, thank you =)

Reply

David

by David | May 10, 2018

Small enhancement: dismissing the modal window is also possible by using a simple html button with attribute data-dismiss="modal"

Reply

Callisto

by Callisto | August 15, 2018

Excelente aporte me ayudo bastante :D

Reply

Leave a Comment
Tags
ASP.NET Html Forms ASP.NET MVC ASP.NET Web Forms ASP.NET Web Pages Bootstrap C# Classic ASP Cool Websites Databases eBay and PayPal Electrical Repairs General Hardware HTML/CSS Jquery/Javascript Media Center Mobile Phones Responsive Web Design SEO and Social Networking Web Design Web Development Web Security web+db Website Hosting Windows XP Youtube

About me

...mostly about web development and programming, with a little bit of anything else related to the Internet, computers and technology.

Subscribe

Get the latest posts delivered to your inbox.