AJAX

• Asynchronous JavaScript and XML:– JavaScript, Document Object Model, Cascade Style

Sheet, XML, server-side script such as .Net, etc.

• Partial refresh: It lets you update part of a web page without having to reload the entire page.

• RIA: Rich Internet Application– Quick response time, interactive page

How AJAX Updates a Page

• When an event happens, JavaScript (AJAX engine) prepares a request and sends it to the web sever.

• The server receives the request and processes it.• The server prepares a response and sends it back to

the browser.• The JavaScript parses the response to update the

page.

ASP.Net AJAX Server Controls

• ScriptManager: Enables the use of other AJAX controls.

• UpdatePanel: A control that encloses standard ASP.net controls to be updated asynchronously (asynchronous postback)

• Timer control: Trigger partial refresh at a set time interval.

Creating Page with AJAX

• 1. Add a ScriptManager control

• 2. Add UpdatePanel control

• 3. Add ASP.Net controls to the UpdatePanel

Postback or Asynchronous PostBack

• Page.IsPostBack

• ScriptManager1.IsInAsyncPostBack

Example 1: Two Counters

Dim PostbackCounter, AsyncCounter As Integer Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not Page.IsPostBack Then Session("PCounter") = PostbackCounter Session("Acounter") = AsyncCounter Else PostbackCounter = Session("PCounter") End If If ScriptManager1.IsInAsyncPostBack Then AsyncCounter = Session("Acounter") End If End Sub Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click PostbackCounter += 1 TextBox1.Text = PostbackCounter.ToString Session("PCounter") = PostbackCounter End Sub

Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click AsyncCounter += 1 TextBox2.Text = AsyncCounter.ToString Session("Acounter") = AsyncCounter End Sub

Example 2: Retrieve Customer Name

Page.IsPostBack and ScriptManager1.IsInAsyncPostBack

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not Page.IsPostBack Then

TextBox3.Text = "First time" Else TextBox3.Text = "PostBack" End If If ScriptManager1.IsInAsyncPostBack Then TextBox2.Text = " IsAsyncPostBack" Else TextBox2.Text = " Not AsyncPostBack" End If End Sub

Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click Dim strConn As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source = c:\salesDB.mdb" Dim objConn As New OleDbConnection(strConn) Dim strSQL As String = "select * from customer where cid='" & TextBox1.Text & "';" Dim objComm As New OleDbCommand(strSQL, objConn) objConn.Open() Dim objDataReader As OleDbDataReader objDataReader = objComm.ExecuteReader() objDataReader.Read() TextBox2.Text = objDataReader("cname") objDataReader.Close() End Sub

Cookies

Data in Cookies

• Which web site set the cookie• Expiration date

– DateTime data type– TimeSpan data type

• One or more pieces of data• Keys: A collection of cookie’s names• Define a new cookie:

– Dim CookieCID as new HttpCookie(“cid”)

• Add to: Response.Cookies– Response.cookies.add(cookieCID)

Cookie’s Properties

• System.Web/HttpCookie– Name– Value– Expires

• To write a cookie:– Response.Cookies.Add(cookieObj)

Creating Cookiesdim cookieCID as New HttpCookie("cid")

dim cookieCNAME as new HttpCookie("cname")

dim dt as dateTime=dateTime.now()

dim ts as new TimeSpan(30,0,0,0)

cookieCID.value=textbox1.text

cookieCname.value=textbox2.text

cookieCID.expires=dt.add(ts)

cookieCname.expires=dt.add(ts)

response.cookies.add(cookieCID)

response.cookies.add(cookieCNAME)

Note: The name(or key)of cookieCID is “cid”

FireFox: Tools/Options/Privacy

Reading CookiesDim custid as string

Dim custName as string

custid=request.cookies("cid").value

custname=request.cookies("cname").value

Using Cookie with DataReader

