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

    ProtectedSub btnPopup Click(ByVal sender AsObject, ByVal e As System.EventArgs)

        ' show Popup panel

        CType(Me.popupUpdatePanel.FindControl("pnlPopup"), Panel).Visible = True

 

    EndSub

    ProtectedSub btnApply Click(ByVal sender AsObject, 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 IsNotNothingThen lblResult.Text = ex.Message

        EndTry

       

        ' hide the panel

        btnCancel Click(Nothing, Nothing)

       

    EndSub

    Sub btnCancel Click(ByVal sender AsObject, ByVal e As EventArgs)

        ' hide popup panel

        CType(Me.popupUpdatePanel.FindControl("pnlPopup"), Panel).Visible = False

       

    EndSub

</ script >

 

< html xmlns ="http://www.w3.org/1999/xhtml">

< head runat ="server">

    <title>Untitled Page</title>

</ head >

< body >

    <formid="form1"runat="server">

        <atlas:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering="true"/>

        <div>

            <atlas:UpdatePanelID="popupUpdatePanel"runat="server"Mode="Always">

                <ContentTemplate>

                    <asp:PanelID="pnlPopup"runat="server"Height="200px"Width="300px"BackColor="gainsboro"

                        Visible="false"BorderColor="gray"BorderStyle="Outset"BorderWidth="2">

                        <divstyle="height: 10px; background-color: Blue; color: White; width: auto;">

                            Enter User Info</div>

                        Name: <asp:TextBoxrunat="server"ID="txtName"/><br/>

                        phone: <asp:TextBoxrunat="server"ID="txtPhone"/><br/>

                        <asp:ButtonID="btnApply"runat="Server"Text="Apply"OnClick="btnApply Click"/>

                        <asp:ButtonID="btnCancel"runat="Server"OnClick="btnCancel Click"Text="Cancel"/>

                    </asp:Panel>

                    <asp:ButtonID="btnPopup"runat="server"Text="Prompt for User Info"OnClick="btnPopup Click"/>

                    <asp:LabelID="lblResult"runat="server"/>

                </ContentTemplate>

                <Triggers>

                    <atlas:ControlEventTriggerControlID="btnPopup"EventName="Click"/>

                </Triggers>

            </atlas:UpdatePanel>

        </div>

    </form>

 

    <scripttype="text/xml-script">

        <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">

            <references>

            </references>

            <components>

            </components>

        </page>

    </script>

 

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