Putting it all together seems to confuse AJAX somewhat?

Home ›

ASP.NET Forums » ASP.NET AJAX » ASP.NET AJAX Control Toolkit » Putting it all together seems to confuse AJAX somewhat?

Shortcuts

Previous Next

Putting it all together seems to confuse AJAX somewhat?

Last post 12-09-2008 12:24 AM by Zhi-Qiang Ni - MSFT. 5 replies.

Sort Posts:

Putting it all together seems to confuse AJAX somewhat?

11-30-2008, 9:43 PM

Contact

59 point Member
Hexagon Global
Member since 10-25-2008, 8:45 AM
Posts 41

Check out this screenshot: http://www.facebook.com/photo.php?pid=1227400&l=e2e3e&id=700964326

The intent is to have four 'portlets' which stream RSS from blogs. Ajax controls on the page are UpdatePanel, and each of those four Panels are in their own ListView with their own DataPagers. Each one has a RoundedCornerExternder and a DropShadowExtender. The markup is relatively simple:

<ajaxToolkit:DropShadowExtender> id="DropShadowExtender1" 
                  runat="server" Enabled="True" TargetControlID="Panel1" 
                  Opacity="0.3" Rounded="True" TrackPosition="True" 
                  Width="10">
</ajaxToolkit:DropShadowExtender>
<ajaxToolkit:RoundedCornersExtender> id="RoundedCornersExtender1" 
                   runat="server" TargetControlID="Panel1" Corners="all" 
                   Radius="6"/>
   .
   .
   .
<ajaxToolkit:DropShadowExtender> id="DropShadowExtender2" 
                   runat="server" Enabled="True" TargetControlID="Panel2" 
                   Opacity="0.3" Rounded="True" TrackPosition="True" 
                   Width="10">
</ajaxToolkit:DropShadowExtender>
<ajaxToolkit:RoundedCornersExtender> id="RoundedCornersExtender2" 
                   runat="server" TargetControlID="Panel2" Corners="all" 
                   Radius="6"/>

etc, etc, for all four of them. You can see from the screenshot that the corners stopped happening after the first one, and there is one dropshadow on the page (should be four), which is not associated with any of the panels, and is sort-of sitting in the middle of them all, confused about where it should be?

Ultimately I'd like to do a lot more with this page, like drag the panels around, resize them, bring-to-front etc. But perhaps I should use Silverlight, not Ajax?

Anyhow, there is a clue, it says at the bottom of the page, "Done, but with errors on the page." How do I find out what errors, are some of the controls getting in the way of others? The ListView and DataPager work a treat!

Many thanks for any suggestions.

Re: Putting it all together seems to confuse AJAX somewhat?

12-05-2008, 5:25 AM

Contact

26,107 point All-Star
Zhi-Qiang Ni - MSFT
Member since 04-11-2008, 12:37 AM
Posts 2,342

Hi,

I have built a test application which similar to your scenario, and it can work well, please refer to the code:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestMultiDropShadowAndRoundedCorners.aspx.vb"
    Inherits="SoluTest_DropShadow.TestMultiDropShadowAndRoundedCorners" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <div>
                    <asp:Panel ID="Panel1" runat="server" CssClass="dropShadowPanel">
                        <div style="padding: 10px">
                            First Name:
                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
                            Last Name:
                            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
                        </div>
                    </asp:Panel>
                    <ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server" Enabled="True"
                        TargetControlID="Panel1" Opacity="0.3" Rounded="True" TrackPosition="True" Width="10">
                    </ajaxToolkit:DropShadowExtender>
                    <ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="Panel1"
                        Corners="all" Radius="6" />
                    <hr />
                    <asp:Button ID="Button1" runat="server" Text="Button" />
                </div>
                <div>
                    <asp:Panel ID="Panel2" runat="server" CssClass="dropShadowPanel">
                        <div style="padding: 10px">
                            First Name:
                            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br />
                            Last Name:
                            <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox><br />
                        </div>
                    </asp:Panel>
                    <ajaxToolkit:DropShadowExtender ID="DropShadowExtender2" runat="server" Enabled="True"
                        TargetControlID="Panel2" Opacity="0.3" Rounded="True" TrackPosition="True" Width="10">
                    </ajaxToolkit:DropShadowExtender>
                    <ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender2" runat="server" TargetControlID="Panel2"
                        Corners="all" Radius="6" />
                    <hr />
                    <asp:Button ID="Button2" runat="server" Text="Button" />
                </div>
                <div>
                    <asp:Panel ID="Panel3" runat="server" CssClass="dropShadowPanel">
                        <div style="padding: 10px">
                            First Name:
                            <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox><br />
                            Last Name:
                            <asp:TextBox ID="TextBox6" runat="server"></asp:TextBox><br />
                        </div>
                    </asp:Panel>
                    <ajaxToolkit:DropShadowExtender ID="DropShadowExtender3" runat="server" Enabled="True"
                        TargetControlID="Panel3" Opacity="0.3" Rounded="True" TrackPosition="True" Width="10">
                    </ajaxToolkit:DropShadowExtender>
                    <ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender3" runat="server" TargetControlID="Panel3"
                        Corners="all" Radius="6" />
                    <hr />
                    <asp:Button ID="Button3" runat="server" Text="Button" />
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

