Asp PPT (.NET )

Design view-Adding a button and a
textbox

Using the Validation control
• Using the RequiredFieldValidator Control
• In this example, we are adding two
RequiredFieldValidator controls on a Web
page for validating twoTextBox controls. The
RequiredFieldValidator controls ensure that
the two TextBox controls are not kept empty
by the user at runtime.

Default.aspx
• <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
• Inherits="_Default" %>
• <!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 runat="server">
• <title>RequiredFieldValidator Control Example</title>
• </head>
• <body>
• <form id="form1" runat="server">
• <div>
• <asp:Label ID="Label1" runat="server"
• Text="RequiredField Validator Control Example" Font-Bold="True"
• Font-Size="Medium" Font-Underline="True"></asp:Label>
• <br />
• <br />
• <asp:Label ID="Label2" runat="server" Font-Bold="True" Font-Size="Small"
• Text="User name:"></asp:Label>
•   
• <asp:TextBox ID="TextBox1" runat="server" Height="22px"
• Width="175px"></asp:TextBox>
• <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
• ControlToValidate="TextBox1" ErrorMessage="User name can not be
• empty"></asp:RequiredFieldValidator>
• <br />
• <br />
• erver"

Cont..
• <asp:Label ID="Label3" runat="server" Font-Bold="True" Font-Size="Small"
• Text="Password:"></asp:Label>
•     
• <asp:TextBox ID="TextBox2" runat="server" Height="22px" TextMode="Password"
• Width="175px"></asp:TextBox>
• <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="s
• ControlToValidate="TextBox2" ErrorMessage="Password can not be
• empty"></asp:RequiredFieldValidator>
• <br />
• <br />
• <br />
•              
•             
•     
• <asp:Button ID="Button1" runat="server" BackColor="Black" Font-Bold="True"
• Font-Size="Medium" ForeColor="White" Text="Submit" />
• </div>
• </form>
• </body>
• </html>

