Link to home
Start Free TrialLog in
Avatar of mmaslar
mmaslar

asked on

Nested Editable Region error after editing with Visual Studio

Anyone out there using Dreamweaver MX for the vusial design and Visual Studio .Net 2003 for the backend coding? That's what I need to do, but am running into an interaction issue:

To isolate this issue, I start by creating a template in DreamWeaver. Then create an ASPX page from the template. Next, I add the ASPX page to my .Net project. Using .Net I add some server-side controls and write the programming in a separate CodeBehind file. Build (compile) the project and save. Everything's OK so far... Now I close Visual Studio and open the site with DreamWeaver MX (v7.0.1).  I open the template file and make a simple change, such as slightly repositioning one of the layers. When DW tries to update the ASPX page, it complains of nested editable regions.

DW Error message: "There is an error at line 22, column 154 (absolute position 1445) of "C:\Inetpub\wwwroot\MyProject\junk7.aspx": Nested editable regions.

In looking at the ASPX source (below), I just don't see it. This scenario is very repeatable. (And very frustrating!)

Grading: I've experimented quite a bit so far, so it'll take more than a "try this... try that" approach to get an A. I would prefer the answer to come from deep experience jointly working with DW and VS, but if you manage to solve it from a purely a DW perspective, that'll do too.

Thanks!


<%@ Page Language="c#" ContentType="text/html" ResponseEncoding="iso-8859-1" CodeBehind="junk7.aspx.cs" AutoEventWireup="false" Inherits="EventRegistration.junk7" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
      <HEAD>
            <title>Untitled Document</title><!-- InstanceBegin template="/Templates/Junk_template.dwt.aspx" codeOutsideHTMLIsLocked="false" -->
            <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
            </script>
            <link href="styles/master.css" rel="stylesheet" type="text/css">
      </HEAD>
      <body>
            <div id="Layer1" style="Z-INDEX:1; WIDTH:168px; POSITION:absolute; HEIGHT:686px"><img src="Images/NavBkgd.jpg" width="193" height="785"></div>
            <div id="Layer2" style="Z-INDEX:2; LEFT:216px; WIDTH:563px; POSITION:absolute; TOP:16px; HEIGHT:44px"><!-- InstanceBeginEditable name="EditRegion4" -->
                  <div align="center"><span class="pagetitle">EditRegion4</span></div>
                  <!-- InstanceEndEditable --></div>
            <form id="Form1" method="post" runat="server">
                  <div id="Layer3" style="Z-INDEX:3; LEFT:216px; WIDTH:551px; POSITION:absolute; TOP:67px; HEIGHT:631px">
                        <P><!-- InstanceBeginEditable name="MyEditRegion" --><span class="bodycopy">MyEditRegion</span></P>
                        <P><SPAN class="bodycopy"></SPAN>&nbsp;</P>
                        <P><SPAN class="bodycopy"></SPAN>&nbsp;</P>
                        <SPAN class="bodycopy">
                              <P>
                                    <asp:TextBox id="TextBox1" runat="server"></asp:TextBox></P>
                              <P>
                                    <asp:Button id="Button1" runat="server" Text="Button"></asp:Button></P>
                        </SPAN><!-- InstanceEndEditable --></div>
            </form>
            <!-- InstanceEnd -->
      </body>
</HTML>

---------------------------------------------------------------------------
Here's the template:
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="iso-8859-1" %>
<!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>
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<link href="../styles/master.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="Layer1" style="position:absolute; width:168px; height:686px; z-index:1"><img src="../Images/NavBkgd.jpg" width="193" height="785" /></div>

<div id="Layer2" style="position:absolute; width:563px; height:44px; z-index:2; left: 216px; top: 16px;"><!-- TemplateBeginEditable name="EditRegion4" -->
  <div align="center"><span class="pagetitle">EditRegion4</span></div>