Dim strConn As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source = c:\salesDB.mdb" Dim objConn As New OleDbConnection(strConn) Dim strSQL As String Dim objDataReader As OleDbDataReader Dim cid As String cid = Request.Cookies("CID").Value strSQL = "select * from webcustomer where CustID= '" & cid & "'" Dim objComm As New OleDbCommand(strSQL, objConn) objConn.Open() objDataReader = objComm.ExecuteReader() If objDataReader.Read() = True Then Session("cname") = objDataReader("CustName") Response.Write("<hr>Welcome:" & objDataReader("CustName") & "<hr>") Else Response.Write("<hr>We don't have your record <hr>") End If objConn.Close()

Demo:ASPNET/CookieGreeting.aspx

Sending Email From an ASP.Net Page

• Send a confirmation message.

• Send a document to a user as attachment.

• Forgot password?

Simple Mail Transport Protocol (SMTP)

• Email messages are text files.• InetPub\MailRoot

– PickUp directory: • SMTP monitors this directory and sends any messages found

in this directory.

– Drop:• Incoming messages received by SMTP are written to this

directory.

– BadMail:• If an email cannot be delivered or returned to the sender it is

moved to this directory.

ASP.Net Email Classes

• SmtpClient class– System.Net.Mail

• Define a SmtpClient object– Dim mailClient As New SmtpClient("dchao100L")

• Method:– MailClient.Send(From, To, Subject, messageText)

• MailClient.Send(TextBox1.Text, TextBox2.Text, TextBox3.Text, TextBox4.Text)

– MailClient.Send(System.Net.Mail.MailMessage)

• Demo:– Import system.net.mail

Using MailMessage Class to Set Email Properties

• Email properties:– Attachments– Bcc– Body– BodyFormat

• Text or Html

– Cc– From– Headers– Subject– To

MailMessage Class Example with AttachmentDim mailClient As New SmtpClient("dchao100L")Dim mailMsg As New MailMessage Dim FromAddr As New MailAddress(TextBox1.Text) Dim ToAddr As New MailAddress(TextBox2.Text) mailMsg.From = FromAddr mailMsg.To.Add(ToAddr) mailMsg.Subject = TextBox3.Text mailMsg.Body = TextBox4.Text Dim attach As New Attachment("c:\welcome.htm") mailMsg.Attachments.Add(attach) mailClient.Send(mailMsg)

Demo: ForgotPasswordDim strConn As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source = c:\salesDB.mdb" Dim objConn As New OleDbConnection(strConn) Dim strSQL, emailAddress As String emailAddress = TextBox1.Text strSQL = "select * from users where email= '" & emailAddress & "'" Dim objComm As New OleDbCommand(strSQL, objConn) objConn.Open() Dim objDataReader As OleDbDataReader objDataReader = objComm.ExecuteReader() If Not objDataReader.Read() Then Response.Write("We don't have your record" & "</br>") Else Dim mailClient As New SmtpClient("dchao100L") Dim objMsg As New MailMessage() Dim FromAddr As New MailAddress("webmaster@dchao100L") objMsg.From = FromAddr Dim ToAddr As New MailAddress(emailAddress) objMsg.To.Add(ToAddr) objMsg.Subject = "Your password" objMsg.Body = "Your password is: " & objDataReader("password") mailClient.Send(objMsg) Response.Write("<hr>Your password is sent to your email account<hr>") End If

Sending email to a new customer Dim strConn As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source = c:\salesDB.mdb" Dim objConn As New OleDbConnection(strConn) Dim strSQL As String strSQL = "insert into webCustomer values ('" & TextBox1.Text & "','" & TextBox2.Text & "','" & TextBox3.Text & "','" & TextBox4.Text & "','" & TextBox5.Text & "')" Dim objComm As New OleDbCommand(strSQL, objConn) objComm.ExecuteNonQuery() Dim mailClient As New SmtpClient("dchao100L")MailClient.Send(“webmaster@dchao100L”, textBox5.text, “welcome new customer”,”welcome to join us!”)

UpLoading Files

FileUpload Control

• Properties:– PostedFile:

• This is a System.Web.HttpPostedFile class

• FileName: This name contains the path of the posted file.’

– Contentlength

– ContentType

• Method:– SaveAs – this method save the posted file on server.

