TechBubbles Microsoft Technology BLOG

Calling ASP.NET AJAX Modal Window from JavaScript

 

This post discusses about calling AJAX model window from JavaScript. The scenario is checking the UI controls in page and alerting the user if he is leaving the page without saving the data. This shows confirmation window with yes and no buttons.

The Form body code looks as below

   1: <body id="Body">

   2:     <form name="Form" method="post" runat="server">

   3:     <asp:ScriptManager ID="mgr1" runat="server"></asp:ScriptManager>

   4:     <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

   5:     <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

   6:     <asp:DropDownList ID="DropDownList1" runat="server">

   7:         <asp:ListItem Value="no" Selected="True">NO</asp:ListItem>

   8:         <asp:ListItem Value="yes">YEs</asp:ListItem>

   9:     </asp:DropDownList>

  10:  

  11:     <asp:Button ID="Button1" runat="server" Text="Button" 

  12:      OnClientClick="javascript:return UnSaved();" />

  13:  

  14:     <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" 

  15:            runat="server" TargetControlID="btnHid"

  16:         PopupControlID="pnlSave" BackgroundCssClass="modalBackground"

  17:           CancelControlID="btnCancel"

  18:         PopupDragHandleControlID="panEdit">

  19:     </ajaxToolkit:ModalPopupExtender>

  20:     <asp:Button runat="server" ID="Button3" Style="display: none;" />

21: <asp:Panel ID="pnlSave" runat="server" BorderColor="Black"

BorderWidth="3px"

  22:          Height="100px" Width="180px">

  23:         <table width="100%">

  24:             <tr>

  25:                 <td >

  26:                     Do You want to save data?

  27:                 </td>

  28:             </tr>

  29:         </table>

  30:         <br />

  31:         <asp:Button ID="Button2" runat="server" Text="Save" />

  32:         <asp:Button ID="btnCancel" runat="server" Text="No" />

  33:     </asp:Panel>

  34:     <asp:Button runat="server" ID="btnHid" Style="display: none;" />

  35:     </form>

  36: </body>

The form having two textboxes , one dropdown list and one button control.

The idea is checking whether user is leaving the page without saving the data on button click event. It shows a client side confirmation message box on client click of the button.

   1: <script type="text/javascript">

   2:     function UnSaved() {

   3:         var selectedCount = 0;

   4:         var element;

   5:     for (var i = 0; i < document.forms[0].elements.length; i++)

   6:       {

   7:        element = document.forms[0].elements[i];

   8:         switch (element.type) {

   9:           case 'text':

  10:           if (element.value.length > 0) {

  11:                         selectedCount++;

  12:                     }

  13:                     break;

  14:                 case 'select-one':

  15:                     if (element.selectedIndex > 0) {

  16:                         alert(element);

  17:                         if (element.text != "no")

  18:                             selectedCount++;

  19:                     }

  20:                     break;

  21:                 //etc - add cases for checkbox, radio, etc.   

  22:             }

  23:             if (selectedCount > 0) {

  24:                 break;

  25:             }

  26:         }

  27:         if (selectedCount > 0) {

  28:  

  29:             $find("<%=ModalPopupExtender1.ClientID %>").show();

  30:             return false;

  31:         }

  32:     }

  33: </script>

  34: <title>How our reviews work </title>

  35: <style type="text/css">

  36: .modalBackground

  37: {

  38: backckground-color:#CCCCFF;

  39: fillter:alpha(opacity=40);

  40: opacity:0.5;

  41: }

  42:   </style>

It loops through the controls in page and generates the confirmation box.

Share this post :

About the author

Kalyan Bandarupalli

My name is kalyan, I am a software architect and builds the applications using Microsoft .NET technologies. Here I am trying to share what I feel and what I think with whoever comes along wandering to Internet home of mine.I hope that this page and its contents will speak for me and that is the reason I am not going to say anything specially about my self here.

Add Comment

By Kalyan Bandarupalli
TechBubbles Microsoft Technology BLOG

Follow me

Archives

Tag Cloud