DropDown List Background Color C# ASP.NET
มาใส่สีพื้นหลังให้กับ DropDown List ให้มีสีสันสวยงามกันดีกว่าครับ
ตัวอย่างการใช้งาน Code-Behind (C#)
AspNetCodeBehind.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AspNetCodeBehind.aspx.cs" Inherits="AspNetCodeBehind" %>
<html>
<head>
< title>DropDownList Background Color ASP.NET</title>
</head>
<body>
<form id="form1" runat="server">
<div class="input-group">
<span class="input-group-addon" id="basic-addon-zonecolor">เลือกสี</span>
<asp:DropDownList ID="ddlMultiColor" runat="server" OnSelectedIndexChanged="ddlMultiColor_OnSelectedIndexChanged"
class="form-control" aria-describedby="basic-addon-zonecolor" AutoPostBack="true">
<asp:ListItem value="Transparent">Transparent</asp:ListItem>
<asp:ListItem value="LimeGreen">LimeGreen</asp:ListItem>
<asp:ListItem value="CornflowerBlue">CornflowerBlue</asp:ListItem>
<asp:ListItem value="Plum">Plum</asp:ListItem>
<asp:ListItem value="Orange">Orange</asp:ListItem>
<asp:ListItem value="LightBlue">LightBlue</asp:ListItem>
<asp:ListItem value="LightSalmon">LightSalmon</asp:ListItem>
<asp:ListItem value="Khaki">Khaki</asp:ListItem>
<asp:ListItem value="SaddleBrown">SaddleBrown</asp:ListItem>
<asp:ListItem value="DeepSkyBlue">DeepSkyBlue</asp:ListItem>
<asp:ListItem value="Yellow">Yellow</asp:ListItem>
<asp:ListItem value="MediumAquamarine">MediumAquamarine</asp:ListItem>
<asp:ListItem value="Red">Red</asp:ListItem>
<asp:ListItem value="DarkOrchid">DarkOrchid</asp:ListItem>
</asp:DropDownList>
<div id="msgColor" runat="server" ></div>
</div>
</form>
</body>
</html>
AspNetCodeBehind.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
public partial class AspNetCodeBehind : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
populateDdlMultiColor();
colorManipulation();
}
}
private void colorManipulation()
{
int row;
for (row = 0; row < ddlMultiColor.Items.Count - 1; row++)
{
ddlMultiColor.Items[row].Attributes.Add("style", "background-color:" + ddlMultiColor.Items[row].Value);
}
ddlMultiColor.BackColor = Color.FromName(ddlMultiColor.SelectedItem.Text);
}
private void populateDdlMultiColor()
{
ddlMultiColor.DataSource = finalColorList();
ddlMultiColor.DataBind();
}
protected void ddlMultiColor_OnSelectedIndexChanged(object sender, EventArgs e)
{
ddlMultiColor.BackColor = Color.FromName(ddlMultiColor.SelectedItem.Text);
colorManipulation();
ddlMultiColor.Items.FindByValue(ddlMultiColor.SelectedValue).Selected = true;
msgColor.Attributes.Add("style", "background:" + ddlMultiColor.SelectedItem.Value + ";width:30px;height:25px;");
}
}
ถ้าใช้ code ตามนี้จะได้สีพื้นหลัง 256 สี แต่ถ้าอยากได้สีตามที่เรากำหนด ให้เอา populateDdlMultiColor() ออกจาก page load แล้ว value ให้ DropDownList ใน CodeBehind.aspx ก็จะสีตามที่เราต้องการแล้ว
ตัวอย่างการใช้งาน Code-Behind (C#)
AspNetCodeBehind.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AspNetCodeBehind.aspx.cs" Inherits="AspNetCodeBehind" %>
<html>
<head>
< title>DropDownList Background Color ASP.NET</title>
</head>
<body>
<form id="form1" runat="server">
<div class="input-group">
<span class="input-group-addon" id="basic-addon-zonecolor">เลือกสี</span>
<asp:DropDownList ID="ddlMultiColor" runat="server" OnSelectedIndexChanged="ddlMultiColor_OnSelectedIndexChanged"
class="form-control" aria-describedby="basic-addon-zonecolor" AutoPostBack="true">
<asp:ListItem value="Transparent">Transparent</asp:ListItem>
<asp:ListItem value="LimeGreen">LimeGreen</asp:ListItem>
<asp:ListItem value="CornflowerBlue">CornflowerBlue</asp:ListItem>
<asp:ListItem value="Plum">Plum</asp:ListItem>
<asp:ListItem value="Orange">Orange</asp:ListItem>
<asp:ListItem value="LightBlue">LightBlue</asp:ListItem>
<asp:ListItem value="LightSalmon">LightSalmon</asp:ListItem>
<asp:ListItem value="Khaki">Khaki</asp:ListItem>
<asp:ListItem value="SaddleBrown">SaddleBrown</asp:ListItem>
<asp:ListItem value="DeepSkyBlue">DeepSkyBlue</asp:ListItem>
<asp:ListItem value="Yellow">Yellow</asp:ListItem>
<asp:ListItem value="MediumAquamarine">MediumAquamarine</asp:ListItem>
<asp:ListItem value="Red">Red</asp:ListItem>
<asp:ListItem value="DarkOrchid">DarkOrchid</asp:ListItem>
</asp:DropDownList>
<div id="msgColor" runat="server" ></div>
</div>
</form>
</body>
</html>
AspNetCodeBehind.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
public partial class AspNetCodeBehind : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
populateDdlMultiColor();
colorManipulation();
}
}
private void colorManipulation()
{
int row;
for (row = 0; row < ddlMultiColor.Items.Count - 1; row++)
{
ddlMultiColor.Items[row].Attributes.Add("style", "background-color:" + ddlMultiColor.Items[row].Value);
}
ddlMultiColor.BackColor = Color.FromName(ddlMultiColor.SelectedItem.Text);
}
private void populateDdlMultiColor()
{
ddlMultiColor.DataSource = finalColorList();
ddlMultiColor.DataBind();
}
protected void ddlMultiColor_OnSelectedIndexChanged(object sender, EventArgs e)
{
ddlMultiColor.BackColor = Color.FromName(ddlMultiColor.SelectedItem.Text);
colorManipulation();
ddlMultiColor.Items.FindByValue(ddlMultiColor.SelectedValue).Selected = true;
msgColor.Attributes.Add("style", "background:" + ddlMultiColor.SelectedItem.Value + ";width:30px;height:25px;");
}
}
ถ้าใช้ code ตามนี้จะได้สีพื้นหลัง 256 สี แต่ถ้าอยากได้สีตามที่เรากำหนด ให้เอา populateDdlMultiColor() ออกจาก page load แล้ว value ให้ DropDownList ใน CodeBehind.aspx ก็จะสีตามที่เราต้องการแล้ว
ความคิดเห็น
แสดงความคิดเห็น