I have a web application that requires a modal “pop-up” window for collecting extra data from the user. I have done this in the past using JavaScript to open a new window but was wondering if Microsoft’s Atlas library might have something to do this right “out of the box”. I did not find a specific method for doing anything like this but the atlas:DragOverlayExtender and atlas:UpdatePanel looked like them might offer some functionality do get the job done.
Don’t you always worry that there is a one-line solution out there as you proceed to kludge something together? I searched Google and read the Atlas Documentation and lots of blogs but could not find something that did this. With my luck, someone will respond with “Oh, just…”
Anyway, I have come up with an approach that is not really modal (yet) but actually gives me ideas for some very interesting possibilities. Essentially, I place a hidden panel, complete with all of the user interface elements I need for collecting extra input, directly onto the form. Now this is not really exciting except that, with Atlas, I can show and hide the panel without client-side javascript and without a post-back. Further, I can use server-side code to process the data entered into the panel and update other controls on the web form, again without a post-back. So, while the example is fairly trivial, it illustrates how Atlas can greatly simplify something that used to be a great pain with lots of difficult-to-debug javascript.
This is what the page looks like initially, with the input panel and finally with the collected data displayed. Note that a postback is never required.
This is what the solution looks like:
And here is the code for default.aspx. You can simply copy/paste this into a Visual Studio 2005 project that has the Microsoft.Web.Atlas.dll assembly in its Bin folder as well as the requisite entries in web.config. (A ready-to-go project is also available in a Zip file at the bottom of this post.)
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub btnPopup Click(ByVal sender As Object, ByVal e As System.EventArgs)
' show Popup panel
CType(Me.popupUpdatePanel.FindControl("pnlPopup"), Panel).Visible = True
End Sub
Protected Sub btnApply Click(ByVal sender As Object, ByVal e As System.EventArgs)
' use FindControl to locate various controls
Dim txtName As TextBox = CType(Me.popupUpdatePanel.FindControl("txtName"), TextBox)
Dim txtPhone As TextBox = CType(Me.popupUpdatePanel.FindControl("txtPhone"), TextBox)
Dim lblResult As Label = CType(Me.popupUpdatePanel.FindControl("lblResult"), Label)
Try
' This is Good Old Server Side code. We could look up database info, etc.
lblResult.Text = txtName.Text & ", " & txtPhone.Text
Catch ex As Exception
If lblResult IsNot Nothing Then lblResult.Text = ex.Message
End Try
' hide the panel
btnCancel Click(Nothing, Nothing)
Sub btnCancel Click(ByVal sender As Object, ByVal e As EventArgs)
' hide popup panel
CType(Me.popupUpdatePanel.FindControl("pnlPopup"), Panel).Visible = False
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
<div>
<atlas:UpdatePanel ID="popupUpdatePanel" runat="server" Mode="Always">
<ContentTemplate>
<asp:Panel ID="pnlPopup" runat="server" Height="200px" Width="300px" BackColor="gainsboro"
Visible="false" BorderColor="gray" BorderStyle="Outset" BorderWidth="2">
<div style="height: 10px; background-color: Blue; color: White; width: auto;">
Enter User Info</div>
Name: <asp:TextBox runat="server" ID="txtName" /><br />
phone: <asp:TextBox runat="server" ID="txtPhone" /><br />
<asp:Button ID="btnApply" runat="Server" Text="Apply" OnClick="btnApply Click" />
<asp:Button ID="btnCancel" runat="Server" OnClick="btnCancel Click" Text="Cancel" />
</asp:Panel>
<asp:Button ID="btnPopup" runat="server" Text="Prompt for User Info" OnClick="btnPopup Click" />
<asp:Label ID="lblResult" runat="server" />
</ContentTemplate>
<Triggers>
<atlas:ControlEventTrigger ControlID="btnPopup" EventName="Click" />
</Triggers>
</atlas:UpdatePanel>
</div>
</form>
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<references>
</references>
<components>
</components>
</page>
</body>
</html>
This is my foray into Atlas and, as someone who has done a good bit of client-side javascript, I am quick to jump on the Atlas band-wagon. I actually hope there is or will be an <Atlas:ModalPanel..> control but if not, I can already see where the basic controls provided in the March CTP can be used to do some interesting stuff. So if anyone knows of the “one liner”… please let me know.
Brian Mishler
http://www.qualitydata.com
Download: AtlasWebSite1.zip
Disclaimer The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.