<!-- TemplateEndEditable --></div>
<form id="Form1" method="post" runat="server">
<div id="Layer3" style="position:absolute; width:551px; height:631px; z-index:3; left: 254px; top: 126px;"><!-- TemplateBeginEditable name="MyEditRegion" --><span class="bodycopy">MyEditRegion</span><!-- TemplateEndEditable --></div>
</form>
</body>
</html>
Avatar of alexhogan
alexhogan

On your base div tags you have not defined the position of the div only the width and height.

While this works for .Net, DW will throw fits because everything needs to be defined.  Usually it's .Net that would be screaming over this.  What happens is VS.Net treats everything as absolute and will define either inherited or relative positions for all the div based on the initial or base div.  You can see this when you're defining the interface and refer back to the code in the html file.  You'll see how it creates the positioning.  

DW doesn't do that.  When you place either a div tag on the page or draw a layer, it needs to have those values defined.
Avatar of mmaslar

ASKER

Alex,

That sounded reasonable, but adding the width & height didn't seem to help. Here are the new & improved files. Thoughts or suggestions on specific changes required?

Thanks!


Template file:
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="iso-8859-1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<HTML>
      <HEAD>
            <title>Untitled Document</title>
            <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
            </script>
          <link href="../styles/master.css" rel="stylesheet" type="text/css">
      </HEAD>
      <body>

<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; top: 10px; left: 9px;"><img src="../Images/NavBkgd.jpg" width="193" height="785"></div>
<div id="Layer2" style="position:absolute; width:531px; height:30px; z-index:2; left: 217px; top: 10px;"><!-- TemplateBeginEditable name="EditRegion4" -->EditRegion4<!-- TemplateEndEditable --></div>

<div id="Layer3" style="position:absolute; width:526px; height:267px; z-index:3; left: 244px; top: 74px;">
  <!-- TemplateBeginEditable name="EditRegion3" -->
  <form name="Form1" id="Form1" method="post" runat="server">
  EditRegion3
  </form>
  <!-- TemplateEndEditable -->
</div>

</body>
</html>
--------------------------------------------------------------------

ASPX page, before Visual Studio:
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="iso-8859-1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<HTML><!-- InstanceBegin template="/Templates/Junk_template3.dwt.aspx" codeOutsideHTMLIsLocked="false" -->
      <HEAD>
            <title>Untitled Document</title>
            <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
            </script>
          <link href="styles/master.css" rel="stylesheet" type="text/css">
      </HEAD>
      <body>

<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; top: 10px; left: 9px;"><img src="Images/NavBkgd.jpg" width="193" height="785"></div>
<div id="Layer2" style="position:absolute; width:531px; height:30px; z-index:2; left: 217px; top: 10px;"><!-- InstanceBeginEditable name="EditRegion4" -->Welcome to Junk 8 <!-- InstanceEndEditable --></div>

<div id="Layer3" style="position:absolute; width:526px; height:267px; z-index:3; left: 244px; top: 74px;">
  <!-- InstanceBeginEditable name="EditRegion3" -->
  <form name="Form1" id="Form1" method="post" runat="server">
  Junk8
  </form>
  <!-- InstanceEndEditable -->
</div>

</body>
<!-- InstanceEnd --></html>
----------------------------------------------------------------------------------------

