Dynamically change DIV CSS class from code behind in ASP.Net using C# and VB.Net

Last Reply 10 days ago By pandeyism

Posted 11 days ago

I have a listview control, wherein there is cssclass. How to change css class for div in code behind? <div class="card-header bg-blue text-white" id="latar" runat="server">

There is a label in the listview : <asp:Label ID="lblPernah" runat="server" Text='<%# Eval("pernah") %>' Visible="false" />, whose contents are 0 or 1.

if the value is 0 then <div class="card-header bg-blue text-white" id="latar" runat="server">, but if value is 1 then <div class="card-header bg-grey text-white" id="latar" runat="server">.

                    <asp:ListView runat="server" ID="lvKategori" ItemPlaceholderID="ItemPlaceHolder1">
                        <LayoutTemplate>
                            <div runat="server" id="ItemPlaceHolder1">
                            </div>
                        </LayoutTemplate>
                        <ItemTemplate>
                           <div class="col-md-4 col-sm-12">
                            <div class="card">
                                <div class="card-header bg-blue text-white" id="latar" runat="server">
                                    <h4 class="card-title text-white" id="heading-icon">Test</h4>
                                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                                    <div class="heading-elements">
                                    <ul class="list-inline mb-0">
                                        <li>
                                        <p><i class="ft-clock"></i> <%# Eval("waktu") %></p> 
                                        </li>
                                    </ul>
                                    </div>
                                </div>
                                <div class="card-content">
                                    <div class="card-body">
                                    <p class="card-text text-center">Kategori</p>    
                                    <h4 class="card-title text-center mb-0">
                                        <asp:Label ID="lblJudul" runat="server" Text='<%# Eval("nama_kategori") %>' />
                                        <asp:Label ID="lblPernah" runat="server" Text='<%# Eval("pernah") %>' Visible="false" />
                                    </h4>              
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <asp:LinkButton runat="server" ID="lnkRinci" Text="Mulai" 
                                        CommandArgument='<%# Eval("kode_kategori") %>'
                                        OnClick="OnlineTest" ForeColor="Blue" Font-Bold="true">
                                    </asp:LinkButton>
                                </div>
                                </div>
                            </div>
                        </ItemTemplate>
                    </asp:ListView>

 

Posted 10 days ago

Hi arie.keren,

Please refer below sample.

HTML

<asp:ListView runat="server" ID="lvKategori" ItemPlaceholderID="ItemPlaceHolder1"
    OnItemDataBound="lvKategori_ItemDataBound">
    <LayoutTemplate>
        <div runat="server" id="ItemPlaceHolder1">
        </div>
    </LayoutTemplate>
    <ItemTemplate>
        <div class="col-md-4 col-sm-12">
            <div class="card">
                <div class="card-header bg-blue text-white" id="latar" runat="server">
                    <h4 class="card-title text-white" id="heading-icon">
                        Test</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i>
                    </a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li>
                                <p>
                                    <i class="ft-clock"></i>
                                    <%# Eval("CustomerId") %></p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <p class="card-text text-center">
                            Kategori</p>
                        <h4 class="card-title text-center mb-0">
                            <asp:Label ID="lblJudul" runat="server" Text='<%# Eval("Name") %>' />
                            <asp:Label ID="lblPernah" runat="server" Text='<%# Eval("Country") %>' Visible="false" />
                        </h4>
                    </div>
                </div>
            </div>
        </div>
    </ItemTemplate>
</asp:ListView>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] { new DataColumn("CustomerId", typeof(int)), new DataColumn("Name", typeof(string)), new DataColumn("Country", typeof(string)) });
        dt.Rows.Add(1, "Mudassar", "India");
        dt.Rows.Add(2, "John", "USA");
        lvKategori.DataSource = dt;
        lvKategori.DataBind();
    }
}

protected void lvKategori_ItemDataBound(object sender, ListViewItemEventArgs e)
{
    string lblCountry = (e.Item.FindControl("lblPernah") as Label).Text;
    HtmlControl control = e.Item.FindControl("latar") as HtmlControl;
    if (lblCountry == "India")
    {
        control.Attributes["style"] = "color:blue";
    }
    else
    {
        control.Attributes["style"] = "color:grey";
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn() {New DataColumn("CustomerId", GetType(Integer)), New DataColumn("Name", GetType(String)), New DataColumn("Country", GetType(String))})
        dt.Rows.Add(1, "Mudassar", "India")
        dt.Rows.Add(2, "John", "USA")
        lvKategori.DataSource = dt
        lvKategori.DataBind()
    End If
End Sub

Protected Sub lvKategori_ItemDataBound(ByVal sender As Object, ByVal e As ListViewItemEventArgs)
    Dim lblCountry As String = (TryCast(e.Item.FindControl("lblPernah"), Label)).Text
    Dim control As HtmlControl = TryCast(e.Item.FindControl("latar"), HtmlControl)

    If lblCountry = "India" Then
        control.Attributes("style") = "color:blue"
    Else
        control.Attributes("style") = "color:grey"
    End If
End Sub

Screenshot