Solved

Nested Editable Region error after editing with Visual Studio

Posted on 2004-04-13
7
2,361 Views
Last Modified: 2007-12-19
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>
0
Comment
Question by:mmaslar
7 Comments
 
LVL 8

Expert Comment

by:alexhogan
ID: 10832350
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.
0
 

Author Comment

by:mmaslar
ID: 10834910
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>
0
 
LVL 1

Accepted Solution

by:
rhowarth earned 500 total points
ID: 10920528
Greetings to a fellow designer & coder!!  I'm very excited to find someone else working with both Dreamweaver and Visual Studio to create .Net applications.  I was beginning to feel like a bit of a pariah by crossing the boundary.

Anyhow, I've experienced the very same problems and there is a quick fix I've discovered for correcting the symptoms, but I have not yet found a cure for the cause.  The problem lies in Visual Studio's insistence on a particular format for your page header.  If you look closely you'll notice that the before and after changes the <head> section of your code from:

<HTML><!-- InstanceBegin template="/Templates/Junk_template3.dwt.aspx" codeOutsideHTMLIsLocked="false" -->
     <HEAD>
          <title>Untitled Document</title>
To:
<HTML>
     <HEAD>
          <title>Untitled Document</title><!-- InstanceBegin template="/Templates/Junk_template3.dwt.aspx" codeOutsideHTMLIsLocked="false" -->

Notice how the template comment tag has been moved from preceding the <head> tag to following the <title> tag?  I don't know why VS would insist on this formatting, but it is really annoying.  If you simply relocate your <!-- comment --> tag to follow the <HTML> tag, Dreamweaver will once again be able to update the template definition for this page.  A similar problem will be encountered with Dreamweaver templates which create an editable region around the page <title > tag.  VS will move the title from within the editable region comments to be the first item in the <HEAD> section.  Annoying!  So you won't be able to change the page title in the Dreamweaver code view or you will create a duplicate title tage in the design view.

Microsoft insists that their IDE "will not modify your code", but apparently their definition of "code" does not include the page's structure tags.  There are a few options you can change under the Text Editor...HTML/XML...HTML specific in Visual Studio, however I have not found them wholey effective.  Your simplest (and sometimes most frustrating) course of action would be to verify the proper structure of your header section in the HTML view in Visual Studio before saving and opening in Dreamweaver.  I've noticed that the rewrite seems only to be triggered on switching from HTML view to Design view in Visual Studio, but there may also be other triggers for this little "helper".  

HTH

Rob
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:mmaslar
ID: 10925064
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
0
 

Expert Comment

by:clue8000
ID: 11115603
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
0
 

Author Comment

by:mmaslar
ID: 11116737
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 
0
 

Expert Comment

by:clue8000
ID: 11119074
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
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
This is used to tweak the memory usage for your computer, it is used for servers more so than workstations but just be careful editing registry settings as it may cause irreversible results. I hold no responsibility for anything you do to the regist…
Hi friends,  in this video  I'll show you how new windows 10 user can learn the using of windows 10. Thank you.

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now