Presentation is loading. Please wait.

Presentation is loading. Please wait.

AJAX Asynchronous JavaScript and XML: –JavaScript, Document Object Model, Cascade Style Sheet, XML, server-side script such as.Net, etc. Partial refresh:

Similar presentations


Presentation on theme: "AJAX Asynchronous JavaScript and XML: –JavaScript, Document Object Model, Cascade Style Sheet, XML, server-side script such as.Net, etc. Partial refresh:"— Presentation transcript:

1 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

2

3 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.

4 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.

5 Creating Page with AJAX 1. Add a ScriptManager control 2. Add UpdatePanel control 3. Add ASP.Net controls to the UpdatePanel

6 Postback or Asynchronous PostBack Page.IsPostBack ScriptManager1.IsInAsyncPostBack

7 Example 1: Two Counters

8 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

9 Example 2: Retrieve Customer Name

10 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

11 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

12 Cookies

13 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)

14 Cookie’s Properties System.Web/HttpCookie –Name –Value –Expires To write a cookie: –Response.Cookies.Add(cookieObj)

15 Creating Cookies dim 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

16 Reading Cookies Dim custid as string Dim custName as string custid=request.cookies("cid").value custname=request.cookies("cname").value

17 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(" Welcome:" & objDataReader("CustName") & " ") Else Response.Write(" We don't have your record ") End If objConn.Close() Demo:ASPNET/CookieGreeting.aspx

18 Sending Email From an ASP.Net Page

19 Send a confirmation message. Send a document to a user as attachment. Forgot password?

20 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.

21 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

22 Using MailMessage Class to Set Email Properties Email properties: –Attachments –Bcc –Body –BodyFormat Text or Html –Cc –From –Headers –Subject –To

23 MailMessage Class Example with Attachment Dim 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)

24 Demo: ForgotPassword Dim 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" & " ") 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(" Your password is sent to your email account ") End If

25 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!”)

26 UpLoading Files

27 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.

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

29 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

30 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

31 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.FileNam e.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

32 Picture File Access: –OLE field –Picture file name: Relative reference Absolute reference Creating links to picture files Insert pictures in web page –IMG tag

33 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 (" " & objDataReader("PicDescription") & " ") loop objConn.close() end sub

34 Insert Pictures with IMG Tags sub Page_Load() response.write(" Available Pictures ") 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 (" ") loop objConn.close() end sub Note: src=‘../images/

35 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.

36 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.

37 Repeater Example ' width='198' height='151' alt=' ' /> <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="c:\Salesdb.mdb" SelectCommand="SELECT [PicID], [PicDescription], [PicPath] FROM [PictureTable]">

38 Using DataBinder to Bind the Control in a Template System.Web.UI –DataBinder Methods –Eval(object, string): Evaluates data-binding expressions at run time. – Note: The databinding 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.

39 Calendar Properties: –SelectionMode: Day, Week, Month –SelectedDate –SelectedDates Event: –SelectionChanged

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

41 Advertisement File Example../Demo1/Images/cake.jpg default.aspx Great Cake 1 TestAd../Demo1/Images/earth2.jpg default.aspx Beautiful Earth 1 TestAd Note:../ads.xml

42 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.

43 Validation Controls CompareValidator: (Collating sequence comparison) –Properties: ControlToValidate ErrorMessage Operator: Greater, LessThan, … ValueToCompare RangeValidator: –MaximumValue, MinimumValue RequiredFieldValidator

44 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

45 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


Download ppt "AJAX Asynchronous JavaScript and XML: –JavaScript, Document Object Model, Cascade Style Sheet, XML, server-side script such as.Net, etc. Partial refresh:"

Similar presentations


Ads by Google