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

John Avis by | April 9, 2019 | ASP.NET Web Forms Bootstrap

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

ASP.NET Web Forms

ASP.NET bug with RadioButton GroupName in Repeater

by John Avis | September 1, 2019

I rediscovered a bug in ASP.NET that affects RadioButtons inside repeaters. Here is my solution to the problem.


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

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

Leave a Comment

Tags

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.