ASP.NET Intro An introduction to the languages and communication of an ASP.NET system

The 6 Languages of an ASP.NET Application HTML / XHTML Hypertext Markup Language (Extensible) Note: XHTML is a more restrictive and better formatted version of HTML. Used for formatting and displaying web pages in a web browser. HTML content is considered to be static (i.e. it does not change unless the programmer modifies the code to make it different) Welcome Hello world! Hello world! Browser view: BROWSER SIDE

The 6 Languages of an ASP.NET Application CSS Cascading Style Sheets Used to format HTML items, in a way which is separate from the HTML code. Can be embedded into an HTML page, or can be created as a separate document (which makes the CSS easier to reuse and change). p { color: #0000FF; } Hello world! Browser view: Hello world! BROWSER SIDE

The 6 Languages of an ASP.NET Application JavaScript While similar to Java, it is a different language. JavaScript is an interpreted language used to create dynamic features on the client-side of a web application. Can be embedded into an HTML page, or can be created as a separate document (which makes the JavaScript easier to reuse and change). My First Web Page My First Paragraph. document.getElementById("demo").innerHTML=“Hi!"; My First Web Page My First Paragraph Browser view: Hi BROWSER SIDE

The 6 Languages of an ASP.NET Application ASP Markup A substitute for HTML; can used instead of HTML on server-side web pages. Translated by the server into a series of HTML, CSS and JavaScript code. Once translated, is sent back to the client web browser as a standard HTML document. Used instead of HTML because it is easier to work with this in programming code sections Translated by the server into: <select name="ddlMonthlyInvestment" id="ddlMonthlyInvestment" style="width:106px;"> Browser view: SERVER SIDE

The 6 Languages of an ASP.NET Application C# (or VB) C# is like a combination of C++ and Java; C# is a compiled language used to create dynamic features on the server-side of a web application. Processed by the server to cause changes to the HTML content of a webpage. The result is sent back to the client web browser as standard, static HTML. for (int i = 50; i <= 500; i += 50) ddlMonthlyInvestment.Items.Add(i.ToString()); Browser view: SERVER SIDE

The 6 Languages of an ASP.NET Application SQL Structured Query Language A language used to interact with a database server to retrieve, insert, update and delete data. Databases are generally used to hold the data that our web application presents to the user. The results of a SQL command would usually be written into a web page and then sent back to the client web browser. SELECT [LongName] FROM [Categories] Translated by the server into an “array” object temporarily stored in server memory containing: Costumes Special Effects Masks Props SERVER SIDE

Putting It All Together 1)ASP Markup can create a selection box: 2)An SQL query can retrieve data from the database: SELECT [LongName] FROM [Categories] 3)C# can load the results into the selection box: foreach (String name in QueryResultArray) ddlNames.Items.Add(name); SERVER SIDE

Putting It All Together 4)Server translates into HTML for presentation to client: Costumes Special Effects Masks Props 5)CSS can change how it appears on the screen select { color: #FF0000; font-style: italic; } Browser view: Costumes Special Effects Masks Props BROWSER SIDE

Putting It All Together 6)Javascript can cause an action when an item is selected: function output() { alert (“item selected”); } … Browser view: BROWSER SIDE

Retrieving a Static Web Page from the Web Server Client: Web BrowserServer: Basic Web Server 1. Request for an HTML page2. Receives request 3. Retrieves file from hard disk drive 4. Receives and displays web page 4. Returns file to browser

Retrieving a Dynamic ASPX page from the Web Server Client: Web Browser Server: Microsoft IIS Server 1. Request for an ASPX page 2. Receives request and retrieves file from hard disk drive 4. Return results to web server as a standard HTML file 5. Receives and displays web page 5. Returns file to browser ASP.NET Engine 3. Execute the ASPX code

Retrieving a Dynamic ASPX with Database Data Client: Web Browser Server: Microsoft IIS Server 1. Request for an ASPX page 2. Receives request and retrieves file from hard disk drive 8. Return results to web server as a standard HTML file 10. Receives and displays web page 9. Returns file to browser ASP.NET Engine 3. Execute the ASPX code Database Server 4. Request Data from DB Server 5. Retrieves data from DB files 6. Return data to ASP.NET Engine 7. Incorporate data into web page