如何在代码创建的Ajax可折叠面板的扩展上更改Panel的颜色 -

时间:2016-01-12 05:03:26

标签: javascript c# asp.net ajax panel

我在asp.net的代码隐藏中创建了Panels和Ajax可折叠面板。现在我必须在展开和折叠时更改面板(pnl1)的颜色。如果在运行时完成,如何实现?

Runt time Code - >

{
 Label lbl=new Label();
            lbl.ID="Label1";
           // lbl.Text = "Hello";
            lbl.Attributes.Add("runat","server");
            lbl.Style.Add("ForeColor","Crimson");
            lbl.Style.Add("Font-Italic","true");
            lbl.Style.Add("Font-Names","Comic Sans MS");
            lbl.Style.Add("Font-Size","XX-Large");


            Label lbl1 = new Label();
            lbl1.ID = "lbl1";
            lbl1.Width = 800;
            lbl1.Height = 30;
            lbl1.Attributes.Add("runat", "server");
            lbl1.Style.Add("ForeColor", "Crimson");
            lbl1.Style.Add("background-color", "Orange");
            lbl1.Style.Add("text-align", "right");
            lbl1.Style.Add("Font-Size", "X-Large");

            Label lbl2 = new Label();
            lbl2.ID = "lbl2";
            lbl2.Width = 800;
            lbl2.Height = 400;
            lbl2.Attributes.Add("runat", "server");
            lbl2.Style.Add("ForeColor", "Crimson");
            lbl2.Style.Add("background-color", "Blue");
            lbl2.Style.Add("Font-Names", "Comic Sans MS");
            lbl2.Style.Add("Font-Size", "XX-Large");

            Panel pnl1=new Panel();
            pnl1.ID="pnl1";
            pnl1.Width=500;
            pnl1.Attributes.Add("runat","server");

            Panel pnl2 = new Panel();
            pnl2.ID = "pnl2";
            pnl2.Width = 500;
            pnl2.Attributes.Add("runat", "server");

            Image img1= new Image();
            img1.ID="img1";
            img1.Attributes.Add("runat","server");
            img1.Height=150;
            img1.BorderWidth=1;
            img1.ImageUrl="";
            img1.BackColor = System.Drawing.Color.DarkBlue;

            Image img2 = new Image();
            img2.ID = "img2";
            img2.Attributes.Add("runat", "server");
            img2.Height = 150;
            img2.BorderWidth = 2;
            img2.ImageUrl = "";
            img2.BackColor = System.Drawing.Color.DarkGray;
            pnl1.Controls.Add(lbl1);
            pnl2.Controls.Add(lbl2);


            AjaxControlToolkit.CollapsiblePanelExtender cpe = new AjaxControlToolkit.CollapsiblePanelExtender();
            cpe.ID = "ajax1";// +i.ToString();
            //cpe.Attributes.Add("runat", "server");
            cpe.TargetControlID = "pnl2";
            cpe.ExpandedSize = 300;
            cpe.CollapsedSize = 0;
            cpe.ExpandControlID = "pnl1";
            cpe.CollapseControlID = "pnl1";
            cpe.AutoCollapse = false;
            cpe.AutoExpand = false;
            cpe.ScrollContents = true;
            cpe.TextLabelID = "lbl1";
            cpe.CollapsedText = "-";
            cpe.ExpandedText = "+";
            cpe.ExpandedImage = "";
            cpe.CollapsedImage = "";
            cpe.ExpandDirection = AjaxControlToolkit.CollapsiblePanelExpandDirection.Vertical;

            MainDiv.Controls.Add(cpe);
            MainDiv.Controls.Add(pnl1);
            MainDiv.Controls.Add(pnl2);
            MainDiv.Controls.Add(lbl);
}

1 个答案:

答案 0 :(得分:0)

我们可以使用javascript实现这一目标。

在上面的代码(服务器端代码)中,在代码末尾添加以下行。

pnl1.Attributes.Add("onclick", "JavaScript:ChangeColor('MainContent_pnl1');");

在你的.aspx文件中,你可以编写类似下面的东西来改变颜色。

function ChangeColor(MainContent_pnl1) { 
            document.getElementById(MainContent_pnl1).style.color = "blue"; 
        } 

此代码并不完美,但会节省您的时间..

谢谢, Prashant Trambake