ProgressBar over UpdatePanel

Example


in .aspx page



 <style>
    .Background
    {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 10;
        width: 100%;
        height: 100%;          
        filter: alpha(opacity=40)
    }
  
    #progressB
ackgroundFilter {
  position:absolute;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  overflow:hidden;
  padding:0;
  margin:0;
  background-color:#000;
  filter:alpha(opacity=50);
  opacity:0.5;
  z-index:1000;
}

#processMessage {
  position:absolute;
  top:30%;
  left:43%;
  padding:10px;
  width:14%;
  z-index:1001;
  background-color:#fff;
}
</style>
<script type="text/JavaScript" language="JavaScript">
    function pageLoad()
    {    
       var manager = Sys.WebForms.PageRequestManager.getInstance();
       manager.add_endRequest(endRequest);
       manager.add_beginRequest(OnBeginRequest);
    }
    function OnBeginRequest(sender, args)
    {  
     $get('ParentDiv').className ='Background';  
    }
    function endRequest(sender, args)
    {
       $get('ParentDiv').className ='';
    }
</script>







<form runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
  
        <div id="ParentDiv">
       //Page contents go here
      
<asp:UpdatePanel ID="UPDATEPANELID" runat="server">
<ContentTemplate>
  <asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
         </div>
<asp:updateprogress associatedupdatepanelid="UPDATEPANELID" id="updateProgress" runat="server">
    <progresstemplate>
        <div id="progressBackgroundFilter"></div>
        <div id="processMessage"> Loading…<br /><br /><img alt="Loading" src="download.gif" /></div>
    </progresstemplate>
</asp:updateprogress> 


        </form>

ConfirmButtonExtender in Ajax

Detail
ConfirmButton is a simple extender that catches clicks on a button (or any instance of a type derived from Button) and displays a message to the user. If the "OK" button is clicked, the button or link functions normally. If not, the click is trapped and the button will not perform its default submit behavior; optionally, a client script is executed if the OnClientCancel property is set. This is useful for delete links or anything else that requires confirmation from the user.


Property

• TargetControlID - The ID of the button or link for this extender to operate on.
• ConfirmText - The text to show when you want to confirm the click. (Note: HTML entities can be used here (ex: "&#10;" for new-line))
• OnClientCancel - The client-side script that executes when the cancel button is clicked in the confirm dialog.
• ConfirmOnFormSubmit - True if the confirm dialog should wait until just before the form submits to display. This is useful when ASP.NET validators are in use and the confirm should be shown only after all validators pass.
• DisplayModalPopupID - Optionally specifies the ID of a ModalPopup control to use for displaying the confirmation dialog (instead of window.confirm). When using DisplayModalPopupID, the following conditions must be met:
• The ModalPopup must be configured to work against the same TargetControlID as the ConfirmButton (and should work properly if the ConfirmButton is disabled).
• The ModalPopup must specify OkControlID and/or CancelControlID to identify the buttons corresponding to window.confirm's OK/Cancel buttons.
• The ModalPopup must not specify OnOkScript or OnCancelScript.

For Example:Click to view

                                       (Collapsiblepanel)<<Back

How to create CollapsiblePanelExtender Dynamically in asp.net

In Default.aspx page



 <style type="text/css">
        .cpHeader
        {
            color: white;
            background-color: #719DDB;
            font: bold 11px auto "Trebuchet MS" , Verdana;
            font-size: 12px;
            cursor: pointer;
            width: 450px;
            height: 18px;
            padding: 4px;
        }
        .cpBody
        {
            background-color: #DCE4F9;
            font: normal 11px auto Verdana, Arial;
            border: 1px gray;
            width: 450px;
            padding: 4px;
            padding-top: 7px;
        }
    </style>




c#

using AjaxControlToolkit;

    protected void Page_Load(object sender, EventArgs e)

    {        

        // Create Header Panel

        Panel panelHead = new Panel();

        panelHead.ID = "pH";

        panelHead.CssClass = "cpHeader";

        // Add Label inside header panel to display text

        Label lblHead = new Label();

        lblHead.ID = "lblHeader";

        panelHead.Controls.Add(lblHead);

        //Create Body Panel

        Panel panelBody = new Panel();

        panelBody.ID = "pB";

        panelBody.CssClass = "cpBody";

        // Add Label inside body Panel to display text

        Label lblB = new Label();

        lblB.ID = "lblBody";

        lblB.Text = "This panel was added dynamically";

        panelBody.Controls.Add(lblB);

        // Create CollapsiblePanelExtender

        CollapsiblePanelExtender cpe =

            new CollapsiblePanelExtender();

        cpe.TargetControlID = panelBody.ID;

        cpe.ExpandControlID = panelHead.ID;

        cpe.CollapseControlID = panelHead.ID;

        cpe.ScrollContents = false;

        cpe.Collapsed = true;

        cpe.ExpandDirection =

        CollapsiblePanelExpandDirection.Vertical;

        cpe.SuppressPostBack = true;

        cpe.TextLabelID = lblHead.ID;

        cpe.CollapsedText = "Click to Show Content..";

        cpe.ExpandedText = "Click to Hide Content..";

        this.UpdatePanel1.ContentTemplateContainer.Controls.Add(panelHead);

        this.UpdatePanel1.ContentTemplateContainer.Controls.Add(panelBody);

        this.UpdatePanel1.ContentTemplateContainer.Controls.Add(cpe);

    }

