Stone Coast Web Design's Weblog

Login User Control

Your DisplayName here! — Thu, 22 May 2008 15:29:08 GMT

This is a simple login user control used to demonstrate how to expose (get and set) the properties associated with the control. Here is a working demo.

** LoginUserControl.ascx **

<script language="VB" runat="server"> Public BackColor As String = "white" Public Property Login As String Get Return txtLogin.Text End Get Set txtLogin.Text
= Value End Set End Property Public Property Password As String Get Return txtPassword.Text End Get Set txtPassword.Text
= Value End Set End Property Public Property Status As String Get Return lblStatus.Text End Get Set lblStatus.Text
= Value End Set End Property </script>
<table style="background-color:<%=BackColor%>;font:
10pt verdana;border-width:1;border-style:solid;border-color:black;" cellspacing=15>
<tr> <td><b>Login: </b></td> <td><ASP:TextBox
id="txtLogin" runat="server"/></td>
</tr> <tr> <td><b>Password: </b></td> <td><ASP:TextBox
id="txtPassword" TextMode="Password" runat="server"/></td>
</tr> <tr> <td></td> <td><ASP:Button Text="Submit" runat="server"/></td>
</tr> <tr> <td></td> <td><asp:Label id="lblStatus" runat="server"/></td>
</tr> </table>

** LoginControl.aspx **

<%@ Register TagPrefix="MyUserControl" TagName="Login" Src="LoginUserControl.ascx" %>
<html> <script language="VB" runat="server"> Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs) If (Page.IsPostBack) Then MyLabel.Text
&= "The UserId is " & MyLogin.Login & "<br>" MyLabel.Text
&= "The Password is " & MyLogin.Password
& "<br>" MyLogin.Status = "Hello
world" End If End Sub </script>
<body style="font: 10pt verdana"> <h3>A
Login User Control</h3> <form runat="server">
<MyUserControl:Login id="MyLogin" UserId="John
Doe" Password="Secret" BackColor="beige" runat="server"/>
</form> <asp:Label id="MyLabel" runat="server"/>
</body> </html>

Exposing Events from a User Control

Your DisplayName here! — Thu, 22 May 2008 14:41:16 GMT

You can expose events from a user control. After you expose the event, you can handle the event in the page that contains the user control. Exposing events is useful when you need to pass information up to the containing page. In this example, we create a custom tab strip with a user control. When a user clicks a tab, the content is changed.

The TabStrip control exposes an event named TabClick. This event is raised in the dlstTabStrip_SelectedIndexChanged() event handler when a tab is clicked.

Here is a working demo.

** TabStripUserControl.ascx **

