Let me start by saying I'm a C/C++ guy and I'm by no means an ASP.NET expert; the web stuff is a hobby for me. However, I'm pretty sure this doesn't come under user error.

I've got a very simple page with a panel and an AJAX accordion. All I have to do is drag the controls around (via absolute positioning) in the Design view and the source gets mangled. By mangled, I mean the markup inside the Accordion definition gets partially duplicated outside the block and/or the tags are moved around without taking their contents with them, and the formatting is blown; all of which of course break the page. I can also sometimes get the same thing to happen just by changing the CSS class of the Accordion in the Properties window.

This is with Visual Studio '08 Professional and the AJAX Toolkit installed as demonstrated in the video I watched here (which are fantastic resources by the way, thank you!). I'm inclined to believe this has something to do with the toolkit's integration into the IDE because it sure seems like they're not playing nice together.

Any thoughts or tips?

Before and after shots:

<form id="form1" runat="server">
   
       <asp:Panel ID="Panel1" runat="server" CssClass="MenuPanel" HorizontalAlign="Center">
        
        <cc1:Accordion 
        ID="ACC1" 
        runat="server"
        SelectedIndex="0" 
        Width="200px" 
        AutoSize="Limit" 
        ContentCssClass="accordianContent" 
        CssClass="accordianMain"
        EnableTheming="False"
        FramesPerSecond="60" 
        HeaderCssClass="accordianHeader"
        HeaderSelectedCssClass="accordianHeaderSel">
        
            <Panes>
                <cc1:AccordionPane ID="AccordionPane1" runat="server">
                    <Header>I am a header</Header>
                    <Content>And I am content</Content>
                </cc1:AccordionPane>
                <cc1:AccordionPane ID="AccordionPane2" runat="server">
                    <Header>I am a header</Header>
                    <Content>And I am content</Content>
                </cc1:AccordionPane>
                 <cc1:AccordionPane ID="AccordionPane3" runat="server">
                    <Header>I am a header</Header>
                    <Content>And I am content</Content>
                </cc1:AccordionPane>
            </Panes>
            
       </cc1:Accordion>
   
   </asp:Panel>
        
    <cc1:RoundedCornersExtender
        ID="RoundedCornersExtender1"
        runat="server"
        TargetControlID="Panel1">
    </cc1:RoundedCornersExtender>
    
     
    </form>

 And after dragging the controls around the designer:

 
<form id="form1" runat="server">
        <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </cc1:ToolkitScriptManager>
    
        <asp:Panel ID="Panel1" runat="server" CssClass="MenuPanel" HorizontalAlign="Center">
        
            <cc1:Accordion 
            ID="ACC1" 
            runat="server"
            SelectedIndex="0" 
            AutoSize="Limit" 
            ContentCssClass="accordionContent" 
            CssClass="accordionMain"
            EnableTheming="False"
            FramesPerSecond="60" 
            HeaderCssClass="accordionHeader"
            HeaderSelectedCssClass="accordionHeaderSel">
        
                <cc1:AccordionExtender ID="ACC1_AccordionExtender" runat="server" 
					AutoSize="Limit" ContentCssClass="accordionContent" Enabled="True" 
					FramesPerSecond="60" HeaderCssClass="accordionHeader" 
					HeaderSelectedCssClass="accordionHeaderSel" TargetControlID="ACC1"></cc1:AccordionExtender>
				<cc1:AccordionPane ID="AccordionPane1" runat="server" ContentCssClass="" 
					HeaderCssClass=""><header>
I am a header
</header>
<content>
And I am content
</content>
</cc1:AccordionPane>
				<cc1:AccordionPane ID="AccordionPane2" runat="server" ContentCssClass="" 
					HeaderCssClass=""><header>
I am a header
</header>
<content>
And I am content
</content>
</cc1:AccordionPane>
				<cc1:AccordionPane ID="AccordionPane3" runat="server" ContentCssClass="" 
					HeaderCssClass=""><header>
I am a header
</header>
<content>
And I am content
</content>
</cc1:AccordionPane>
            
            </cc1:Accordion>
            
        </asp:Panel>
        
    
     
    	<cc1:RoundedCornersExtender ID="Panel1_RoundedCornersExtender" runat="server" 
			Enabled="True" TargetControlID="Panel1">
		</cc1:RoundedCornersExtender>
        
    
     
    </form>
 		
        
As you can see, the source was pretty much nuked from orbit. 
And yes, this problem persists after having installed the hotfix stickied at the top of this forum.
    

I found the same problem, and I also notice that when you change properties in design view it does not update the source. 

I have a multi-line text box which was set to 2 lines and I changed the number of lines property to 4 lines but the source did not change even after re-publishing the site.  It does show as 4 lines in design, however.

Is there also no way to multi-select objects in design view?  That's nutty.  I had to reposition about twenty controls and their labels for a simple move and it took me half an hour!

Well, this is easy enough to reproduce: I can now do it at will. It's also worse than I thought as it's not just changing the formatting.

