如何在Ajax可折叠面板展开时更改面板的颜色,该面板是在代码隐藏中创建的

本文关键字:颜色 创建 隐藏 代码 可折叠 Ajax | 更新日期: 2023-09-27 18:29:58

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

运行时代码->

{
 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);
}

如何在Ajax可折叠面板展开时更改面板的颜色,该面板是在代码隐藏中创建的

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

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

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

在.aspx文件中,您可以编写以下内容来更改颜色。

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

这个代码并不完美,但会节省你的时间。。

谢谢,Prashant Trambake