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

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

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

Bootstrap

Bootstrap Icons in Alpha

by John Avis | December 9, 2019

The Bootstrap team have introduced their own open-source icon set.


Bootstrap

What's new in Bootstrap 4.4.0 and 4.4.1?

by John Avis | November 27, 2019

Read about the two major improvements in Bootstrap 4.4.0, released 26 November 2019.


Computers & Internet Web Development Website Hosting

500 Internal Server Error after migrating from IIS 7.5 to IIS 10

by John Avis | November 4, 2019

As support ends for Microsoft Windows Server 2008 I have recently gone through migrating some websites to a new server running Windows Server 2016 and IIS 10 but some of the websites did not work.

Comments

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

Leave a Comment

Tags

About me

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

Subscribe

Get the latest posts delivered to your inbox.