Phil Bernie Consulting

This article will show you how to use the ModalPopupExtender from the AjaxControlToolKit in conjunction with an Iron Speed Designer generated application to insert a new record into a ShowTablePage using a Modal Popup Window. I’m going to assume that you are pretty familiar with Iron Speed and have already generated an application. What I will now do is extend a standard “ShowTablePage” to allow you to add records to the table by using a modal popup window.

Setup

Before we begin, you need to have a few things setup on your machine. I’ll assume you have Visual Studio already installed and that you also have the AjaxControlToolKit installed. If you don’t have these installed, then you will need to set them up before proceeding. Once you have these installed, you need to take the following steps:

1. Open your Iron Speed application up in Visual Studio. You can do this by going to File -> Open -> Web Site which will bring up the “Open Website” dialog
   
   
   
2. In the “Open Website” dialog, select your Local IIS and choose your website that Iron Speed Designer would have already created for you. Your Iron Speed project will not be opened in Visual Studio
   
   
   
3. In the Solution Explorer, right click on the “Bin” folder and add the following references:
   
   
   
   1. In the .Net tab select “System.Web.Extensions”
      
      
      
   2. Then in the “Browse” tab navigate to the directory where you installed the AjaxControlToolKit. Then go to the “SampleWebSite\Bin” directory and select the AjaxControlToolKit.dll and add it as a reference also.
      
      
      

Rebuild your solution from within Visual Studio and you are now ready to start using the AjaxControlToolKit with your Iron Speed application.

Setting Up The ModalPopupExtender

Now that your application is setup, you need to setup your page for use with the ModalPopupExtender. For this demo, I’ll be setting up my “ShowTaskTablePage” with the ModalPopupExtender functionality.

1. First you need to register the AjaxControlToolkit assembly on the page using the Register Page Directive. To do this open up the ShowTaskTablePage.html file in Visual Studio and insert the following code at the very top of the page:
   
   <%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”cc1″ %>
   
2. Next you need to add your ModalPopupExtender underneath your generated table control on the page. You can either drag one onto the page from the toolbox or add one using the following code:
   
   <cc1:ModalPopupExtender ID=”ModalPopup” runat=”server”
   TargetControlID=”hiddenButton”
   BackgroundCssClass=”modalBackground”
   PopupControlID=”panel1″
   DropShadow=”true”
   OkControlID=”btnSavePopup”
   OnOkScript=”onOk()”
   CancelControlID=”btnCancelPopup”
   BehaviorID=”ModalPopup”>
   </cc1:ModalPopupExtender>
   
   At this stage, the ModalPopup has a number of properties that have values but need controls to be setup for them otherwise the modal popup won’t work.
   
3. The first property we’ll set up on the ModalPopup is the PopupControlID. This property defines the control that will be displayed inside the ModalPopupExtender once we show it on the page. I’ve assigned a value to it called “panel1″ which is a panel that will house an “Add Record Control” that is generated by Iron Speed Designer.
   
   I’ll add the panel below the ModalPopupExtender using the following code:
   
   <asp:Panel ID=”panel1″ CssClass=”modalPopup” runat=”server”>
   </panel>
   
4. Now I need to open up Iron Speed Designer and insert the “Add Record Control” onto the Show Table page. I simply added a new “Add Record” control to my page and configured it to use my Task table that I defined in the database.
   
   
   
   
   
   The final customization I made was to remove the Save and Cancel buttons from the control
   
   
   
   And now my control has been added to the page in the Iron Speed Designer under my Table Control
   
   
   
5. Now I want to move the Add Record control to be inside the panel that I created earlier so that when the modal popup is activated it will show up inside the panel. To do this I switch to HTML view in Iron Speed, cut all the generated control text and move paste it into the page so it is nested within the panel control tags I created earlier. Your code should look something like this:
   
   <asp:Panel ID=”panel1″ CssClass=”modalPopup” runat=”server”>
   <GEN:Insert TYPE=”Panel” />
   <!– the rest of your panel code goes here –>
   </GEN:RECORD>
   </asp:Panel>
   
6. Now when we created the control we chose to create it without buttons. You now need to add those in manually via visual studio. You will need to add two buttons to your panel, one for the “OkControlID” property and one for the “CancelControlID” property on the ModalPopupExtender. You need to make sure that you add your buttons inside the panel that we created earlier. I added mine below the Add Record control like so:
   
   </GEN:RECORD>
   <asp:Button runat=”server” ID=”btnCancelPopup” text=”Cancel” CausesValidation=”false”/>
   <asp:Button runat=”server” ID=”btnSavePopup” text=”Save” CausesValidation=”false”/>
   </asp:Panel>
   
   These controls need to go inside the panel because they will be visible when the ModalPopup is shown and will be used to control the actions of the popup.
   
7. One annoying thing about the ModalPopupExtender is that it requires an ASP.NET control to be assigned to the TargetControlID. So what I’m going to do is assign a hidden button to the TargetControlID. This button will never get used because I’m going to manually show the ModalPopup using a javascript function assigned to the “New” button on the table control. So under the panel insert the following code to add a hidden button and then hide it inside a div so it still gets rendered to the page, you just never have to see it:
   
   <div style=”display:none; visibility:hidden;”>
   <asp:Button runat=”server” ID=”hiddenButton” CausesValidation=false />
   </div>
   
8. The ModalPopup has the ability to run some JavaScript when the Ok event is fired from within the ModalPopup. This Ok script should be defined on the page and should correspond the value set for the “OnOkScript” property. I’ve simply created a script that returns true, but you can put any valid javascript you like in there. I’ve added my script just below the body tag in the html page.
   
   <script type=”text/javascript”>
   function onOk()
   {
   return true;
   }
   </script>
   
9. The last little thing you might want to do is to add some styles to your Styles.css stylesheet in the styles folder. I added the following styles to mine:
   
   .modalBackground {
       background-color:Gray;
       filter:alpha(opacity=70);
       opacity:0.7;
   }
   
   .modalPopup {
       background-color:#ffffdd;
       border-width:1px;
       border-style:solid;
       border-color:Silver;
       padding:3px;
       width:500px;
   }
   
   This is the final stage in the setup and we are now ready to use the ModalPopupExtender.

Using the ModalPopupExtender

Using the ModalPopupExtender is pretty easy once you know how. We want to use this particular ModalPopupExtender to show when the “New” button is clicked on the table control. To make this happen we need to do the following steps.

1. We need to write a little javascript function that will show the ModalPopupExtender. You can see this script below:
   
   function ShowModal()
   {
   $find(“ModalPopup”).show();
   }
   
   As you can see this script is fairly self explanatory, it finds the instance of the modal popup extender we want to show and calls the “show()” method.
   
2. Once we have created our Javascript function we need to setup our table button to call this function when it is clicked. This is easily done in the Iron Speed Designer by right clicking on the button and selecting “Properties”
   
   
   
   Then in the Properties dialog select the Attributes tab and add a new Attribute Called Button-OnClientClick and enter the value to be “ShowModal();return false;”
   
   
   
   The reason we add the “return false;” is that we no longer want the page to post back and do whatever function it previously did. Setting return false; stops the button from performing a postback action to the server.
   
3. Once you have done that, you are ready to view the ModalPopup in action. Build your application and click the New button to test it out.
   
   
   

This is pretty cool, but we want to be able to save the data we capture in the control back to the database. Lets look at some code for adding the data to the database.

Adding Data To the Database from the ModalPopupExtender

Ok we’re on the home stretch now and thanks to the power of the AjaxControlToolkit and the Iron Speed generated code, this final step can be achieved in just a few lines.

1. First we need to add a bit of extra javascript to our onOk() function. As you saw earlier, we were just returning true, however now we want to simulate a postback from the webpage so we can save the data in the Add Record control in the ModalPopupExtender. To do this, we have to find the btnSavePostBack button and force a postback in Javascript because the modal popup extender blocks it by default. Here’s the code to make it happen:
   
   function onOk()
   {
   var btn = $get(‘btnSavePopup’);
   if(btn)
       {
        __doPostBack(‘btnSavePopup’,”);
       }
   return true;
   }
   
   
2. Now that we have setup the code to postback to the server, we need to create an event handler in the codebehind that will save the data in the Add Record control and refresh the Table Control.
   
   Protected Sub btnSavePopup_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSavePopup.Click
   ‘Save Record To the Database
   Try
   Utils.DbUtils.StartTransaction()
   Me.TaskRecordControl.SaveData()
   Utils.DbUtils.CommitTransaction()
   Catch ex As Exception
   Utils.DbUtils.RollBackTransaction()
   Finally
   Utils.DbUtils.EndTransaction()
   End Try
   
   ‘Reload data in the table control and rebind it
   Me.TaskTableControl.LoadData()
   Me.TaskTableControl.DataBind()
   End Sub
   
   As you can see, this is just standard vb.net code for saving and rebinding the controls.
   
3. Now this final step is where the magic happens. Ironspeed renders it’s table controls in updatepanels so you get “SmoothPanelUJpdates”. What we’re going to do here is add a trigger to the TablControlUpdatePanel that is wrapped around the TableControl which will force the table to update when the save button is clicked on the ModalPopupExtender. All you need to do is add the following code into the LoadData() method at the top of the codebehind:
   
   Public Sub LoadData()
   ‘ LoadData reads database data and assigns it to UI controls.
   ‘ Customize by adding code before or after the call to LoadData_Base()
   ‘ or replace the call to LoadData_Base().
   Dim trigger As New AsyncPostBackTrigger()
   trigger.ControlID = “btnSavePopup”
   Me.TaskTableControlUpdatePanel.Triggers.Add(trigger)
   LoadData_Base()
   End Sub
   
   

And that’s it, we’re done! Here’s some screen shots of the modal popup extender in action


No Tasks are in the List


I added some data and now we’re ready to save it


Click the save button and the table is updated without posting back to the server!