VB.NET

Imports AjaxControlToolkit

      Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

            ' Create Header Panel

            Dim panelHead As New Panel()

            panelHead.ID = "pH"

            panelHead.CssClass = "cpHeader"

            ' Add Label inside header panel to display text

            Dim lblHead As New Label()

            lblHead.ID = "lblHeader"

            panelHead.Controls.Add(lblHead)

            'Create Body Panel

            Dim panelBody As New Panel()

            panelBody.ID = "pB"

            panelBody.CssClass = "cpBody"

            ' Add Label inside body Panel to display text

            Dim lblB As New Label()

            lblB.ID = "lblBody"

            lblB.Text = "This panel was added dynamically"

            panelBody.Controls.Add(lblB)

            ' Create CollapsiblePanelExtender

            Dim cpe As New CollapsiblePanelExtender()

            cpe.TargetControlID = panelBody.ID

            cpe.ExpandControlID = panelHead.ID

            cpe.CollapseControlID = panelHead.ID

            cpe.ScrollContents = False

            cpe.Collapsed = True

            cpe.ExpandDirection = CollapsiblePanelExpandDirection.Vertical

            cpe.SuppressPostBack = True

            cpe.TextLabelID = lblHead.ID

            cpe.CollapsedText = "Click to Show Content.."

            cpe.ExpandedText = "Click to Hide Content.."

            Me.UpdatePanel1.ContentTemplateContainer.Controls.Add(panelHead)

            Me.UpdatePanel1.ContentTemplateContainer.Controls.Add(panelBody)

            Me.UpdatePanel1.ContentTemplateContainer.Controls.Add(cpe)

      End Sub

CollapsiblePanel in Ajax

Detail:
The CollapsiblePanel is a very flexible extender that allows you to easily add collapsible sections to your web page. This extender targets any ASP.NET Panel control. The page developer specifies which control(s) on the page should be the open/close controller for the panel, or the panel can be set to automatically expand and/or collapse when the mouse cursor moves in or out of it, respectively.


Property:

• TargetControlID - the Panel to operate expand and collapse.
• CollapsedSize - The size of the target, in pixels, when it is in the collapsed state.
• ExpandedSize - The size of the target, in pixels, when it is in the opened state.
• Collapsed - Specifies that the object should initially be collapsed or expanded. Set this to match your initial size. In this case, we initially set the panel to a height of 0 to match the CollapsedSize property, so when the page first renders, we don't see the panel expanded.
• AutoCollapse - True to automatically collapse when the mouse is moved off the panel.
• AutoExpand - True to automatically expand when the mouse is moved over the panel.
• ScrollContents - True to add a scrollbar if the contents are larger than the panel itself. False to just clip the contents.
• ExpandControlID/CollapseControlID - The controls that will expand or collapse the panel on a click, respectively. If these values are the same, the panel will automatically toggle its state on each click.
• TextLabelID - The ID of a label control where the "status text" for the panel will be placed. The panel will replace the internal HTML of this control (e.g. any HTML between the tags).
• CollapsedText - The text to show in the control specified by TextLabelID when the panel is collapsed. This text is also used as the alternate text of the image if ImageControlID is set.
• ExpandedText - The text to show in the control specified by TextLabelID when the panel is opened. This text is also used as the alternate text of the image if ImageControlID is set.
• ImageControlID - The ID of an Image control where an icon indicating the collapsed status of the panel will be placed. The extender will replace the source of this Image with the CollapsedImage and ExpandedImage urls as appropriate. If the ExpandedText or CollapsedText properties are set, they are used as the alternate text for the image.
• CollapsedImage - The path to an image used by ImageControlID when the panel is collapsed
• ExpandedImage - The path to an image used by ImageControlID when the panel is expanded
• ExpandDirection - can be "Vertical" or "Horizontal" to determine whether the panel expands top-to-bottom or left-to-right.

For Example:Click to view
Next>> (ConfirmButtonExtender)                            (Cascadingdropdown)<<Back

 To Create Dynamic CollaspsiblePanel Click to view
  
                                        

CascadingDropDown in Ajax

Defination:
CascadingDropDown is an ASP.NET AJAX extender that can be attached to an ASP.NET DropDownList control to get automatic population of a set of DropDownList controls. Each time the selection of one the DropDownList controls changes, the CascadingDropDown makes a call to a specified web service to retrieve the list of values for the next DropDownList in the set.


Property:

