ARTICLE

How to add styles dynamically in ASP.NET page

Posted by Sapna in Articles | ASP.NET using VB.NET on January 10, 2011

Tags: Add style dynamically in ASP.NET, ASP.NET, Dynamically add image in ASP.NET

In this article, I will create a ASP.NET page and then dynamically add image and styles like background color, font size and a greeting note.

Tweet
1197
0

Reader Level: Beginner

In this article, I will create a ASP.NET page and then dynamically add image and styles like background color, font size and a greeting note to it.

ASP.NET Web Page

As you can see, it is a very basic page with three textboxes for background color, font size and greeting text. You can set the background color from given options, appropriate font size and a greeting text. The checkbox is for inserting the picture in panel means the picture is displayed only when the checkbox is set true. Here is the page code,

Code: Default.aspx

<%@ Page language="vb" Inherits="WelcomeNote" CodeFile="Default.aspx.vb" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome Note</title>
</head>
<body>
    <form id="Form1" runat="server">
     <div>
     <div style="font-family: Verdana" >Select background color:<br />
          <asp:dropdownlist ID="lstBackColor"
           runat="server"
           Height="22px"
           Width="194px"></asp:dropdownlist>
          <br /><br />

          Specify font size:<br />
        <asp:textbox ID="txtFontSize" runat="server"></asp:textbox>
          <br /><br />
          <asp:checkbox ID="chkPicture"
           runat="server"
          <br /><br />

           Enter the greeting text below:<br />
           <asp:textbox ID="txtGreeting"
             runat="server"
             Height="48px"
             Width="240px"
             TextMode="MultiLine"></asp:textbox>
           <br /><br />
           <asp:button ID="cmdUpdate"
              runat="server"
              Height="24px"
              Width="71px"
              Text="Update"
              onclick="cmdUpdate_Click"></asp:button>
     </div>
     <asp:panel ID="pnlCard" runat="server" Height="148px" Width="297px"
         HorizontalAlign="Center" BorderStyle="Solid"> 
         <asp:Label ID="lblGreeting"
             runat="server"
             Height="16px"
             Width="256px" Font-Names="Verdana">
           </asp:Label>
          <br />
         <asp:Image ID="imgDefault"
             runat="server"
             Height="94px"
             Width="233px"
             Visible="False" ImageUrl="image.jpg"
              BackColor="White"></asp:Image>
      </asp:panel>
      </div>
    </form>
</body>
</html>

Code: Default.aspx.vbImports System
Imports System.Collections
Imports System.ComponentModel
Imports System.Data
Imports System.Drawing
Imports System.Web
Imports System.Web.SessionState
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.HtmlControls
Partial Public Class GreetingCardMaker
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
    If Me.IsPostBack = False Then
      lstBackColor.Items.Add("Red")
      lstBackColor.Items.Add("White")
      lstBackColor.Items.Add("Pink")
      lstBackColor.Items.Add("LightGreen")
      lstBackColor.Items.Add("Yellow")
    lstBackColor.Items.Add("LightBlue")
      imgDefault.ImageUrl = "image.jpg"
    End If
End Sub
Protected Sub cmdUpdate_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    pnlCard.BackColor = Color.FromName(lstBackColor.SelectedItem.Text)
    Try
      If Int32.Parse(txtFontSize.Text) > 0 Then
      End If
Catch
    End Try
      If chkPicture.Checked = True Then
        imgDefault.Visible = True
      Else
        imgDefault.Visible = False
      End If
        lblGreeting.Text = txtGreeting.Text
   End Sub
End Class