Change the DIV tag height on master page from codebehind

Question

I can't change background color and height of div item on master page.

I have a button on default.aspx page which is "inside" of master page. I have <%@ MasterType... element on default.aspx and a public enum property called: "selectedPanel". When I click the button on default.aspx page, the "selectedPanel" property is changing, but nothing is happened on browser.

The property set{...} of "selectedPanel" is fired fine when I debug. It seems to me some "refresh" or something similar is missing, after "selectedPanel" property has changed.

Page logic is the follow: Click on default.aspx -> Set the "SelectedPanel" property on master page -> Change the background color of "searchPlace" DIV on Master page.

I read all other questions on this site, but something is wrong in my project...

Reg.Master page

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="reg.Master.cs" Inherits="Reg.Reg" %>

<!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 runat="server">
    <link href="App_Themes/Default/reg.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<div id="container">

    <div id="searchPlace" runat="server">
        <%-- Search --%>
        <asp:ContentPlaceHolder ID="cphSearch" runat="server">
        </asp:ContentPlaceHolder>
    </div>

</div>
</form>    
</body>
</html>

Reg.Master.cs page

public enum panelItem
{
    simpleSearch,
    advancedSearch,
    newItem
}

I'd like to change the DIV background color here:

public panelItem selectedPanel
{
    set
    {
        if (value == panelItem.simpleSearch)
        {
            searchPlace.Style.Add(HtmlTextWriterStyle.BackgroundColor, "green");
        }
        else if (value == panelItem.advancedSearch)
        {
            searchPlace.Style.Add(HtmlTextWriterStyle.BackgroundColor, "black");
        }
    }
}

Reg.css file

#searchPlace
 {
     float:left;
     top: 100px;
     width:800px;
     height:350px;
     padding-left: 10px;
     padding-right: 10px;
 }

Default.aspx page

<%@ Page Title="Reg" Language="C#" MasterPageFile="~/reg.Master" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="Reg._default" %>
<%@ MasterType VirtualPath="~/reg.Master" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<asp:Content ID="cntSearch" ContentPlaceHolderID="cphSearch" runat="server">
<asp:UpdatePanel ID="updSearch" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
    <asp:Button ID="btnChangeColor" runat="server" onclick="changeColor" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>

Default.aspx.cs file

protected void btnChangeColor_Click(object sender, EventArgs e)
{
    Master.selectedPanel = Reg.panelItem.simpleSearch;
}

have you tried making a new css class that has the styles that you want to change the div to and just applying that class to the div from the code-behind? — Zachary Kniebel
i think you have to put your button code in Page_PreInit() event. — Waqar Janjua
I tried already with or without CSS even skinID. The rendering order of page when I click the button is: 1) Page_load of default.aspx 2) Page_load of master page 3) click event on default.aspx. On the click event I change the "selectPanel" property. I'll try to page_preInit... — Satu

Satu Satu · Accepted Answer · 2012-07-31T09:22:10

The problem was around the Ajax updatePanel. I can't update the DIV (searchPlace) property outside of updatePanel.

Master page:

<div id="container">
   <%-- Search --%>
   <asp:ContentPlaceHolder ID="cphSearch" runat="server">
   </asp:ContentPlaceHolder>
</div>

Default.aspx page:

<asp:Content ID="cntSearch" ContentPlaceHolderID="cphSearch" runat="server">
<asp:UpdatePanel ID="updSearch" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<div id="searchPlace" runat="server"> <-- DIV tag moved here
    <asp:Button ID="btnChangeColor" runat="server" onclick="changeColor" Text="Button" />
</div>
</ContentTemplate>
</asp:UpdatePanel>

Event handle on Default.aspx.cs:

searchPlace.Style.Add(HtmlTextWriterStyle.Height, "300px");
searchPlace.Style.Add(HtmlTextWriterStyle.BackgroundColor, "Black");
updSearch.Update();

Change the DIV tag height on master page from codebehind

1 Answers