Save Uploaded FilePrivate Sub Button1_Click(ByVal sender As System.Object, ByVal e As Dim FileName As StringDim strFilePath As String = "c:\inetpub\wwwroot\images\"FileName = FileUpload1.PostedFile.FileName.Substring(FileUpload1.PostedFile.FileName.LastIndexOf("\") + 1) strFilePath = strFilePath & FileName FileUpload1.SaveAs(strFilePath) 'FileUpload1.PostedFile.SaveAs(strFilePath) Response.Write("File: " & FileName & " is saved on server") End Sub

Insurance Claim Example

• Uploading claim pictures for insurance cases.• Each case may have many pictures.• Database:

– CaseTable: CaseID, CaseDate, Agent– CasePics: CaseID, PicPathName

• Each picture is named: CaseID + PictureName and saved in folder: Images

• Create a web page with a dropdown list of CaseID, a File Field control to choose file, and a upload button. The uploaded picture will be saved in the Images folder and a record will be entered in CasePics file.

• Demo: Insurance/UploadPic.aspx

Code Example Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not Page.IsPostBack Then Dim strConn As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source = c:\InsurancePic.mdb" Dim objConn As New OleDbConnection(strConn) Dim strSQL As String = "select * from CaseTable;" Dim objComm As New OleDbCommand(strSQL, objConn) objConn.Open() Dim objDataReader As OleDbDataReader objDataReader = objComm.ExecuteReader() Do While objDataReader.Read() = True ListBox1.Items.Add(objDataReader("caseID")) Loop objConn.Close() End If End Sub

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click Dim CaseID As String Dim FileName As String Dim strFilePath As String = "c:\inetpub\wwwroot\images\" FileName = FileUpload1.PostedFile.FileName.Substring(FileUpload1.PostedFile.FileName.LastIndexOf("\") + 1) CaseID = ListBox1.SelectedItem.Text FileName = CaseID & FileName strFilePath = strFilePath & FileName FileUpload1.PostedFile.SaveAs(strFilePath) Dim strConn As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source = c:\InsurancePic.mdb" Dim objConn As New OleDbConnection(strConn) Dim strSQL As String = "Insert Into CasePics Values ('" & CaseID & "','" & strFilePath & "')" Dim objComm As New OleDbCommand(strSQL, objConn) objConn.Open() objComm.ExecuteNonQuery() End Sub

Picture File

• Access:– OLE field– Picture file name:

• Relative reference• Absolute reference

• Creating links to picture files• Insert pictures in web page

– IMG tag

Creating Links to Pictures(aspnetprodlistpic.aspx)

sub Page_Load()

dim strConn as string ="Provider=Microsoft.Jet.OLEDB.4.0;Data Source = c:\salesDB.mdb"

dim objConn as new OledbConnection(strConn)

dim strSQL as string = "select PicID, PicDescription, PicPath from PictureTable;"

dim objComm as new OledbCommand(strSQL,objConn)

objConn.open()

dim objDataReader as oledbDataReader

objDataReader=objComm.executeReader()

do while objDataReader.Read=True

response.write ("<p><a href='http://localhost/images/" & objDataReader("PicPath") & "'>" & objDataReader("PicDescription") & "</a></p><br>")

loop

objConn.close()

end sub

Insert Pictures with IMG Tagssub Page_Load()

response.write("<p align='center'><font size='5'><b>Available Pictures</b></font></p>")

dim strConn as string ="Provider=Microsoft.Jet.OLEDB.4.0;Data Source = c:\salesDB.mdb"

dim objConn as new OledbConnection(strConn)

dim strSQL as string = "select PicID, PicDescription, PicPath from PictureTable;"

dim objComm as new OledbCommand(strSQL,objConn)

objConn.open()

dim objDataReader as oledbDataReader

objDataReader=objComm.executeReader()

do while objDataReader.Read=True

response.write ("<p><img border='0' src='http://localhost/images/" & objDataReader("PicPath") & "' width='198' height='151'></p>")

loop

objConn.close()

end sub

Note: src=‘../images/

Repeater Control

• Replace the Do Loop• To use a Repeater control:

– 1. Add the Repeater to the web page– 2. Add a data source to the Repeater– 3. Switch to Source view to add the HTML tag

of the control you want to repeat by adding a ItemTemplate.

– 4. Use the DataBinder to bind the control to the data source.

Repeater Templates

• ItemTemplate - Use this template for elements that are rendered once per row of data.

• AlternatingItemTemplate - Use this template for elements that are rendered every other row of data. This allows you to alternate background colors, for example.

• HeaderTemplate - Use this template for elements that you want to render once before your ItemTemplate section.

• FooterTemplate - Use this template for elements that you want to render once after your ItemTemplate section.

• SeperatorTemplate - Use this template for elements to render between each row, such as line breaks.

Repeater Example<asp:Repeater ID="Repeater1" runat="server" DataSourceID="AccessDataSource1"> <ItemTemplate> <img border='0' src='../Demo1/Images/<%# DataBinder.Eval(Container.DataItem, "PicPath")%>' width='198' height='151' alt='<%# DataBinder.Eval(Container.DataItem, "PicDescription") %>' />

</ItemTemplate> <SeparatorTemplate> <br /> </SeparatorTemplate></asp:Repeater> <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="c:\Salesdb.mdb" SelectCommand="SELECT [PicID], [PicDescription], [PicPath] FROM [PictureTable]"> </asp:AccessDataSource>

Using DataBinder to Bind the Control in a Template

• System.Web.UI– DataBinder

• Methods– Eval(object, string): Evaluates data-binding expressions at run time.– <%# DataBinder.Eval(Container.DataItem, "PicDescription") %>

• Note: The databinding expression <%# some expression %> is evaluated in the language of the page.  The actual type of DataItem is determined by the type of the datasource. For example, if the datasource is a Dataview, the type of DataItem is DataRowView.  If the type of the datasource is an array of strings, the type of DataItem is String.  If the datasource is a collection of strongly-typed objects (for example "Employees" objects), the type of DataItem is Employees.

Calendar

• Properties:– SelectionMode: Day, Week, Month– SelectedDate– SelectedDates

• Event:– SelectionChanged

AdRotator

• AdRotator displays images in an advertisement file which is an XML file with properties of images to display.

Advertisement File Example

<?xml version="1.0" encoding="utf-8" ?>

<Advertisements><Ad><ImageUrl>../Demo1/Images/cake.jpg</ImageUrl>

<NavigateUrl>default.aspx</NavigateUrl><AlternateText>Great Cake</AlternateText><Impressions>1</Impressions><Keyword>TestAd</Keyword>

</Ad><Ad><ImageUrl>../Demo1/Images/earth2.jpg</ImageUrl>

<NavigateUrl>default.aspx</NavigateUrl><AlternateText>Beautiful Earth</AlternateText><Impressions>1</Impressions><Keyword>TestAd</Keyword>

</Ad>Note: ../ads.xml

Advertisement Properties

• ImageURL• NavigateURL: The page you go to when you click

an image.• AlternateText: Text displayed for browsers do not

support image.• Keyword: Categorize advertisements, can be used

with AdRotator’s KeyWordFilter property.• Impressions: The relative frequency a particular

advertisement should be shown.

Validation Controls

• CompareValidator: (Collating sequence comparison)– Properties:

• ControlToValidate• ErrorMessage• Operator: Greater, LessThan, …• ValueToCompare

• RangeValidator:– MaximumValue, MinimumValue

• RequiredFieldValidator

• CustomValidator: Checks the user’s data entry using validation logic from a customer method you write processed on the server or the client. Use the ClientValidationFunction property to call a client-site validation script. For server-site validation, this control raises an ServerValidate event where you can write an event procedure to validate data. The OnServerValidate event is triggered by: Page.IsValid statement

Demo: CustomValidator

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

If Page.IsValid Then ‘Note: This statement trigger the ServerValidate event

Response.Write("Valid")

Else

Response.Write("not valid")

End If

End Sub

Private Sub CustomValidator1_ServerValidate(ByVal source As System.Object, ByVal args As System.Web.UI.WebControls.ServerValidateEventArgs) Handles CustomValidator1.ServerValidate

If Not IsNumeric(TextBox1.Text) Then

args.IsValid = False

Else

args.IsValid = True

End If

End Sub