Solved

Nested Editable Region error after editing with Visual Studio

Posted on 2004-04-13
7
2,357 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 

Author Comment

by:mmaslar
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
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…
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…
This demo shows you how to set up the containerized NetScaler CPX with NetScaler Management and Analytics System in a non-routable Mesos/Marathon environment for use with Micro-Services applications.

762 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

8 Experts available now in Live!

Get 1:1 Help Now