How to add styles dynamically in ASP.NET page

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.
  • 3985

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

  ar1.gif

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">&nbsp;
           <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.vb

Imports 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

You can also set border style of the output panel dynamically or with the help of property window.

ar2.gif

I hope you will enjoy this.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.