Hello,
I am working with the Ajax update panel. I am attempting to change the contents programmtically in updatepanel0. The clear operation works but the add does not. When I do the same operations on updatepanel1 it works fine. Any ideas why? I should note that I am trying to change the class assigned to each button when one is clicked. Below are the default.aspx, code behind along with the css file contents.
Thanks
Chris
<%@ Page Language="C#" CodeFile="~/Default.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html>
<html lang="en">
<head id="Head1" runat="server">
<meta charset="utf-8" />
<title runat="server" id="MainTitle">Home - Interactive Loss Determination</title>
<link href="~/Content/Site2.css" rel="stylesheet" />
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<asp:PlaceHolder ID="PlaceHolder1" runat="server">
<script src="<%: ResolveUrl("~/Scripts/modernizr-2.5.3.js") %>"></script>
</asp:PlaceHolder>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<%-- <asp:ContentPlaceHolder runat="server" ID="HeadContent" />--%>
</head>
<body>
<form id="Form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<header>
<div class="content-wrapper1">
<div class="float-left">
<p class="site-title"><a id="A1" runat="server" href="http://www.continentalmachinery.com"><img runat="server" ID="cmcimage" src="Images/logo2.png" /></a></p>
</div>
<div class="float-right">
<asp:UpdatePanel ID="UpdatePanel0" runat="server" >
<ContentTemplate>
<section id="login">
<ul>
<li><a id="loginLink" runat="server" href="~/Account/Login.aspx">Log in</a></li>
</ul>
</section>
<nav>
<ul id="menu">
<li><asp:Button runat="server" ID="HomeButton" cssclass="HomeButtonSelected" OnClick="HomeButton_Click" Text="Home" /></li>
<li><asp:Button runat="server" ID="AboutButton" cssclass="AboutButton" OnClick="AboutButton_Click" Text="About" /></li>
<li><asp:Button runat="server" ID="ContactButton" cssclass="ContactButton" OnClick="ContactButton_Click" Text="Contact" /></li>
</ul>
</nav>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</header>
<div id="body">
<section class="featured">
<div class="content-wrapper2">
<hgroup class="title">
<h1>Interactive Loss Determination</h1>
</hgroup>
</div>
</section>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate >
<%-- <section class="content-wrapper main-content clear-fix">--%>
<section class="content-wrapper3">
<hgroup class="title">
<h2>We suggest the following:</h2>
</hgroup>
<ol class="round">
<li class="one">
<h5>Getting Started</h5>
Please log in to start the interactive loss determination.
</li>
<li class="two">
<h5>Learn More</h5>
Select the "About" link above to learn more about the interactive loss determination.
</li>
<li class="three">
<h5>Questions</h5>
Selet the "Contact" link above to submit questions.
</li>
</ol>
</section>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="HomeButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="AboutButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="ContactButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
<footer>
<div class="content-wrapper4">
<div>
<%-- <div class="float-left">--%>
<p>
© <%: DateTime.Now.Year %> - CMC Interactive Loss Determination
</p>
</div>
</div>
</footer>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void HomeButton_Click(object sender, EventArgs e)
{
MainTitle.Text = "Home - Interactive Loss Determination";
Literal literal0 = new Literal();
literal0.Mode = LiteralMode.PassThrough;
literal0.ID = "lit0";
literal0.Text = "<section id=\"login\"><ul><li><a id=\"loginLink\" runat=\"server\" href=\"~/Account/Login.aspx\">Log in</a></li></ul></section><nav><ul id=\"menu\"><li><asp:Button runat=\"server\" ID=\"HomeButton\" cssclass=\"HomeButtonSelected\" OnClick=\"HomeButton_Click\" Text=\"Home\" /></li><li><asp:Button runat=\"server\" ID=\"AboutButton\" cssclass=\"AboutButton\" OnClick=\"AboutButton_Click\" Text=\"About\" /></li><li><asp:Button runat=\"server\" ID=\"ContactButton\" cssclass=\"ContactButton\" OnClick=\"ContactButton_Click\" Text=\"Contact\" /></li></ul></nav>";
UpdatePanel0.ContentTemplateContainer.Controls.Clear();
UpdatePanel0.ContentTemplateContainer.Controls.Add(literal0);
Literal literal1 = new Literal();
literal1.Mode = LiteralMode.PassThrough;
literal1.ID = "lit1";
literal1.Text = "<section class=\"content-wrapper3\"><hgroup class=\"title\"><h2>We suggest the following:</h2></hgroup><ol class=\"round\"><li class=\"one\"><h5>Getting Started</h5>Please log in to start the interactive loss determination.</li><li class=\"two\"><h5>Learn More</h5>Select the \"About\" link above to learn more about the interactive loss determination.</li><li class=\"three\"><h5>Questions</h5>Selet the \"Contact\" link above to submit questions.</li></ol></section>";
UpdatePanel1.ContentTemplateContainer.Controls.Clear();
UpdatePanel1.ContentTemplateContainer.Controls.Add(literal1);
}
protected void AboutButton_Click(object sender, EventArgs e)
{
MainTitle.Text = "About - Interactive Loss Determination";
Literal literal0 = new Literal();
literal0.Mode = LiteralMode.PassThrough;
literal0.ID = "lit0";
literal0.Text = "<section id=\"login\"><ul><li><a id=\"loginLink\" runat=\"server\" href=\"~/Account/Login.aspx\">Log in</a></li></ul></section><nav><ul id=\"menu\"><li><asp:Button runat=\"server\" ID=\"HomeButton\" cssclass=\"HomeButton\" OnClick=\"HomeButton_Click\" Text=\"Home\" /></li><li><asp:Button runat=\"server\" ID=\"AboutButton\" cssclass=\"AboutButtonSelected\" OnClick=\"AboutButton_Click\" Text=\"About\" /></li><li><asp:Button runat=\"server\" ID=\"ContactButton\" cssclass=\"ContactButton\" OnClick=\"ContactButton_Click\" Text=\"Contact\" /></li></ul></nav>";
UpdatePanel0.ContentTemplateContainer.Controls.Clear();
UpdatePanel0.ContentTemplateContainer.Controls.Add(literal0);
Literal literal1 = new Literal();
literal1.Mode = LiteralMode.PassThrough;
literal1.ID = "lit1";
literal1.Text = "<section class=\"content-wrapper3\"><hgroup class=\"title\"><h2>Describe the interactive loss deterination here.</h2></hgroup><article><p>Use this area to provide additional information.</p><p>Use this area to provide additional information.</p><p>Use this area to provide additional information.</p></article></section>";
UpdatePanel1.ContentTemplateContainer.Controls.Clear();
UpdatePanel1.ContentTemplateContainer.Controls.Add(literal1);
//AboutButton.BackColor = System.Drawing.Color.LightBlue;
}
protected void ContactButton_Click(object sender, EventArgs e)
{
MainTitle.Text = "Contact - Interactive Loss Determination";
Literal literal0 = new Literal();
literal0.Mode = LiteralMode.PassThrough;
literal0.ID = "lit0";
literal0.Text = "<section id=\"login\"><ul><li><a id=\"loginLink\" runat=\"server\" href=\"~/Account/Login.aspx\">Log in</a></li></ul></section><nav><ul id=\"menu\"><li><asp:Button runat=\"server\" ID=\"HomeButton\" cssclass=\"HomeButton\" OnClick=\"HomeButton_Click\" Text=\"Home\" /></li><li><asp:Button runat=\"server\" ID=\"AboutButton\" cssclass=\"AboutButton\" OnClick=\"AboutButton_Click\" Text=\"About\" /></li><li><asp:Button runat=\"server\" ID=\"ContactButton\" cssclass=\"ContactButtonSelected\" OnClick=\"ContactButton_Click\" Text=\"Contact\" /></li></ul></nav>";
UpdatePanel0.ContentTemplateContainer.Controls.Clear();
UpdatePanel0.ContentTemplateContainer.Controls.Add(literal0);
Literal literal1 = new Literal();
literal1.Mode = LiteralMode.PassThrough;
literal1.ID = "lit1";
literal1.Text = "<section class=\"content-wrapper3\"><hgroup class=\"title\"><h2>Continental Machinery</h2></hgroup><section class=\"contact\"><header><h3>Phone:</h3></header><p><span class=\"label\">Main:</span><span>303.898.7954</span></p><p><span class=\"label\">After Hours:</span><span>303.898.7954</span></p></section><section class=\"contact\"><header><h3>Email:</h3></header><p><span class=\"label\">Support:</span><span><a href=\"mailto:chax@continentalmachinery.com\">chax@continentalmachinery.com</a></span></p><p><span class=\"label\">Marketing:</span><span><a href=\"mailto:chax@continentalmachinery.com\">chax@continentalmachinery.com</a></span></p><p><span class=\"label\">General:</span><span><a href=\"mailto:chax@continentalmachinery.com\">chax@continentalmachinery.com</a></span></p></section><section class=\"contact\"><header><h3>Address:</h3></header><p>6200 W Floyd Ave<br />Denver, CO 80227</p></section></section>";
UpdatePanel1.ContentTemplateContainer.Controls.Clear();
UpdatePanel1.ContentTemplateContainer.Controls.Add(literal1);
}
}
body {
display: block;
}
#body {
clear: both;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
ul {
text-align: right;
}
li {
display: inline;
}
/*#################################################################################################*/
/* Home, About and Contact Button Styling */
.HomeButton {
border: none;
background: none;
color: #999;
font-size: 1em;
text-decoration: none;
font-weight:400;
}
.HomeButtonSelected {
background: none;
color: #999;
font-size: 1em;
text-decoration: none;
font-weight:600;
border-style: solid;
border-width: 2px;
}
.AboutButton {
border: none;
background: none;
color: #999;
font-size: 1em;
text-decoration: none;
font-weight:400;
}
.AboutButtonSelected {
background: none;
color: #999;
font-size: 1em;
text-decoration: none;
font-weight:600;
border-style: solid;
border-width: 2px;
}
.ContactButton {
border: none;
background: none;
color: #999;
font-size: 1em;
text-decoration: none;
font-weight: 400;
}
.ContactButtonSelected {
background: none;
color: #999;
font-size: 1em;
text-decoration: none;
font-weight:600;
border-style: solid;
border-width: 2px;
}
/*#################################################################################################*/
/* Home, About and Contact Button - Change Cursor on Hover */
#HomeButton:hover, #AboutButton, #ContactButton {
cursor: pointer;
}
/*#################################################################################################*/
/* Home, About and Contact Button - Remove Dotted Line Around Button */
#HomeButton:focus, #AboutButton:focus, #ContactButton:focus {
outline: none;
}
/*#################################################################################################*/
/* Content Wrappers */
.content-wrapper1 {
max-width: 960px;
margin: 0 auto;
}
.content-wrapper2 {
max-width: 960px;
margin: 0 auto;
background-color: #3366FF;
}
.content-wrapper3 {
margin: 0 auto;
background-color: #E5ECFF;
}
.content-wrapper4 {
max-width: 960px;
margin: 0 auto;
font-size: .8em;
}
/*#################################################################################################*/
/* Contact Page - Class Contact: Styling */
.contact {
max-width: 960px;
margin: 0 auto;
}
/*#################################################################################################*/
h1 {
color: #fff;
}
.title {
max-width: 960px;
margin: 0 auto;
}
article {
max-width: 960px;
margin: 0 auto;
}
.round {
max-width: 960px;
margin: 0 auto;
}
footer {
background-color: #A7BDE7;
}