html form problem - Templates and document types

Streety 358 posts 568 karma points

Feb 18, 2011 @ 13:06

HTML <Form> problem.

I have a problem with the good old form tag.

I am using one form tag in my master template. However I have content panels that pull in html into a sidebar. This concept from the Standard Website Starter Kit by Chris Koiak.

OK.

So the buttons all work fine in the main content panel but the sidbar content panels do not show buttons etc. This is because the content sidebar panels are just straight html without Head or Body tags associated so they are not picking up the form tag and cannot run the controls.

So the question is how do I get around this. I can only have one form tag but I need to get objects that post, going on the sidebar too.

I cannot inherit from my master page, else I get all the markup from that template (which I don't want, just the html).

I cannot add another form tag in the sidebarcontent panel else I get "The state information is invalid for this page and might be corrupted." error.

I am a bit stuck resolving this one.

I have tried breaking down the master pages into smaller sections and inheriting just the previous form but I am also inheriting the head and body tags which is also causing issues.

Any ideas

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Feb 19, 2011 @ 21:34

Hi Streety

Coud you perhaps post some of the code from your template?

I think it will be a bit easier to help you out if you post this. But I guess it's becaue you have all your content in a server-side form right? <form runat="server">...

So I guess the real issue is that when you submit a form it's the form in your center-content that gets submitted no matter, which form you submit. Right?

/Jan

Copy Link

Streety 358 posts 568 karma points

Feb 21, 2011 @ 10:55

Well the master template is as you would expect a html page to look like with a form tag below the body (no scriptmanager).


    <body>
    <form id="nine9Form" runat="server">
               <div id="body-nav">
   
            <div id="body-nav-left">
            <p>You are here > <a style="font-size:1.0em;"  href="/">Home</a> > <umbraco:Macro Alias="[XSLT]Breadcrumb" runat="server"></umbraco:Macro></p>             
            </div>     
            
            <div id="body-nav-right">
            <p><umbraco:Macro Alias="[NET]HeaderInfo" runat="server"></umbraco:Macro></p>
      </div>
    </div>  
    <umbraco:Macro Alias="[NET]Search" runat="server"></umbraco:Macro>
  

    <div id="wrap_outer">

        <div id="masthead">
            <img src=" /Images/masthead.jpg" alt="Private Roads" />
        </div>
   
        <div id="wrap_inner">
            <div id="wrap_inner_pic">
            <img src="/Images/indexpic.jpg" alt="Private Roads" />
            <div id="wrap_inner_pic_content_title">
              <h1><umbraco:Item field="headingTitle" recursive="true" runat="server"></umbraco:Item> </h1>
            </div>
            <div id="wrap_inner_pic_content_para1">
              <p><umbraco:Item field="headingPara1" recursive="true" runat="server"></umbraco:Item></p>
              
            </div>
            <div id="wrap_inner_pic_content_para2">
              <p><umbraco:Item field="headingPara2" recursive="true" runat="server"></umbraco:Item></p>
           </div>            
          </div>

  
      <div id="wrap_inner_nav"> 
            <div id="wrap_nav">
            
              <div id="main-handle" class="opaque">
             <div class="roundfg">
         <umbraco:Macro PropertyAlias="primaryNavigation" Alias="[XSLT]RelatedLinksList" runat="server"></umbraco:Macro>                 </div>

                <b class="round">
                <b class="round5"></b>
                <b class="round4"></b> 
                <b class="round3"></b> 
                <b class="round2"><b>
                </b>
                </b> 
                <b class="round1"><b></b></b></b> 
                </div>
            
            </div>      
          
          </div>
        
          <div id="wrap_inner_content">

                <asp:ContentPlaceHolder Id="ContentMain" runat="server">
                <!-- Insert default "ContentMain" markup here -->
                </asp:ContentPlaceHolder> 
    
       
         </div>    
      <div id="wrap_inner_sidebar">
                 <asp:ContentPlaceHolder Id="ContentSide" runat="server">


                <!-- Insert default "ContentSide" markup here -->
                </asp:ContentPlaceHolder> 

          </div>
      
  <br class="clearfloat" />
        </div>
    </div>
      <div id="footer">
            <div id="footer_text">
            <br />
           <h1><img src="/Images/small_logo.jpg" alt="Private Roads Logo" style="vertical-align:middle" class="right" /><umbraco:Item field="websiteTitle" recursive="true" runat="server"></umbraco:Item></h1>
            <p><umbraco:Item field="addressSingleLine" recursive="true" runat="server"></umbraco:Item></p>
  <br />  
  <div class="hr"><hr /></div><br />
  <umbraco:Macro PropertyAlias="footerNavigation" Alias="[XSLT]FooterLinks" runat="server"></umbraco:Macro>  
  <br />
         <br />
         <p> <umbraco:Item field="copyright" recursive="true" runat="server"></umbraco:Item> | <a href="#">Terms &amp; Conditions</a> | <a href="#">Privacy</a> | <a href="#">Sitemap</a> | <a href="#">Contact Us</a> | <a href="http://validator.w3.org/check/referer" target="_blank">xHTML</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">CSS</a> | Design: <a href="http://www.nine9design.co.uk" target="_blank">Nine9Design</a></p>
         </div>
         </div>
         <script type="text/javascript" src="/Scripts/jquery.timers.js"></script>
         <script type="text/javascript" src="/Scripts/default.js"></script>
  </form>
  </body>

The ContentSide placeholder runs an XSLT called SidePanels

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet
  version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:msxml="urn:schemas-microsoft-com:xslt"
  xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets"
  exclude-result-prefixes="msxml
 umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes 
Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings 
Exslt.ExsltSets ">

<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:template match="/">

  <xsl:if test="string-length($currentPage/contentPanels) > 0">
  <xsl:variable name="nodeIds" select="umbraco.library:Split($currentPage/contentPanels,',')" />
  <xsl:if test="count($nodeIds/value) > 0">
    <ul>
      <xsl:for-each select="$nodeIds/value">
        <li>
          <xsl:value-of disable-output-escaping="yes" select="umbraco.library:RenderTemplate(current()/.,umbraco.library:GetXmlNodeById(current()/.)/@template)"/>
        </li>
      </xsl:for-each>
    </ul>
  </xsl:if>
  </xsl:if>

</xsl:template>

</xsl:stylesheet>

Which looks at the object called ContentPanels in the currentpage which is associated at the document type with the template called "ContentPanel" which runs this:

<%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>

<asp:Content ContentPlaceHolderId="ContentPlaceHolderDefault" runat="server">

  <umbraco:Item field="bodyText" runat="server"></umbraco:Item>
  <br />
  <div class="hr"><hr /></div><br />
  
</asp:Content>

This is the interesting bit.

The content panel is not a subordinate of the main master template

Any html in the directory "ContentPanels" that are selected (to be shown in the settings of the page) will be rendered with the main master template (with the form). However selected panels with ASP:Button & Label objects do not render properly unless I manually wrap a form tag around them. In which case they do render but other objects on the page complain of a corruption of state and duplicate form tag.

Sorry a long post.

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Feb 21, 2011 @ 21:43

Hi Streety...

And a little confusing as well (But sometimes it can be hard to get what others are thinking 100%, right :))

Is the serverside form needed in order for your page to work? If not then you should remove it and then you can use as many <form> elements you can fancy. But I guess it's probably not that simple in this case?

Otherwise I guess you could use a fieldset to wrap around your input fields from the different panels perhaps? There is a good guide on how to do that and make the keypress event trigger the correct "form" - I guess you need to make an onclick event listener as well if I do remember correctly. http://beardscratchers.com/journal/fixing-the-enter-keypress-event-in-aspnet-with-jquery

Hope this helps...

/Jan

Copy Link

Streety 358 posts 568 karma points

Feb 22, 2011 @ 10:48

Thanks for the article.It seems a backward to ditch asp controls and return to the fieldset and input controls.

The master page form is there to handle actions that require post back events and there could be many of them on a single page. Would muliple form cause a Multiple Forms error?

I'll look into this.

Thanks Jan

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Feb 22, 2011 @ 11:22

Hi Streety

Well, it's the joy of working with web forms I guess.

But if the panel content comes from a user control you should be able to group it correctly so the correct form is triggered on submit.

/Jan

Copy Link

is working on a reply...

Flag this post as spam?

HTML <Form> problem.