This is a short blog about solving a nasty problem with using Bootstrap’s Modal Dialogs with ASP.NET and Master Pages.
Most examples for using Bootstrap’s very robust dialog support go something like this:
Page Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" />
<script type="text/javascript" src="/includes/js/jquery-min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Button ID="btnShowModal" runat="server"
Text="Show Modal"
CssClass="btn btn-primary btn-info"
data-target="#pnlModal"
data-toggle="modal"
OnClientClick="javascript:return false;" />
<asp:Panel ID="pnlModal" runat="server" role="dialog"
CssClass="modal fade">
<div class="modal-dialog">
<div class="modal-content" runat="server">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">
Bootstrap Modal Dialog in ASP.NET</h4>
</div>
<div class="modal-body">
<p>
This is the body text
</p>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-default"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</asp:Panel>
</form>
</body>
</html>
Pushing the button shows the dialog, and everything’s ducky. But try the same thing in an ASP.Net app with a master page and nothing happens.
Why? The answer comes down to the “data-target” attribute of the invoking button, which is meant to tell Bootstrap the panel to activate:
<asp:Button ID="btnShowModal" runat="server" Text="Show Modal" CssClass="btn btn-primary btn-info" data-target="#pnlModal" data-toggle="modal" OnClientClick="javascript:return false;" />
The problem is that in an application with master pages, the actual rendered name of the pnlModal div will likely become something like “ctl00_ContentPlaceHolder1_pnlModal” and Bootstrap won’t be able to associate it with the necessary JavaScript to show the dialog so the button does nothing.
To solve this, you just need to set the data-target to pnlModal’s clientID (the rendered name). Since data-target isn’t a standard, supported HTML attribute, you can use the Attributes.Add method to set it via the Page_Load event of your code-behind as follows:
Code-behind Code (VB)
Protected Sub Page_Load(sender As Object, e As EventArgs)
Handles Me.Load
If Not Page.IsPostBack Then
Me.btnShowModal.Attributes.Add("data-target", "#" & pnlModal.ClientID)
End If
End Sub
…and you’re good to go!
Credit: This post builds upon KHComputers’ excellent contribution about Bootstrap Modal Dialogs in ASP.NET at VBForums
One response to “Using Bootstrap Modal Dialogs with ASP.Net and Master Pages”