referencing controls in code behind

Will · #1 (**permalink**) March 3rd, 2009, 08:24 AM

I have a contact form contained within a div. I would like to hide the contact form when it is submitted and display a success type message such as what you have done in your book.

However it wont let me reference the div in the code behind file.

I was originially trying to do something like this in the btnSubmit click event handler.

Code:

lblSuccess.Visible = True
contact1.Visible = False

However this throws an exception because contact1 is a div(I can only assume).

So as far as I can tell I have 2 options. The first longer option is to declare the visibility of each label and control to false when the button is clicked.

The second is to do a Response.redirect to a page just the same but which has the message in it.

Neither of these are ideal the first option is quite long and I don't really want to redirect people either.

So is there a better way that I am missing?

Imar · #2 (**permalink**) March 3rd, 2009, 10:22 AM

If it's just a <div /> element, you can add a Runat="server" attribute to have the div run at the server. This in turn allows you to hide it:

<div id="contact1" runat="server">
Some content here
</div>

Now you can set its Visible property....

Alternatively, you can use an asp:Panel instead of a <div> as a Panel renders as a div element in the browser.

Hope this helps,

Imar

Will · #3 (**permalink**) March 3rd, 2009, 10:36 AM

I do have the div set to runat="server" already but it throws an exception.

And I just figured out why...It think. because the lblSuccess was in the div contact1 so maybe it was because it didn't know whether to display it or hide it?

However after moving lblSuccess out of the div I am now incurring a parser error to do with the ContentTemplate, so hopefully if I fix that then it should work as intended.

Anyway the code I have in my page is:

Code:

<!--**************Contact Form*****************-->
             <asp:ScriptManager runat="server"></asp:ScriptManager>
             <asp:UpdatePanel runat="server">
                <ContentTemplate>
                
                                                         <div id="contact1" runat="server">
                                                         <asp:label runat="server" ID="lblName" Text="Name:" />
        <asp:TextBox runat="server" ID="txtName" />
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please enter a name." ControlToValidate="txtName" CssClass="error">*</asp:RequiredFieldValidator>
       
                
        <asp:Label runat="server" ID="lblEmail" Text="Email:" />
        <asp:TextBox runat="server" ID="txtEmail" />
            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
                ErrorMessage="Please enter an email address." ControlToValidate="txtEmail" CssClass="error">*</asp:RequiredFieldValidator>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" 
                ErrorMessage="Please enter a valid email address, eg: you@yourprovider.com." ControlToValidate="txtEmail" CssClass="error" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">*</asp:RegularExpressionValidator>
               
               <asp:Label runat="server" id="lblSubject" text="Subject:"></asp:Label> 
               <asp:TextBox runat="server" id="txtSubject" />
              <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="Please enter a subject" ControlToValidate="txtSubject" CssClass="error">*</asp:RequiredFieldValidator>
               
        <asp:Label runat="server" ID="lblMessage" Text="Message:" />
        <asp:TextBox runat="server" ID="txtMessage" TextMode="MultiLine" />
            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="Please enter a message" ControlToValidate="txtMessage" CssClass="error">*</asp:RequiredFieldValidator>
                      
            <asp:Button runat="server" ID="btnSubmit" Text="Submit Form!" CssClass="submit" />
            
              <asp:ValidationSummary ID="ValidationSummary1" runat="server" HeaderText="Please correct the following errors:" />
              
                   <asp:UpdateProgress runat="server">
              <progresstemplate>  
              <div class="pleasewait">
              <p>Please Wait...</p>
              </div>
              </progresstemplate>
              </asp:UpdateProgress>
            </ContentTemplate>
                </asp:UpdatePanel> 
              </div>
              
              <asp:Label ID="lblSuccess" runat="server" Visible="false">Your message has been sent successfully.</asp:Label>
                         
         <!--**************END of Contact Form****************-->

and the error message I am getting is:

Quote:

Parser Error

Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.

Parser Error Message: Unexpected end of file looking for </ContentTemplate> tag.

Source Error:

Line 19: <asp:ScriptManager runat="server"></asp:ScriptManager>
Line 20: <asp:UpdatePanel runat="server">
Line 21: <ContentTemplate>
Line 22:
Line 23: <div id="contact1" runat="server">

any ideas?

Imar · #4 (**permalink**) March 3rd, 2009, 12:43 PM

Take a look at this:

</ContentTemplate>
</asp:UpdatePanel>
</div>

You close the <div> *after* the UpdatePanel, while you open it inside in the panel. Simply change it to this:

</div>
</ContentTemplate>
</asp:UpdatePanel>

Hope this helps,

Imar

Will · #5 (**permalink**) March 3rd, 2009, 12:48 PM

Yup thanks alot again.. I will get these things by myself one day lol.

Is there a reason that moving this div would cause my stylesheet to not display the form correctly?

Because soon as I moved the div the form renders as though it isn't picking up all the styles set for it in the stylehseet?

Imar · #6 (**permalink**) March 3rd, 2009, 01:37 PM

Hard to tell for sure without seeing the actual CSS. One thing to check is the ID of the <div>. If you are targeting your div like this:

#contact1
{
...
}

then it will probably break. As explained in the book (don't have it with me so I don't know the exact page), ASP.NET will change client IDs of your controls / elements if they run at the server. To see if that's the case, look at the browser's HTML and check the client ID.

Hope this helps,

Imar

Will · #7 (**permalink**) March 3rd, 2009, 01:56 PM

Ok I do understand that and changing the css to reference the changed div does work but why? as before the form was referenced by the normal tag of #contact1.

Is this because I have placed the form in an update panel which causes a postback? (I don't get why that would mean it changes the name of the div, when before it wasn't changing the name of the div, if that makes sense)

Imar · #8 (**permalink**) March 3rd, 2009, 02:03 PM

Did it have Runat="server" before?

ASP.NET makes server side controls unique within their so called Naming Container. You could, theoretically, have multiple UpdatePanels, each with their own contact1 div element. To ensure client side unqiueness of the IDs, the IDs are prefixed with their "path"; that is, the name of their containers and the original ID. This will, fortunately, be changed in the next version of ASP.NET.

Imar

Will · #9 (**permalink**) March 3rd, 2009, 02:38 PM

Ok I fully understand that now. initially it did have runat="server" but then that wasn't working because of my incorrect nesting so I took it out. By putting it back in the div name is being changed to show the path and the prefixed div id.

And it will be good when they change that.

Thanks for explaining that for me.

Need to download code?

Navigation