Using DropShadow Extender | Asp.Net Ajax Control Toolkit

The DropShadowExtender adds a drop shadow to a asp.net Panel control. It is easy to add a DropShadowExtender to a panel control - simply add a panel control and add the extender to it.

After creating the page, I will add a panel control to the page.

    <asp:Panel ID="Panel1" runat="server" Height="180px" Width="400px" ForeColor="White" BackColor="Blue">
    some text some text some text some text some text<br />
    some text some text some text some text some text<br />
    some text some text some text some text some text<br />
    some text some text some text some text some text<br />
    some text some text some text some text some text<br />
    some text some text some text some text some text<br />
    some text some text some text some text some text<br />
    </asp:Panel>

Notice, that I have added height, width, ForeColor and BackColor attributes to it. It is important to add the BackColor property to it. Otherwise the panel control looks with some text outside the .

Then, to the Panel control, a DropShadowExtender extender is added.

    <cc1:DropShadowExtender ID="Panel1_DropShadowExtender" runat="server"
        Enabled="True" TargetControlID="Panel1"
        Rounded="true" Opacity="0.5" Radius="1"  >
    </cc1:DropShadowExtender>

Notice the TargetControlId attribute of the extender is assigned to the ID attribute of the Panel. The Rounded attribute is set to true - this means the Panel and its drop shadow will have rounded corners. The Opacity attribute determines the opacity (between 0 and 1.0) of the drop shadow. The radius attribute determines the radius of the rounded corners.

Finally, ScriptManager is added to the page. This is required to for the AJAX controls/extenders to work.

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

Pass Data from Master to content page - Master.FindControl()

In the previous example -Pass Data from MasterPage to content page -, I showed how to pass data from master page to content page by creating properties in the master page. There, I also mentioned that data can be passed from master to content page using Master.FindControl() method. In this example, I will use this method pass data.

I will use the same master and content page as in the previous example - the only place that needs to change is the Button click event that finds and sets the value of the Label control in the master page.

Here, is the code for the page.




In this event, I am creating a Label control and assigning it to the master page's Label control. Then I am setting the Text property of this Label control to the text entered in the TextBox control.

Pass Data from MasterPage to content page

Data from master page can be passed to content pages either by using Master.FindControl() method on the page or by creating public properties in the master pages. The properties created need to be public, otherwise the page will not be able to access them. In this code snippet, I will create properties in the master page and access them from the content pages. I am also using the same master and content pages as in Create and Use Master Page and have the pages modified to suit this example.

Here, is the code for the masterpage.



The master page, "Content.master", contains a Label control which will be accessed from the content page. The property, "Label1_Data", related to the Label is in the code behind page below.




To use the property "Label1_Data" from the content page, the content page must use "Content.master" as the master page and also declare the MasterType directive and set the virtual path to the path of the master page. Here, is the code of the content page.



The content page contains a Label control to display the data from "Label1_Data" property, a TextBox control that allows "Label1_Data" to be updated, and a Button control to perform postback. Here is the code behind page.

Redirect message using AJAX UpdateProgress control

In this example, I will show how to use asp.net AJAX UpdateProgress control to display a message when a page is redirected to a different page. We can display a message either using javascript or by using meta refresh. With javascript the drawback is that a popup may need to be displayed or the user may have disabled javascript. With meta tag, the refresh will fire after the page is loaded. That is, it is independent of other events. For example, we cannot use meta refresh if we are redirecting the page on Button click.

In this page, we will have a Button, ScriptManager, UpdatePanel and UpdateProgress controls. Remember to add ScriptManager control, since otherwise the page will not work. The Button control will be ContentTemplate of the UpdatePanel and the UpdateProgress will be called when the Button is clicked.

Here, is the code for the .aspx page.



As you can see, when the Button is clicked, Button1_Click event is called. In the method, I am using Response.Write("..."). However, this did not write anything on the browser. This only writes after the method finishes - so we cannot use this.
Then, I am pausing the function for 5 seconds by calling System.Threading.Thread.Sleep(5000);. This is necessary to show the message in the UpdateProgress. If the event is not paused, the page will redirect without displaying any message.
Finally, I will redirect the page by calling Response.Redirect("url");.

Here is the code for the page.

 

When the page is run and the button clicked, the page is paused for 5 seconds andthe redirect message is shown by the AJAX UpdateProgress control.