Using the RangeValidator Control: (Regular expression for date (^(19|20)dd([- /.])(0[1-9]|1[012])2(0[1-9]|[12][0-
9]|3[01])$)

Using the RegularExpressionValidator
Control
• In this example, we are taking two
RegularExpressionValidator controls on a Web
page for validating two TextBox controls. It
ensures that the data (URL and email address)
entered in both the TextBox controls is valid

Using the CompareValidator Control
• In this example, we take a CompareValidator
control on a Web page, which validates the
third TextBox control. It ensures that the data
(password) entered in the third TextBox
control is exactly the same as the data
• (password) entered in the second TextBox
control.

user interface and functionality.
Properties Description
Caption Gets or sets the caption for the calendar control.
CaptionAlign Gets or sets the alignment for the caption.
CellPadding Gets or sets the number of spaces between the data and the
Cell border.
CellSpacing Gets or sets the space between cells.
DayHeaderStyle Gets the style properties for the section that displays the
day of the week.
DayNameFormat Gets or sets format of days of the week.
DayStyle Gets the style properties for the days in the displayed month.
FirstDayOfWeek Gets or sets the day of week to display in the first column.

Cont..
NextMonthText Gets or sets the day of week to display in the first column.
NextPrevFormat Gets or sets the text for next month navigation control .The
default value is >
.
OtherMonthDayStyle Gets or sets the format of the next and previous month
navigation control.
PrevMonthText Gets the style properties for the days on the Calendar
control that are not in the displayed month.
SelectedDate Gets or sets the text for previous month navigation control.
The default value is <
.
ShowGridLines Gets or sets the value indicating whether the gridlines would
be shown.

Events
Events Description
SelectionChan
ged
It is raised when a day, a week or an entire month is selected.
DayRender t is raised when each data cell of the calendar control is
rendered.
VisibleMonth
Changed
It is raised when user changes a month.

Working with calendar controls

Default.aspx*
• <%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master"
AutoEventWireup="true" CodeBehind="Default.aspx.vb"
Inherits="rich_controls._Default" %>
• <asp:Content ID="Content1" runat="server" contentplaceholderid="MainContent">
• <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
• <div _designerregion="0">
• </div>
• <p>Todays date is:
• <asp:Label ID="lblday" runat="server"></asp:Label>
• </p>
• <p>Your Birday is:
• <asp:Label ID="lblbday" runat="server"></asp:Label>
• </p>
• </asp:Content>

Double click on the calendar
• Public Class _Default
• Inherits Page
• Protected Sub Page_Load(ByVal sender As Object, ByVal e As
EventArgs) Handles Me.Load
• End Sub
• Protected Sub Calendar1_SelectionChanged(sender As Object, e
As EventArgs) Handles Calendar1.SelectionChanged
• lblday.Text = Calendar1.TodaysDate.ToShortDateString()
• lblbday.Text = Calendar1.SelectedDate.ToShortDateString()
• End Sub
• End Class

Creating custom controls with user
Controls
• ASP.NET allows the users to create controls.
These user defined controls are categorized
into:
• User controls
• Custom controls

User Conrols
• User controls behaves like miniature ASP.NETpages or
web forms, which could be used by many other pages.
These are derived from the system.Web.UI.UserControl
class. These controls have the following characteristics
• They have an .ascx extension.
• They may not contain any <html>, <body>,or <form>
tags.
• They have a Control directive instead of a Page
directive.
• To understand the concept, let us create a simple user
control, which will work as footer for the web pages.
To create and use the user control, take the following
steps:

Steps
• Create a new web application.
• Right click on the project folder on the Solution Explorer and
choose Add New Item.
• Select Web User Control from the Add New Item dialog box
and name it u1.ascx. Initially, the footer.ascx contains only a
Control directive.
• <%@ Control Language="C#" AutoEventWireup="true"
• CodeBehind=“u1.ascx.cs"
Inherits="customcontroldemo.footer" %>

Register user control
• <%@ Page Title="Home Page" Language="VB"
MasterPageFile="~/Site.Master"
AutoEventWireup="true"
CodeBehind="Default.aspx.vb"
Inherits="WebApplication12._Default" %>
• <%@ Register Src="~/u1.ascx" TagName="u"
TagPrefix="ut" %>

Add a form to the project and use this control
• <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb"
Inherits="WebApplication12.WebForm1" %>
• <%@ Register Src="~/u1.ascx" TagName="u" TagPrefix="ut1" %>
• <!DOCTYPE html>
• <title></title>
• </head>
• <body>
• <div>
•
• </div>
• <ut1:u ID="footer1" runat="server" />
• </form>
• </body>
• </html>

Custom Control
• Custom controls are deployed as individual assemblies. They are compiled
into a Dynamic Link Library (DLL) and used as any other ASP.NET server
control. They could be created in either of the following way:
• By deriving a custom control from an existing control
• By composing a new custom control combing two or more existing
controls
• By deriving from the base control class
To understand the concept, let us create a custom control, which will simply
render a text message on the browser.
If you want to change the functionality of existing controls, such as a button
or label, you can directly derive the new class with these existing classes and
can change their default behavior.
In brief, the Control class provides the basic functionality by which you can
place it in the control tree for a Page class. The WebControl class adds the
functionality to the base Control class for displaying visual content on the
client computer. For example, you can use the WebControl class to control the
look and styles through properties like font, color, and height.

1. Create an empty ASP.NET web form
application

2. Right click on the web application and add ASP.NET server control:wc (name of the custom
control)
Imports System
Imports System.Collections.Generic
Imports System.Data
Imports System.ComponentModel
Imports System.Text
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
<DefaultProperty("Text"), ToolboxData("<{0}:wc runat=server></{0}:wc>")> _
Public Class wc Inherits WebControl
<Bindable(True), Category("Appearance"), DefaultValue(""), Localizable(True)> Property Text() As String
Get
Dim s As String = CStr(ViewState("Text"))
If s Is Nothing Then
Return String.Empty
Else
Return s
End If
End Get
Set(ByVal Value As String)
ViewState("Text") = Value
End Set
End Property
Protected Overrides Sub RenderContents(ByVal writer As HtmlTextWriter)
writer.Write("hello world from custom controls")
End Sub
End Class

Build the application
• Open a new or existing web form where you
can use the custom control.

Web form2.aspx file
• <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb"
Inherits="WebApplication15.WebForm2" %>
• <%@ Register assembly="WebApplication15" namespace="WebApplication15" tagprefix="cc1"
%>
• <!DOCTYPE html>
• <title></title>
• </head>
• <body>
• <div>
•
• <cc1:wc ID="wc1" runat="server" />
•
• </div>
• </form>
• </body>
• </html>

Asp PPT (.NET )

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Asp PPT (.NET )

Similar to Asp PPT (.NET ) (20)

More from Ankit Gupta

More from Ankit Gupta (20)

Recently uploaded

Recently uploaded (20)

Asp PPT (.NET )