<%@ Control Language="VB" ClassName="TabStrip" %>
<%@ Import Namespace="System.Collections.Generic" %>
<script runat="server"> Public Event TabClick As EventHandler '''
<summary> ''' The index of the selected tab '''
</summary> Public ReadOnly Property SelectedIndex() As Integer Get Return dlstTabStrip.SelectedIndex End Get End Property '''
<summary> ''' Create the tabs '''
</summary> Private Sub Page_Load() If Not Page.IsPostBack Then '
Create the tabs Dim tabs As New List(Of String)()
tabs.Add("Products") tabs.Add("Services")
tabs.Add("About") ' Bind tabs
to the DataList dlstTabStrip.DataSource = tabs dlstTabStrip.DataBind() '
Select first tab dlstTabStrip.SelectedIndex = 0 End If End Sub '''
<summary> ''' This method executes when a user clicks
a tab ''' </summary> Protected Sub dlstTabStrip_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) RaiseEvent TabClick(Me,
EventArgs.Empty) End Sub </script>
<asp:DataList id="dlstTabStrip" RepeatDirection="Horizontal" OnSelectedIndexChanged="dlstTabStrip_SelectedIndexChanged" CssClass="tabs" ItemStyle-CssClass="tab" SelectedItemStyle-CssClass="selectedTab" Runat="server">
<ItemTemplate> <asp:LinkButton id="lnkTab" Text='<%#
Container.DataItem %>' CommandName="Select" Runat="server" />
</ItemTemplate> </asp:DataList>

** TabStrip.aspx **

<%@ Page Language="VB" %>
<%@ Register TagPrefix="user" TagName="TabStrip" Src="TabStripUserControl.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server"> Protected Sub TabStrip1_TabClick(ByVal sender As Object, ByVal e As EventArgs)
MultiView1.ActiveViewIndex = TabStrip1.SelectedIndex End Sub </script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<style type="text/css"> html { background-color:silver;
font:14px Georgia,Serif; } .tabs a { color:blue; text-decoration:none; font:14px Arial,Sans-Serif;
} .tab { background-color:#eeeeee; padding:5px; border:Solid 1px black; border-bottom:none;
} .selectedTab { background-color:white; padding:5px; border:Solid 1px black; border-bottom:none;
} .views { background-color:white; width:400px; border:Solid 1px black; padding:10px;
} </style> <title>Show TabStrip</title> </head> <body>
<form id="form1" runat="server">
<div> <user:TabStrip ID="TabStrip1" OnTabClick="TabStrip1_TabClick" Runat="Server" />
<div class="views">
<asp:MultiView id="MultiView1" ActiveViewIndex="0" Runat="server">
<asp:View ID="Products" runat="server">
<h1>Products</h1> We sell a variety of useful products... </asp:View>
<asp:View ID="Services" runat="server">
<h1>Services</h1> We offer a number of services... </asp:View> <asp:View
ID="About" runat="server">
<h1>About</h1> We were the first company to offer
products and services... </asp:View> </asp:MultiView>
</div> </div> </form> </body> </html>

Check/Uncheck All Checkboxes in a GridView

Your DisplayName here! — Wed, 14 May 2008 13:22:37 GMT

Having the ability to check or uncheck all of the checkboxes which appear inside of a GridView is a frequent requirement. There are several javascript libraries which will handle this on the client-side which is usually the better way to go, but this can also be done server-side and along with an AJAX UpdatePanel can be pretty elegant. Here is a working demo.

<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server"> Protected Sub MasterCheck_Click(ByVal
sender As Object, ByVal e As CommandEventArgs) 'Enumerate each GridViewRow
For Each gvr As GridViewRow In GridView1.Rows 'Programmatically access the
CheckBox from the TemplateField Dim cb As CheckBox = CType(gvr.FindControl("Checkbox1"),
CheckBox) Select Case e.CommandName Case "Check" 'Check
all of the checkboxes cb.Checked = True 'Change the CommandName, CommandArgument
and Text of the button btnMasterCheck.CommandName = "Uncheck" btnMasterCheck.CommandArgument
= "Uncheck" btnMasterCheck.Text = "Uncheck
All" Case "Uncheck" 'Uncheck
all of the checkboxes cb.Checked = False 'Change the CommandName, CommandArgument
and Text of the button btnMasterCheck.CommandName = "Check" btnMasterCheck.CommandArgument
= "Check" btnMasterCheck.Text = "Check
All" Case Else End Select Next End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"> <title>Check/Uncheck
All Checkboxes in a GridView</title> </head>
<body> <form id="form1" runat="server">
<div> <asp:SqlDataSource id="srcMovies" ConnectionString='<%$
ConnectionStrings:MyDatabase %>' SelectCommand="SELECT
Title, Director FROM Movies ORDER BY Title" Runat="server" />
<asp:ScriptManager id="sm1" runat="server" />
<asp:UpdatePanel id="UpdatePanel1" Runat="server">
<ContentTemplate> <asp:GridView ID="GridView1" runat="server" DataSourceID="srcMovies" AutoGenerateColumns="False">
<Columns> <asp:TemplateField HeaderText="">
<ItemTemplate> <asp:Checkbox id="Checkbox1" runat="server" />
</ItemTemplate> </asp:TemplateField> <asp:BoundField HeaderText="Title" DataField="Title" />
<asp:BoundField HeaderText="Director" DataField="Director" />
</Columns> </asp:GridView><br /> <asp:Button ID="btnMasterCheck" runat="server" CommandName="Check" CommandArgument="Check" OnCommand="MasterCheck_Click" Text="Check
All" /> </ContentTemplate> </asp:UpdatePanel> </div>
</form> </body> </html>

User Controls

Your DisplayName here! — Mon, 12 May 2008 19:01:26 GMT

User controls are somewhat outdated already with the introduction of partial classes in ASP.NET 2.0 but I still find them useful. I think of them similar to the include pages in classic ASP. This is a simple example of how to get the text value from a user control on the parent page.

<%@ Page Language="VB" %>
<%@ Register Src="header.ascx" TagName="header" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server"> Sub Page_Load(ByVal
Src As Object, ByVal E As EventArgs) Dim CompanyName As TextBox = CType(Page.FindControl("Header1$txtCompanyName"),
TextBox) lblCompanyName.Text = CompanyName.Text End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"> <title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head> <body> <form id="form1" runat="server">
<div> <!--This is my user control page header-->
<uc1:header id="Header1" runat="server"></uc1:header>
<br /> <br /> <asp:Label ID="lblCompanyName" runat="server" Text="Label"
/> <asp:TextBox ID="TextBox1" runat="server" />
</div> </form> </body> </html>

This is an example of how to set the text value from inside the user control on the parent page.

<%@ Control Language="VB" ClassName="header" EnableViewState="false" %>
<script runat="server"> Private Sub Page_Load(ByVal Src As Object, ByVal E As EventArgs) If Not Page.IsPostBack Then Dim TextBox1 As Textbox
=CType(Me.Parent.FindControl("TextBox1"),TextBox)
TextBox1.Text = "Eat your veggies" End If End Sub

</script> <table width="100%" border="0" cellpadding="3" cellspacing="0">
<tr> <td>Company: <asp:Textbox ID="txtCompanyName" runat="server" CssClass="textbox" Text="Company
Name" ToolTip="Enter a company name" /> 


<asp:Button ID="btnCompanySearch" runat="server" Text="go" CssClass="buttons" OnClick="QuickSearch_Companies_Click" /></td>
</tr> </table>

A Styled GridView

Your DisplayName here! — Wed, 07 May 2008 17:43:11 GMT

I've been following Matt Berseth's .NET Developer's Blog and he has some great stuff on here. The example below is from his post on Building a VS2008 Styled Grid with the GridView Control. I've made simpler variation of his here.

First the style sheet where all of the real magic happens:

body 
{
    background-color: Aliceblue;
    font-family:Tahoma;
    font-size: 12px;
}

.grid 
{ 
    width:90%; 
    font-family:Tahoma; 
    display: block;
    margin-left: auto;
    margin-right: auto      
}

.director
{
    color: Green;
}

.grid .datatable
{
    width:100%;
    color:#666;
}        
.grid .datatable TH
{
    font-size:12px;
    font-weight:bold;
    letter-spacing:0px;
    text-align:left;
    padding:2px 4px;
    color:#333333;
    border-bottom:solid 2px #bbd9ee;
}
.grid .datatable TH A
{ 
    text-decoration:none;
    padding-right:18px; 
    color:#0066cc;
}

.grid .datatable .row TD
{
    font-size:11px;
    text-align:left;
    padding:6px 4px;
    border-bottom:solid 1px #bbd9ee;
}      
.grid .datatable .row:hover
{
    background-color:#fffacd;
    color:#000;
}
.grid .datatable .row TD.first { padding-left:10px; }
.grid .datatable TH.first { padding-left:10px; }
.grid .datatable .row:hover .first
{
    background-repeat:no-repeat;   
    background-image:url(../img/bullet.gif);
}

Then the .aspx page itself

<form id="form1" runat="server">
<div> <asp:SqlDataSource id="srcMovies" ConnectionString='<%$
ConnectionStrings:MyDatabase %>' SelectCommand="SELECT
Title, Director FROM Movies ORDER BY Title" Runat="server" />
<div class="grid">
<asp:GridView ID="GridView1" runat="server" BorderStyle="None" DataSourceID="srcMovies" HorizontalAlign="Center" CssClass="datatable" AutoGenerateColumns="false" BorderWidth="1px" BackColor="White" GridLines="Horizontal">
<RowStyle CssClass="row" /> <Columns>
<asp:BoundField DataField="Title" HeaderText="Title" ItemStyle-CssClass="first" />
<asp:BoundField DataField="Director" HeaderText="Director"
ItemStyle-CssClass="director" /> </Columns>
</asp:GridView> </div> </div> </form>

Make your own AJAX "loading" icons

Your DisplayName here! — Wed, 07 May 2008 17:41:45 GMT

http://www.ajaxload.info/

Getting column information using T-SQL

Your DisplayName here! — Wed, 30 Apr 2008 18:25:42 GMT



SELECT ORDINAL_POSITION , COLUMN_NAME , DATA_TYPE , CHARACTER_MAXIMUM_LENGTH , IS_NULLABLE
, COLUMN_DEFAULT FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_NAME = 'MyAwesomeTable' ORDER
BY ORDINAL_POSITION ASC;

Another method is

sp_help 'tablename'

Using the Timer Control With an UpdatePanel - Part 2.

Your DisplayName here! — Tue, 29 Apr 2008 16:49:27 GMT

In the previous example, Using a Timer Control With an Update Panel, we just refreshed a panel from data in a list. In this more practical example, we pull the data from a live database which refreshes an UpdatePanel and an AJAX script manager. Here is a working demo.

<%@ Page Language="vb" %> <!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head
id="Head1" runat="server"> <title>Timer
Movies</title> <style type="text/css"> .message
{ margin-left: 20px; font-style:italic; } </style> </head> <body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sm1" runat="server" />
<asp:Timer ID="Timer1" Interval="5000" runat="server" />
<asp:UpdatePanel ID="up1" runat="server">
<Triggers> <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers> <ContentTemplate> Last Refresh <%= DateTime.Now.ToString("T")
%><hr /> <asp:ListView id="lstMovies" DataSourceID="srcMovies" Runat="server">
<LayoutTemplate> <div id="itemPlaceholder" runat="server">
</div> </LayoutTemplate> <ItemTemplate> <div> Movie Title:
<%# Eval("Title") %><div class="message">
Director: <%# Eval("Director") %></div> </div>
</ItemTemplate> </asp:ListView> </ContentTemplate> </asp:UpdatePanel>
<asp:ObjectDataSource id="srcMovies" TypeName="Message" SelectMethod="Select" Runat="server" />
</form> </body> </html>

*** Message.vb ***

Imports System Imports System.Collections Imports System.Data Imports System.Data.SqlClient Imports System.Web.Configuration Public Class Message Private _Title As String Public Property Title() As String Get Return _Title End Get Set(ByVal value As String)
_Title = value End Set End Property Private _Director As String Public Property Director() As String Get Return _Director End Get Set(ByVal value As String)
_Director = value End Set End Property Public Shared Function [Select]() As ArrayList Dim results As New ArrayList() Dim conString As String =
WebConfigurationManager.ConnectionStrings("MyDatabase").ConnectionString Dim commandText As String = "SELECT
Title, Director FROM Movies ORDER BY Id DESC" Dim con As New SqlConnection(conString) Dim cmd As New SqlCommand(commandText,
con) Using con con.Open() Dim reader As SqlDataReader
= cmd.ExecuteReader() While reader.Read() results.Add(New Message(reader)) End While End Using Return results End Function Public Sub New(ByVal reader As SqlDataReader)
Title = CType(reader("Title"), String)
Director = CType(reader("Director"), String) End Sub End Class

Using the Timer Control With an UpdatePanel

Your DisplayName here! — Tue, 29 Apr 2008 14:55:25 GMT

This is an interesting example on how to use the Timer control inside of an UpdatePanel to refresh part of a page with no user intervention. Here is a working demo.

<%@ Page Language="VB" %>
<%@ Import Namespace="System.Collections.Generic" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server"> protected sub Page_Load(sender as object,
e as EventArgs) dim quotes as new List(of string)()
quotes.Add("A fool and his money are soon parted")
quotes.Add("A penny saved is a penny earned") quotes.Add("An
apple a day keeps the doctor away") dim rnd as new Random()
lblQuote.Text = quotes(rnd.Next(quotes.Count)) end sub </script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Timer Quote</title> </head> <body> <form id="form1" runat="server">
<div> <asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Timer ID="Timer1" Interval="2000" runat="server" />
Page Time: <%= DateTime.Now.ToString("T") %>
<fieldset> <legend>Quote</legend> <asp:UpdatePanel ID="up1" runat="server">
<Triggers> <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers> <ContentTemplate> <asp:Label ID="lblQuote" runat="server" />
</ContentTemplate> </asp:UpdatePanel> </fieldset> </div> </form>
</body> </html>