روش اضافه کردن CSS، تغییر CSS و Style درASP.NET

شنبه 28 آذر 1394

مهمترین قابلیت زبان HTML نمایش متن و المانهای یک صفحه بر روی مرورگر است ولي برای طراحی یک صفحه و صفحه آرایی و زیباسازی یک صفحه ، امکانات خوبی را در اختیار طراح سایت قرار نمی دهد.اما Cascading Style Sheets یا به اختصار css نحوه ی نمایش عناصر را در صفحه مشخص می کند و به شما این امکان را می دهد که تمام قسمت ها و عناصر موجود در یک صفحه را کنترل کنید. در این مقاله می خواهیم چگونگی تغییر CSS و Style در ASP.NET را بیاموزیم.

روش اضافه کردن CSS، تغییر CSS و Style درASP.NET

برای نشان دادن این مثال فرمی را به صورت زیر طراحی کرده ایم که به سه قسمت تقسیم می شود:

قسمت اول متنی را روی صفحه نشان می دهد که به همراه یک دکمه می باشد، مانند زیر:

 

 

در تصویر بالا Class ضمیمه شده، LabelBlue روی دکمه "تغییر CSS Class" می باشد که با کلیک بر روی آن CSS Class تغییر کرده و به کلاس LabelGrey تبدیل می شود. مانند زیر:

 

 

برای درک جزییات بیشتر کد مورد نظر را بررسی کنید:

lblMessage.CssClass = "LabelGrey";

 

مثالی برای تغییر Style

در تصویر زیر به طور پیش فرض کلاسی اختصاص نیافته است و استایل آن با کلیک بر روی دکمه "تغییر Style" تغییر می کند:

خروجی آن به صورت زیر می شود:

 

 

و کد مربوط به آن به صورت زیر است:

lblWithoutStyle.Style.Add("font-size", "50px");

 

مثالی برای CSS اضافه شده

در تصویر زیر نیز هیچ کلاسی به متن چاپ شده اضافه نشده است و با کلیک بر روی دکمه "اضافه کردن کلاس"، کلاس ClassJoined به آن اضافه می شود:

 

 

خروجی به صورت زیر است:

 

 

کد مربوط به آن به صورت زیر است:

lblWithoutClass.Attributes.Add("class", "ClassJoined");

 

کد زیر موارد گفته شده در بالا را به صورت یک جا در یک صفحه HTML آورده است:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ChangeCSSClass.aspx.cs" Inherits="ChangeCSSClass" %>    
    
    <!DOCTYPE html>    
    
    <html xmlns="http://www.w3.org/1999/xhtml">    
    
    <head runat="server">    
        <style>    
            .LabelGrey     
            {    
                font-weight: bold;    
                color: darkgray;    
            }    
                
            .LabelBlue     
            {    
                font-weight: normal;    
                color: darkblue;    
            }    
                
            .ClassJoined     
            {    
                font-weight: normal;    
                font-size: 50px;    
                color: darkcyan;    
            }    
        </style>    
        <title></title>    
    </head>    
    
    <body>    
        <form id="form1" runat="server">    
            <div>    
                <asp:Label ID="lblMessage" runat="server" Font-Size="25px" Text="Hello, CSharpCorner Users" CssClass="LabelBlue"></asp:Label>    
                <br />    
                <asp:Button ID="btnChangeCSS" runat="server" Text="Change CSS Class" OnClick="btnChangeCSS_Click" />    
                <br />    
                <br />    
                <asp:Label ID="lblWithoutStyle" runat="server" Text="Text without any style" />    
                <br />    
                <asp:Button ID="btnChangeStyle" runat="server" Text="Change Style on Click" OnClick="btnChangeStyle_Click" />    
                <br />    
                <br />    
                <asp:Label ID="lblWithoutClass" runat="server" Text="Text without any default class" />    
                <br />    
                <asp:Button ID="btnWithoutClass" runat="server" Text="Class Attached on Click" OnClick="btnWithoutClass_Click" />    
            </div>    
        </form>    
    </body>    
    
    </html>

 

و CodeBehind آن به صورت زیر است:

using System;    
using System.Collections.Generic;    
using System.Linq;    
using System.Web;    
using System.Web.UI;    
using System.Web.UI.WebControls;    
    
public partial class ChangeCSSClass: System.Web.UI.Page     
{    
    protected void Page_Load(object sender, EventArgs e)     
    {    
    
    }    
    protected void btnChangeCSS_Click(object sender, EventArgs e)     
    {    
        lblMessage.CssClass = "LabelGrey";    
    }    
    protected void btnChangeStyle_Click(object sender, EventArgs e)     
    {    
        lblWithoutStyle.Text = "Text with Style";    
        lblWithoutStyle.Style.Add("font-size", "50px");    
    }    
    
    
    protected void btnWithoutClass_Click(object sender, EventArgs e)     
    {    
        lblWithoutClass.Attributes.Add("class", "ClassJoined");    
    }    
}

 

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید