(This tutorial assumes you already downloaded and installed the Asp.Net Ajax Essentials and the Asp.Net Ajax Control Toolkit)

  1. You want to make sure that one and only one ScriptManager control is on the page.
  2. To create a draggable panel like the example I have you need to use 3 Asp.Net Panel controls. One Asp.Net panel control for the “Drag Me” section, another Asp.Net panel control for the content you want to display and another Asp.Net panel control to surround the “Drag Me” panel and the content panel.
  3. Here is an example:
    <asp:Panel ID=”pnlDragContainer” runat=”server” width=”200px”>
    <asp:Panel ID=”pnlDragSection” runat=”server” style=”cursor:move; background-color:#ffdd95;”>
    Drag Me
    </asp:Panel>
    <asp:Panel ID=”pnlDragContent” runat=”server” style=”background-color:#cccccc;”>
    This is the content to be dragged.
    </asp:Panel>
    </asp:Panel>
  4. After creating your drag handle, content and container you can add the DragPanelExtender control.<ajaxToolkit:DragPanelExtender ID=”DragPanelExtender1″ runat=”server”
    DragHandleID=”pnlDragSection”
    TargetControlID=”pnlDragContainer” />
  5. The DragHandleID property is used for the “Drag Me” section of your draggable panel. The TargetControlID property is used for the Asp.Net Panel you want to drag. In my example I set it to container that surrounds the “Drag Me” section and the content. This way the “Drag Me” section will move with the content.
  6. Now some sites have problems when applying the DragPanelExtender control to the page. The issue some sites have is that when the dragging is complete, the panel snaps back to its starting location. A possible solution to this problem is to include the following JavaScript just before the closing </body> tag.<script type=”text/javascript”>
    function setBodyHeightToContentHeight() {
    document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)+”px”;
    }
    setBodyHeightToContentHeight();
    $addHandler(window, “resize”, setBodyHeightToContentHeight);
    </script>

So there you have it. Easy steps to follow to create an always visible control on your site.

 

The AlwaysVisibleControlExtender control was used with a HTML DIV control. Using the Asp.Net Ajax controls makes the always visible control work very easy.

(This tutorial assumes you already downloaded and installed the Asp.Net Ajax Essentials and the Asp.Net Ajax Control Toolkit)

  1. You want to make sure that one and only one ScriptManager control is on the page
  2. To create an always visible control first insert the text you want to always display in a DIV.<div id=”divVisible”
    runat=”server”
    style=”background-color:#99ff99;
    border:dashed 1px #000000;”>
    This is the control that I always want to be visible. </div>
  3. Add the AlwaysVisibleControlExtender. Here is an example to what I set the attributes to.<ajaxToolkit:AlwaysVisibleControlExtender ID=”AlwaysVisibleControlExtender1″
    TargetControlID=”divVisible”
    HorizontalSide=”Center”
    VerticalSide=”Bottom”
    runat=”server”
    ScrollEffectDuration=”.1″ />

So there you have it. Easy steps to follow to create an always visible control on your site.

The ModalPopupExtender control was used with an Asp.Net panel control. Using the Asp.Net Ajax controls makes the modal popup work very easy.

(This tutorial assumes you already downloaded and installed the Asp.Net Ajax Essentials and the Asp.Net Ajax Control Toolkit)

  1. You want to make sure that one and only one ScriptManager control is on the page.
  2. To create a modal popup you have to insert the text you want to display in the modal popup in an Asp.Net Panel control.<asp:Panel ID=”Panel1″ runat=”server” CssClass=”modalPopup” style=”display:none;”>
    This is basic modal popup.
    <br /><br />
    <asp:Button ID=”btnOk” runat=”server” Text=”Ok” />
    <asp:Button ID=”btnClose” runat=”server” Text=”Close Me” />
    </asp:Panel>
  3. Notice that I set display:none for the style of the Asp:Panel control. This prevents the Asp:Panel from being displayed for a brief second when the page is loading.
  4. To display the modal popup you have to create an Asp.Net control that will display the modal popup when clicked.<asp:Button ID=”Button1″ runat=”server” Text=”First Modal Popup” />
  5. Add the ModalPopupExtender control. Here is an example to what I set the attributes to.<ajaxToolkit:ModalPopupExtender
    BackgroundCssClass=”modalBackground”
    DropShadow=”true”
    OkControlID=”btnOk”
    CancelControlID=”btnClose”
    runat=”server”
    PopupControlID=”Panel1″
    id=”ModalPopupExtender1″
    TargetControlID=”Button1″ />
  6. Notice the BackgroundCssClass for the ModalPopupExtender. This class is used to give that grayed out overlay of the page while the modal popup is displayed.
    The style used for the ModalPopupExtender is below:.modalBackground {
    background-color:#fff;
    filter:alpha(opacity=70);
    opacity:0.7px;
    }
  7. Then second modal popup runs Javascript when the close button is clicked. To achieve this you just need to add the OnCancelScript attribute. You can also use OnOkScript if you want the Javascript to run when the Ok button is clicked.
    The value you put for the attribute is the Javascript function you want to run. For example: OnCancelScript=”CloseScript()”

So there you have it. Easy steps to follow to create a modal popup on your site.