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
45
Embed
AJAX Asynchronous JavaScript and XML: –JavaScript, Document Object Model, Cascade Style Sheet, XML, server-side script such as.Net, etc. Partial refresh:
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
• 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)
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:
• 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;"
– 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.
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.
• 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