In addition, I think there is no need to use the RoundedCornersExtender further more, for the DropShadowExtender has already containned some property which can round the Panel’s corners.

        <ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server" BehaviorID="DropShadowBehavior1"
            TargetControlID="Panel1" Width="10" Rounded="true" Radius="10" Opacity=".75" TrackPosition="True" />

Have my suggestion helped?

Best regards,

Zhi-Qiang Ni

Microsoft Online Community Support

Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as
Answer” if a marked post does not actually answer your question.

Re: Putting it all together seems to confuse AJAX somewhat?

12-08-2008, 1:32 AM

Contact

59 point Member
Hexagon Global
Member since 10-25-2008, 8:45 AM
Posts 41

Umm, sorry Zhi, No, I get the same problems.

I didn't have your stylesheet, so made a few quick assumptions, and the results can be viewed at

http://www.facebook.com/photo.php?pid=1251920&l=92000&id=700964326

and

http://www.facebook.com/photo.php?pid=1252056&l=407d9&id=700964326

Issues to note are:

corners are rounded for the first panel and square for the others. (BUT, if I click on a button, the rounded corners all appear, it is like AJAX is not finishing all of its postbacks. Is there an AJAX Flush Buffer command?)
only one dropshadow is showing, (BUT, again if I click a btton the others show up).
The drop-shadows are 150px too low. This corresponds to me entering "position: absolute; top: 150px" for the div. So like AJAX gets its positioning mixed up if you start doing your own absolute positioning? In the second example, where all the drop-shadows are showing, they are all consistently 150px too low.
Note also the 'Error on Page' tag. Is there a way for me to find out what these runtime errors are? (It compiles clean).

Many thanks all.

Re: Putting it all together seems to confuse AJAX somewhat?

12-08-2008, 2:32 AM

Contact

26,107 point All-Star
Zhi-Qiang Ni - MSFT
Member since 04-11-2008, 12:37 AM
Posts 2,342

Hi Hexagon Global,

Well, first of all, complement my CSS class here:

.dropShadowPanel 
{
	width:300px;
	background-color:#5377A9;
	color:white;
	font-weight:bold;
}

And the result seems like this:

Now, look at your question:

Maybe you have disabled some javascript function in your browser.
Why not only use the DropShadowExtender?
The shadow div’s postion would be set as absolute by defult. The width property in the DropShadow is not the width of the shadow div but the distance between the target and the shadow.
To debug the javascript exception or the run time file in VS, please refer to this page:http://asp.net/ajax/documentation/live/Overview/ASPNETAJAXDebuggingAndTracingOverview.aspx

Have my suggestion helped?

Best regards,

Zhi-Qiang Ni

Re: Putting it all together seems to confuse AJAX somewhat?

12-08-2008, 11:41 PM

Contact

59 point Member
Hexagon Global
Member since 10-25-2008, 8:45 AM
Posts 41

Turning on all the Ajax debugging and setting the debugging options in IE as well, as per that documentation: The code is returning:

"Microsoft JScript runtime error: Sys.InvalidOperationException: The id property of a component can't be set after it's been added to the Application object."

In function Sys$Component$set_id.

It is related to the dropshadows, as I get one exception for each dropshadow that is eventually rendered.

This is too low-level for me, as I am still an Ajax 'newbie,' and am only using markup (so you'd think it should be alright...)

I removed all the rounded corners extenders, but still no joy.

I am happy to close this thread unresolved, and rewrite that screen in Silverlight at some time in the future. Until then it will just have to exist with some square corners and an oddly-positioned drop-shadow, which is not the end of the world.

Many thanks for your help. I think that there is a bug there, but I am not enough of a Ajax hacker to be able to conclusively prove it.

Yours Hexagon Global.