1 / 50

Introduction to ASP.Net

Introduction to ASP.Net. ISYS 5 12. ASP.NET. ASP.NET is a server-side technology for creating dynamic web pages. ASP.NET allows you to use a selection of full programming languages. . ASP.NET in the .NET Framework. 1. The client requests a web page. 2. The web server locates the page.

ebony
Download Presentation

Introduction to ASP.Net

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to ASP.Net ISYS 512

  2. ASP.NET • ASP.NET is a server-side technology for creating dynamic web pages. • ASP.NET allows you to use a selection of full programming languages.

  3. ASP.NET in the .NET Framework • 1. The client requests a web page. • 2. The web server locates the page. • 3. If the page is an ASP.NET page, it is sent to the Common Language Runtime for compilation and execution. • 4. The HTML produced by the CLR is returned to the browser.

  4. Benefits of Server-Side Technology • Browser compatibility: • Every browser reads HTML. • Protection of source code. • Controls are server-side objects with properties, methods and events.

  5. Web Server • Web Server: • VS Built-in Web Server • VS 08 uses the built-in web server for debugging. • Default home page • Default.aspx, default.asp, default.htm • ASP.Net project directory • Note: Using the Built-In web server, a web project can be created in any folders.

  6. Web Project • File/New Website/ • ASP.Net Empty Website • ASP.Net Website • Site.Master • Add a Web form: • Project/Add new item/web form • A web form contains: • A design file: Ex. webform.aspx • Design view and source (HTML) view • A CodeBehind file: webfor.aspx.vb • To set start up page: • Point to the web page in the Solution Explorer and right click to choose Set As Start Page.

  7. Create a web page to add two numbers • Add controls: • Web form flow layout: Controls are positioned from left to right and from top to bottom. • To change a control’s position : • Format/Set position • Absolute • Relative • Note: We can use a table to format a form in flow layout: • Table/Insert table • Add controls in the table • Add code: • Double-click the form to open the code view.

  8. GridView • Creating bound DataGrid by dragging a table from the Server Explorer • Smart tag: • Configure Data Source • Enable: • Paging • Soring • Deleting/Editing

  9. Special Folders • To add a folder: right click website name and choose Add ASP.Net folder or New Folder • ASP.Net folders: • App_Data:A folder to store Access database • App_Code:A folder to store classes • Bin: A folder to store assemblies • Others • Regular folder: • Images:A folder to store images used in the project

  10. Work with Multiple Pages • Add a new form • Add an existing form or page • Change the starting web form • Redirect or transfer to another page: • Server.Transfer(“page name”) • Response.Redirect(“page name”) • ImageButton • PostBackURL property

  11. HTML Introduction • Heading section • <head>, <title>, <meta>, <script>, etc. • Body section • <body>, <p>, <h1> to <h6>, <a>, <br> • Formatting: <b>, <I>, <u>, <center> • Comment: <!-- comment --> • List <ul> • Image • Table: <table>, <tr>: a new row in table, <td>: a new cell in a table row. • Form: <form>, <input>, <select>, <textarea> • <div>:defines a division or a section in an HTML document. <div> tag is often used to group block-elements to format them with styles.

  12. META Tag • The meta tag allows you to provide additional information about the page that is not visible in the browser: • <meta name=“Author” content=“D Chao”> • <meta name=“Keywords” content=“apple, orange,peach”> • Redirection: • <meta http-equiv=“refresh” content=“3;url=http://www.sfsu.edu”> • “3” is number of seconds.

  13. TABLE Tag <table border="1" width="100%"> <tr> <td width="25%"></td> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> </tr> <tr> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> </tr> </table>

  14. FORM Tag • Form attribute: • Action: Specify the URL of a program on a server or an email address to which a form’s data will be submitted. • Method: • Get: the form’s data is appended to the URL specified by the Action attribute as a QueryString. • Post: A prefered method for database processing. Form’s data is sent separately from the URL. • Name: Form’s name • Demo: TestFormGet.Htm, TestFormPost.Htm

  15. QueryString • A QueryString is a set of name=value pairs appended to a target URL. • It can be used to pass information from one webpage to another. • Example: • <A Href=“http://my.com/Target.htm?CustID=C1&Cname=Chao”>

  16. Creating a QueryString • Entered with a URL: • http://dchaolaptop/testFormGet.aspx?cid=c2&cname=bbb • As part of a URL specified in an anchor tag. • <A Href=“http://my.com/Target.htm?CustID=C1&Cname=Chao”> • Via a form sent to the server with the GET method. • Created by script

  17. SCRIPT Tag • Client-side script • <script type="text/javascript"> • </script> • Server-side script • <script language=“VB” runat=“server”> • </script>

  18. Input Tag • HTML textbox, radiobutton, checkbox, button, listbox, etc.

  19. Elements of an ASP.Net Page • Directives • Code blocks • ASP.NET controls • HTML tags and text

  20. Directives • A directive controls how an ASP.Net page is compiled. • Page directives: Specify default language, enable tracing and debugging for a page. • <%@ Page Language=“VB” %>, <%@ Page Language=“C#” %> • Imports name spaces • To process Access database, we need to import: • <%@ Import Namespace=“System.Data” %> • <%@ Import Namespace=“System.Data.Oledb” %>

  21. Inserting ASP.NET Code into Web Pages • Place ASP.NET code between <script> and </script> with a RUNAT attribute. • <script language=“VB” runat=“server”> • Your script • </script> • <script runat="server"> ---- ASPNET/ADD2.ASPX • sub clickHandler(Sender As Object, E As EventArgs) • sum.text=cstr(cdbl(num1.text)+cdbl(num2.text)) • end sub • </script> • Inline Code Block: ASP code is placed between <% and %>. • <p>The time is now <%=Now.TimeOfDay()%></p> • <p>The time is now <% response.write(Now.TimeOfDay())%></p> • “=“ is shorthand for response.write • Server-side comments: • <%--Comments--%> • CodeBehind file (Partial class): • <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

  22. Inline Coding Example <body> <p>The time is now <%=Now.TimeOfDay()%></p> <p>The time is now <% response.write(Now.TimeOfDay())%></p> <% dim iHour as Double iHour=Now.Hour() if iHour < 12 then response.write("<h1>good morning</h1><br>") else response.write ("<h1>good afternoon</h1><br>") end if %> </body>

  23. ASP.NET Object Model Client Server Request Object Server Object Response Object Application Object Session Object

  24. ASP.NET Request Object • When a page is requested, much information is passed along with the request, such as the URL, queryString, and data from a form. The request object allows you to get the information passed along with the request. • It is created from the System.Web.HttpRequest class. • Demo: testRequest.Htm, TestRequest.aspx

  25. <body> <% response.write ("<h1> cid=" & request.form("cid") & "</h1><br>") response.write ("<h1> cname=" & request.form("cname")& "</h1><br>") Response.Write("<h1> filepath " & Request.FilePath & "</h1><br>") Response.Write("<h1> httpMethod " & Request.HttpMethod & "</h1><br>") Response.Write("<h1> path " & Request.Path & "</h1><br>") Response.Write("<h1> Url " & Request.Url.ToString & "</h1><br>") Response.Write("<h1> urlReferer " & Request.UrlReferrer.ToString & "</h1><br>") Response.Write("<h1> HostName " & Request.UserHostName & "</h1><br>") Response.Write("<h1> HostAddress " & Request.UserHostAddress & "</h1><br>")%> </body> Note: In Request.Form(“cid”), the CID is the Name property of the tetbox, not ID property.

  26. Request Object Collections • QueryString • http://my.com/Target.htm?CustID=C1&CustName=Chao • cid = Request.queryString(“CustID”) • cName=Request.queryString(“CustName”) • Form • A form with two text boxes:CustID, CustName • cid = Request.Form(“CustID”) • cName=Request.Form(“CustName”) • Cookies • ClientCertificates • Path, ApplicationPath, PhysicalApplicationPath, etc. • Demo: testReqForm.htm, testReqForm.aspx

  27. TestReqForm <form method="POST" action="testReqForm.aspx?myquery=testquery"> <p>EnterCID:<input type="text" name="CID" size="20"></p> <p>EnterName:<input type="text" name="CNAME" size="20"></p> <p><input type="checkbox" name="C1" value="ON">checkbox1&nbsp;&nbsp;&nbsp; <input type="checkbox" name="C2" value="ON">checkbox 2</p> <p><input type="radio" value="V1" checked name="R1">radio1</p> <p><input type="radio" name="R1" value="V2">radio 2</p> <p><select size="1" name="D1"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select>listbox</p> <p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p> <input type="hidden" name="hidden1" value="Hi, it's me!"> </form>

  28. TestReqForm.Aspx <% response.write ("<h1> cid=" & request.form("cid") & "</h1><br>") response.write ("<h1> cname=" & request.form("cname")& "</h1><br>") response.write ("<h1> hidden variable=" & request.form("hidden1")& "</h1><br>") if request.form("C1")="ON" then response.write ("<h1>You select checkbox 1</H1><br>") end if if request.form("C2")="ON" then response.write ("<h1>You select checkbox 2</H1><br>") end if if request.form("R1")="V1" then response.write ("<h1>You select Radio 1</H1><br>") else response.write ("<h1>You select Radio 2</H1><br>") end if response.write ("<h1> listBox=" & request.form("D1")& "</h1><br>") response.write ("<h1>" & request.queryString("myquery")& "</h1><br>") %>

  29. ASP.NET Response Object • This object allows you to send information back to client. • It is created from the System.Web.HttpResponse class. • Properties: • Buffer • Cookies (a collection) • Methods: • Response.Write (“…..”) *** MessageBox is not available for web project ***. • Response.Clear(), Response.Flush(): clear/flush buffer • Response.Redirect (“URL”)

  30. Buffer • When ASP.Net is running the code, it gradually builds up the HTML that will be sent back to the browser. As the HTML is generated, it is placed in a buffer. Normally, the HTML is held in the buffer so that it isn’t sent to the browser until the page finishes executing. • Response.Buffer: The default value for this property is true which means the page is buffered and sent in one block. • Response.Buffer=False sends html as it is generated.

  31. The Application and Session Objects • Application state: A central, site-wide store of variables that we can get from any page. • System.Web.HttpApplication • A session is a single visit to a web site, and normally includes visits to a number of pages. Each time a visitor comes to your web site, a session object is created for the visitor. Session state is a store of variables that relates to a session. • System.Web.SessionState

  32. Examples of Using the Application and Session Objects • Examples of session variables are: user’s id, user’s name, Shopping cart, etc. • Examples of application variables are: visitor counter.

  33. Working with the Application and Session • To place a value into the Application and Session simply assign it a key and then assign the value: • Application (“Name”)=“Smith” • Session (“Age”)=25 • To read values from the Application and Session: • Cname=Application(“Name”) • myAge = Session(“Age”) • To remove an item, or all items: Remove, RemoveAll() • Application.Remove(“Name”) • Session.RemoveAll()

  34. ApplicationState/SessionState Properties • ApplicationState: • Lock, Unlock • SessionState: • SessionID • TimeOut

  35. The Events of the Application and Session Objects • Application_Start • Web site start, and the first view • Application_End • Web site shut down • Session_Start • Session_End

  36. The Global.ASAX File • Eery ASP.NET application has this special script file. • Must reside in the web site’s root directory. • It can contain script code that belongs to the application, or each session. • The event handler of the application and session objects must be placed in the Global.asax file. • To add the Global.ASAX file: • Project/Add New Item/Global Application Class

  37. Application/Session Demo • When are Application and Session events triggered? • Database: • WebLog table: • StartEnd field • TimeStamp field • Session.abandon()

  38. Sub Session_End(ByVal sender As Object, ByVal e As EventArgs) Dim strConn As String = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=C:\WebLogDB.accdb" Dim objConn As New OleDbConnection(strConn) Dim timeStamp As String = Now.ToString Dim strSQLInsert As String strSQLInsert = "Insert into WebLog values ('SessionEnd','" & timeStamp & "')" Dim objCommInsert As New OleDbCommand(strSQLInsert, objConn) objConn.Open() objCommInsert.ExecuteNonQuery() objConn.Close() End Sub Sub Application_End(ByVal sender As Object, ByVal e As EventArgs) Dim strConn As String = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=C:\WebLogDB.accdb" Dim objConn As New OleDbConnection(strConn) Dim timeStamp As String = Now.ToString Dim strSQLInsert As String strSQLInsert = "Insert into WebLog values ('ApplicationEnd','" & timeStamp & "')" Dim objCommInsert As New OleDbCommand(strSQLInsert, objConn) objConn.Open() objCommInsert.ExecuteNonQuery() objConn.Close() End Sub

  39. Global.Asax file Sub Application_Start(ByVal sender As Object, ByVal e As EventArgs) Dim strConn As String = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=C:\WebLogDB.accdb" Dim objConn As New OleDbConnection(strConn) Dim timeStamp As String = Now.ToString Dim strSQLInsert As String strSQLInsert = "Insert into WebLog values ('ApplicationStart','" & timeStamp & "')" Dim objCommInsert As New OleDbCommand(strSQLInsert, objConn) objConn.Open() objCommInsert.ExecuteNonQuery() objConn.Close() End Sub Sub Session_Start(ByVal sender As Object, ByVal e As EventArgs) Dim strConn As String = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=C:\WebLogDB.accdb" Dim objConn As New OleDbConnection(strConn) Dim timeStamp As String = Now.ToString Dim strSQLInsert As String strSQLInsert = "Insert into WebLog values ('SessionStart','" & timeStamp & "')" Dim objCommInsert As New OleDbCommand(strSQLInsert, objConn) objConn.Open() objCommInsert.ExecuteNonQuery() objConn.Close() End Sub

  40. <%@ import Namespace="System.Data" %> <%@ import Namespace="System.Data.Oledb" %> <script runat="server"> 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 objComm As New OleDbCommand() Sub Application_Start(ByVal sender As Object, ByVal e As EventArgs) objConn.Open() strSQL = "select VisitorCounter from VCounterTable where CounterDate = (" strSQL = strSQL + "Select Max(CounterDate) from VCounterTable);" Dim objComm As New OleDbCommand(strSQL, objConn) objDataReader = objComm.ExecuteReader() objDataReader.Read() Application("visitor") = objDataReader("VisitorCounter") objConn.Close() End Sub Sub Application_End(ByVal sender As Object, ByVal e As EventArgs) Dim objComm As New OleDbCommand() objConn.Open() objComm.Connection = objConn objComm.CommandType = CommandType.Text strSQL = "Insert Into VCounterTable Values (#" + CStr(DateTime.Now()) + "#, " + CStr(Application("visitor")) + ");" objComm.CommandText = strSQL objComm.ExecuteNonQuery() objConn.Close() End Sub Sub Session_Start(ByVal sender As Object, ByVal e As EventArgs) Application.Lock() Application("visitor") = Application("visitor") + 1 Session("visitor") = Application("visitor") Application.UnLock() End Sub Sub Session_End(ByVal sender As Object, ByVal e As EventArgs) ' Code that runs when a session ends. End Sub </script>

  41. Web Form vs HTML Form • HTML Form: A web page that contains one or more HTML form controls such as textbox, checkbox, dropdown list, and button inside an HTML <form> tag. • Web Form: A web page that contains: • ASP.NET server controls, and/or HTML form controls inside a <form runat=“server”> tag. • ASP.NET code that produces dynamic content to be displayed within the web form.

  42. Web Form Events • Every time a page is called the page object goes through a series of stage: initializing, loading, processing and disposing of information. It happens every time a round trip to the server occurs. • Page_Init • Page_Load: Occurs when a page is visible. • Control Events • Page_Unload • Note: A webform is handled by itself. • Demo: web form with regular HTML controls – ASPNET/TestRequestFormHTML.ASPX

  43. ASP.NET Server Controls • Intrinsic Controls: These controls correspond to their HTML counterparts. • Ex. Textbox, listbox, button, etc. • Data-Centric Controls: Controls used for binding and displaying data from a data source, such as the DataGrid control. • Rich Controls: Such as Calendar, AdRotator. • Validation Controls: Such as RequiredFieldValidator. • Namespace:System.Web.UI.Webcontrols

  44. Example ofASP.NetControl Tag • Textbox: • <asp:TextBox ID="TextBox1" runat="server" Style="z-index: 100; left: 80px; position: absolute; top: 64px"></asp:TextBox> • Properties: • Control type • ID • BackColor, ForeColor, Height, Width • Runat=“server”

  45. ASP.Net Composite Controls • DropdownList: • Control tag + ListItem tag • <asp:dropdownlist id="list1" runat="server"> • <asp:listitem>Apple</asp:listitem> • <asp:listitem>Orange</asp:listitem> • <asp:listitem>Banana</asp:listitem> • </asp:dropdownlist> • <asp:listbox/> • Demo:TestListBox.aspx • <asp:radiobuttonlist/> • <asp:checkboxlist/>

  46. Server Control Events • Object Browser • System.Web.UI.Webcontrols

  47. Postback • Postback is the process by which the browser posts information back to the server telling the server to handle the event, the server does so and sends the resulting HTML back to the browser.

  48. The effects of Postback • Remember the state of the form by adding a hidden _VIEWSTATE variable. • Enable to write event handler. • Page.ISPostBack property. • IF Not Page.ISPostBack Then • This is the first time the page is loaded. • Demo: Display welcome message only once.

  49. Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load If Not Page.IsPostBack Then Response.Write("Welcome to this demo page") End If End Sub

  50. ASP.Net Controls’ AutoPostBack Property • Button always triggers postback. • Other controls, by default, this property is set to false.

More Related