Start with this:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Menu.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title>Untitled Page</title>
	<link rel="Stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
	<form id="form1" runat="server">
	<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></cc1:ToolkitScriptManager>
	<asp:Panel ID="Panel1" runat="server" CssClass="MenuPanel" HorizontalAlign="Center">
		<cc1:Accordion	ID="ACC1" runat="server" 
						SelectedIndex="0" AutoSize="Limit" 
						ContentCssClass="accordionContent"
						CssClass="accordionMain" EnableTheming="False"
						FramesPerSecond="60" HeaderCssClass="accordionHeader"
						HeaderSelectedCssClass="accordionHeaderSel">
			<Panes>			
				<cc1:AccordionPane ID="AccordionPane1" runat="server" ContentCssClass="" HeaderCssClass="">
					<header>I am Header One</header>
					<content>I am Content One</content>
				</cc1:AccordionPane>
				<cc1:AccordionPane ID="AccordionPane2" runat="server" ContentCssClass="" HeaderCssClass="">
					<Header>I am Header Two</Header>
					<Content>I am Content Two</Content>
				</cc1:AccordionPane>
				<cc1:AccordionPane ID="AccordionPane3" runat="server" ContentCssClass="" HeaderCssClass="">
					<Header>I am Header Two</Header>
					<Content>I am Content Two</Content>
				</cc1:AccordionPane>
			</Panes>
		</cc1:Accordion>
	</asp:Panel>
	<cc1:RoundedCornersExtender ID="Panel1_RoundedCornersExtender" runat="server" 
		Enabled="True" TargetControlID="Panel1">
	</cc1:RoundedCornersExtender>
	</form>
</body>
</html>

Then in the Design view, select the Accordion and change the CssClass property in the Properties window. Go back to Source view and I see this:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Menu.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
	<title>Untitled Page</title>
	<link rel="Stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
	<form id="form1" runat="server">
	<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
	</cc1:ToolkitScriptManager>
	<asp:Panel ID="Panel1" runat="server" CssClass="MenuPanel" HorizontalAlign="Center">
		<cc1:Accordion ID="ACC1" runat="server" SelectedIndex="0" AutoSize="Limit" ContentCssClass="accordionContent"
			CssClass="MenuPanel" EnableTheming="False" FramesPerSecond="60" HeaderCssClass="accordionHeader"
			HeaderSelectedCssClass="accordionHeaderSel">
			<Panes>
				<cc1:AccordionPane ID="AccordionPane1" runat="server" ContentCssClass="" HeaderCssClass="">
					<Header>I am Header One</Header>
					<Content>I am Content One</Content>
				</cc1:AccordionPane>
				<cc1:AccordionPane ID="AccordionPane2" runat="server" ContentCssClass="" HeaderCssClass="">
					<Header>I am Header Two</Header>
					<Content>I am Content Two</Content>
				</cc1:AccordionPane>
				<cc1:AccordionPane ID="AccordionPane3" runat="server" ContentCssClass="" HeaderCssClass="">
					<Header>I am Header Two</Header>
					<Content>I am Content Two</Content>
				</cc1:AccordionPane>
			</Panes>
			<cc1:AccordionExtender ID="ACC1_AccordionExtender" runat="server" 
				AutoSize="Limit" ContentCssClass="accordionContent" Enabled="True" 
				FramesPerSecond="60" HeaderCssClass="accordionHeader" 
				HeaderSelectedCssClass="accordionHeaderSel" TargetControlID="ACC1"></cc1:AccordionExtender>
			<cc1:AccordionPane ID="AccordionPane1" runat="server" ContentCssClass="" 
				HeaderCssClass=""><header>
I am Header One
</header>
<content>
I am Content One
</content>
</cc1:AccordionPane>
			<cc1:AccordionPane ID="AccordionPane2" runat="server" ContentCssClass="" 
				HeaderCssClass=""><header>
I am Header Two
</header>
<content>
I am Content Two
</content>
</cc1:AccordionPane>
			<cc1:AccordionPane ID="AccordionPane3" runat="server" ContentCssClass="" 
				HeaderCssClass=""><header>
I am Header Two
</header>
<content>
I am Content Two
</content>
</cc1:AccordionPane>
		</cc1:Accordion>
	</asp:Panel>
	<cc1:RoundedCornersExtender ID="Panel1_RoundedCornersExtender" runat="server" Enabled="True"
		TargetControlID="Panel1">
	</cc1:RoundedCornersExtender>
	</form>
</body>
</html>

I can do this every time. Now, let's break down what it's doing here:

1) You can see it inserted a new block for <cc1:AccordionExtender>. What this is supposed to be, I don't know, but it appears to duplicate a lot of the properties of the Accordion itself. Whatever it is, Visual Studio doesn't like it and doesn't recognize it as a valid tag.

2) You can see it duplicated the Pane definitions.

Quite a mess. It looks to me like it's confused about how to write the changed Accordion entity back to the html file after updating the property.

Thanks for the detailed repro. I opened a bug on this for the service pack.

Groovy, thanks.

Please post any AJAX Control Toolkit questions on this forum so that the right Toolkit folks will be able to help you out.

Thanks Mikhail for following up on this with us!