ASPX page after Visual Studio
<%@ Page Language="c#" ContentType="text/html" ResponseEncoding="iso-8859-1" CodeBehind="Junk8.aspx.cs" AutoEventWireup="false" Inherits="EventRegistration.Junk8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
      <HEAD>
            <title>Untitled Document</title><!-- InstanceBegin template="/Templates/Junk_template3.dwt.aspx" codeOutsideHTMLIsLocked="false" -->
            <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
            </script>
            <link href="styles/master.css" rel="stylesheet" type="text/css">
      </HEAD>
      <body>
            <div id="Layer1" style="Z-INDEX:1; LEFT:9px; WIDTH:200px; POSITION:absolute; TOP:10px; HEIGHT:115px"><img src="Images/NavBkgd.jpg" width="193" height="785"></div>
            <div id="Layer2" style="Z-INDEX:2; LEFT:217px; WIDTH:531px; POSITION:absolute; TOP:10px; HEIGHT:30px"><!-- InstanceBeginEditable name="EditRegion4" -->
                  Welcome to Junk 8 <!-- InstanceEndEditable --></div>
            <div id="Layer3" style="Z-INDEX:3; LEFT:244px; WIDTH:526px; POSITION:absolute; TOP:74px; HEIGHT:267px">
                  <!-- InstanceBeginEditable name="EditRegion3" -->
                  <form name="Form1" id="Form1" method="post" runat="server">
                        <P>Junk8
                        </P>
                        <P>
                              <asp:TextBox id="TextBox1" runat="server"></asp:TextBox></P>
                        <P>
                              <asp:Button id="Button1" runat="server" Text="Button"></asp:Button></P>
                  </form>
                  <!-- InstanceEndEditable -->
            </div>
            <!-- InstanceEnd -->
      </body>
</HTML>
ASKER CERTIFIED SOLUTION
Avatar of rhowarth
rhowarth

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of mmaslar

ASKER

Greetings rhowarth,

Thanks, you're correct about the relocation of the InstanceBegin tag. Learning and avoiding the "triggers" on the VS side may be the key. But I've also found DW MX to have its own ground rules and quirks, which don't necessarily contribute to successful round-tripping...

I'd be interested in conversing further with you, please feel free to contact me via www.blackpants.com

Regards,

Mark Maslar
Hi Guys,
We Currently use dreamweaver to build the templates and VS for the backend. We have run into the same problem also, and it gets very long winded going through and changing the template comment to back to the orginal positoin. We also have fiddled around with VS but it keeps triggering the change when you switch to HTML view.

Have you guys been able to solve this issue at all? Is there some kind of work around.

Regards

Michael Craig
Clue Design
www.cluedesign.com.au
Avatar of mmaslar

ASKER

Greetings Michael,

I pursued the matter with Microsoft, and the short answer is that there's no workaround. It's possible that the comment's location might not get altered if it's placed within the BODY tag, but I have not tried that. Whidby (next release of Visual Studio, in 2005?) addresses the problem.

Fyi, in my opinion Dreamweaver MX is no angel either. It doesn't seem to support VS' grid layout mode very well, which I feel is a critical limitation. And I was also running into situations were it would add additional comment tags if the comment block wasn't exactly where it expected it to be. Working around VS issues is actually way easier than working around DW's limitations. Sad, because we love DW.

OK, now about the VS issue in Microsoft's words:
"Basically Trident moves the comment there and the Everett SCP code does not move it back. The code simply saves the spacing inside the tag. Can't do anything about this in Everett.
Works fine in Whidbey. Light years better SCP there.

The only workaround I can see is to move the comment inside the BODY - (not sure if Dreamweaver can work that way). Trident doesn't disturb the structure of the document in there nearly as much as it does outside. This is because trident essentially re-creates everything between HTML and HEAD with no guidance from the document. At least in the BODY case the DOM determines the order of things.

Sorry there is no better workaround in Everett. However things should be fine with Whidbey."


Best regards,
Mark Maslar
Blackpants Design Group
www.blackpants.com 
Hi Mark,
Thanks for your indepth response, much appreciated.

I'll give moving the comment into the body ago but yeh i'm not sure if that will work also. No harm trying. At the momment I've got to go through all the files and edit them with notepad and move the comment back to the right position just means I have to work with my programmers a bit more closly so we know which files have been modified.

Can't wait for the next version if there is a fix. I love working with Dreamweaver it saves so much design time, I also like VS but yeh it has a few issues regarding HTML and changing code around which can get on your nerves hehe. Better Grid and beening able to edit content inside panels in DW would also be good.

Thanks Again will let you know if we figure out a work around.
Regards

Michael Craig
Clue Design
www.cluedesign.com.au