• TargetControlID - The ID of the DropDownList to populate.
• Category - The name of the category this DropDownList represents.
• PromptText - Optional text to display before the user has selected a value from the DropDownList.
• PromptValue - Optional value set when PromptText is displayed.
• EmptyText - Optional text to display when the DropDownList has no data to display.
• EmptyValue - Optional value set when EmptyText is displayed.
• LoadingText - Optional text to display while the data for the DropDownList is being loaded.
• ServicePath - Path to a web service that returns the data used to populate the DropDownList. This property should be left null if ServiceMethod refers to a page method. The web service should be decorated with the System.Web.Script.Services.ScriptService attribute.
• ServiceMethod - Web service method that returns the data used to populate the DropDownList. The signature of this method must match the following:

  [System.Web.Services.WebMethod]
  [System.Web.Script.Services.ScriptMethod]
  public CascadingDropDownNameValue[] GetDropDownContents(
         string knownCategoryValues, string category) { ... }

  Note that you can replace "GetDropDownContents" with a naming of your choice, but the return type and parameter name and type must exactly match, including case.
• ContextKey - User/page specific context provided to an optional overload of the web method described by ServiceMethod/ServicePath. If the context key is used, it should have the same signature with an additional parameter named contextKey of type string:

  [System.Web.Services.WebMethod]
  [System.Web.Script.Services.ScriptMethod]
  public CascadingDropDownNameValue[] GetDropDownContents(
         string knownCategoryValues, string category, string contextKey) { ... }

  Note that you can replace "GetDropDownContents" with a name of your choice, but the return type and parameter name and type must exactly match, including case.
• UseContextKey - Whether or not the ContextKey property should be used. This will be automatically enabled if the ContextKey property is ever set (on either the client or the server). If the context key is used, it should have the same signature with an additional parameter named contextKey of type string (as described above).
• ParentControlID - Optional ID of the parent DropDownList that controls the contents of this DropDownList.
• SelectedValue - Optional value to select by default. This needs to exactly match the string representation of a value in the DropDownList.

For Example:Click to view
Next>> (CollapsiblePanelExtender)          (AutoComplete)<<Back  

Autocomplete in Ajax

Defination:
AutoComplete is an ASP.NET AJAX extender that can be attached to any TextBox control, and will associate that control with a popup panel to display words that begin with the prefix typed into the textbox.


Property:

• TargetControlID - The TextBox control where the user types content to be automatically completed
• ServiceMethod - The web service method to be called. The signature of this method must match the following:

  [System.Web.Services.WebMethod]
  [System.Web.Script.Services.ScriptMethod]
  public string[] GetCompletionList(string prefixText, int count) { ... }

  Note that you can replace "GetCompletionList" with a name of your choice, but the return type and parameter name and type must exactly match, including case.
• ServicePath - The path to the web service that the extender will pull the word\sentence completions from. If this is not provided, the service method should be a page method.
• ContextKey - User/page specific context provided to an optional overload of the web method described by ServiceMethod/ServicePath. If the context key is used, it should have the same signature with an additional parameter named contextKey of type string:

  [System.Web.Services.WebMethod]
  [System.Web.Script.Services.ScriptMethod]
  public string[] GetCompletionList(
      string prefixText, int count, string contextKey) { ... }

  Note that you can replace "GetCompletionList" with a name of your choice, but the return type and parameter name and type must exactly match, including case.
• UseContextKey - Whether or not the ContextKey property should be used. This will be automatically enabled if the ContextKey property is ever set (on either the client or the server). If the context key is used, it should have the same signature with an additional parameter named contextKey of type string (as described above).
• MinimumPrefixLength - Minimum number of characters that must be entered before getting suggestions from the web service.
• CompletionInterval - Time in milliseconds when the timer will kick in to get suggestions using the web service.
• EnableCaching - Whether client side caching is enabled.
• CompletionSetCount - Number of suggestions to be retrieved from the web service.
• CompletionListCssClass - Css Class that will be used to style the completion list flyout.
• CompletionListItemCssClass - Css Class that will be used to style an item in the AutoComplete list flyout.
• CompletionListHighlightedItemCssClass - Css Class that will be used to style a highlighted item in the AutoComplete list flyout.
• DelimiterCharacters - Specifies one or more character(s) used to separate words. The text in the AutoComplete textbox is tokenized using these characters and the webservice completes the last token.
• FirstRowSelected - Determines if the first option in the AutoComplete list will be selected by default.
• ShowOnlyCurrentWordInCompletionListItem - If true and DelimiterCharacters are specified, then the AutoComplete list items display suggestions for the current word to be completed and do not display the rest of the tokens.
• Animations - Generic animations for the AutoComplete extender. 
• OnShow - The OnShow animation will be played each time the AutoComplete completion list is displayed. The completion list will be positioned correctly but hidden. The animation can use <HideAction Visible="true" /> to display the completion list along with any other visual effects.
• OnHide - The OnHide animation will be played each time the AutoComplete completion list is hidden.

For Example: Click to view

Next>>(Cascadingdropdown)            (CalendarExtender)<<Back