DevNext - Web Programming Concepts Using Asp Net


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Assalamoalikum and Good Afternoon! Thank you all for coming here today. I am excited to be here at one of the finest University of Pakistan and it’s my honor to talk with future engineers of World! Our topic of discussion today is “Web programming concepts using ASP.Net”. We have lot to cover and volunteers told us that people will rush for points around 3:30 PM, so let’s get started 
  • Before beginning, let us quickly introduce us to you
  • The communication mechanism by which Web browsers talk to Web sites is named the Hyper- Text Transfer Protocol (HTTP). The World Wide Web as we know it today began as a research project at CERN in Switzerland. Lies on top of TCP/IP as an application layer
  • The earliest Web sites were built primarily using static HTML pages. That is, you could surf to some page somewhere and read the HTML document living there. While at that time being able to do this was pretty amazing, HTML eventually evolved to be capable of much more than simply formatting text. HTML includes the <form></form> opening and closing tags for notifying the browser that a section of HTML includes tags representing controls the user will interact with to eventually return information to the server. The contents of the form, which is to say the data contained in the input controls, will be “posted back” to the server for processing. It’s common to combine the words and call this action a postback . This is why the typical HTTP use case for an HTML document is GET, to initially retrieve the document, and then POST (or a modified form of GET), to return data to the server, if any.
  • http://localhost/SelectFeature2.htm?Feature=Versioning+purgatory&Lookup=Lookup This modifi ed URL, often called a query string , is then sent to the server. The form’s POST method causes the form contents to be sent to the server in the body of a returned HTTP packet, as you see here: POST /SelectFeature2.htm HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, ... , */* Accept-Language: en-us Content-Type: application/x-www-form-urlencoded Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; ... .NET CLR 3.0.04506.30) Host: localhost:80 Content-Length: 42 Connection: Keep-Alive Cache-Control: no-cache Feature=Versioning+purgatory&Lookup=Lookup
  • When a request arrives, it’s the server’s job to somehow respond to the request in a meaningful way. On the Microsoft platform, IIS is the watchdog intercepting HTTP requests from port 80—the normal inbound port for HTTP requests. Internet servers use other ports as well. For example, HTTPS (Secure HTTP) happens over port 443. However, right now we’re mostly interested in normal Internet traffi c over port 80.
  • Let’s start off our discussion with a quick overview of the .NET framework. If you’re new to .NET its important for you to understand where ASP.NET “fits” into the overall framework. At its core the common language runtime (CLR) provides the execution environment for all .NET Framework code. Code that runs within the CLR is referred to as managed code. The CLR provides various functions and services required for program execution, including just-in-time (JIT) compilation, allocating and managing memory, enforcing type safety, exception handling, thread management, and security. IIS takes ASP.NET further by integrating the ASP.NET runtime extensibility model with the core server. This allows developers to fully extend the IIS  server with the richness of ASP.NET and the .NET Framework, instead of using the lower level IIS C++ APIs. Existing ASP.NET applications also immediately benefit from tighter integration using existing ASP.NET features like Forms Authentication, Roles, and Output Caching for all content. Beyond these two powerful components are of course the .NET class libraries. Obviously there’s a lot to discuss in each of the chiclets but I wanted to provide you with an idea of how the libraries are categorized. System - Contains fundamental classes and base classes that define commonly used value and reference data types, events and event handlers, interfaces, attributes, and processing exceptions. Other classes provide services supporting data type conversion, method parameter manipulation, mathematics, remote and local program invocation, application environment management, and supervision of managed and unmanaged applications. Communications and Workflow (WCF & WF) – contain classes for encapsulation of intra-process communication and activity management Data, LINQ, and XML- are native components of the .NET framework we’ll see that foundational frameworks such as ADO.NET allow developers to abstract nuances of data source and concern themselves with application functionality. Windows Presentation Foundation (WPF) is a next-generation presentation system for building Windows client applications with visually stunning user experiences. With WPF, you can create a wide range of both standalone and browser-hosted applications using a subset of WPF called SilverLight Finally we have ASP.NET which is a unified Web development model that includes the services necessary for you to build enterprise-class Web applications with a minimum of coding. ASP.NET is part of the .NET Framework, and when coding ASP.NET applications you have access to classes in the .NET Framework. You can code your applications in any language compatible with the common language runtime (CLR),
  • When an ASP.NET page runs, the page goes through a life cycle in which it performs a series of processing steps. These include initialization, instantiating controls, restoring and maintaining state, running event handler code, and rendering. It is important for you to understand the page life cycle so that you can write code at the appropriate life-cycle stage for the effect you intend. Additionally, if you develop custom controls, you must be familiar with the page life cycle in order to correctly initialize controls, populate control properties with view-state data, and run any control behavior code. The processing steps listed here are a subset of the possible steps available during the lifetime of a request.
  • DevNext - Web Programming Concepts Using Asp Net

    1. 1. Web Programming Concepts using ASP.NET Adil Ahmed Mughal Namrah Arif 3rd April, 2010 NED University of Engineering and Technology
    2. 2. Speaker(s) <ul><li>Adil Ahmed Mughal </li></ul><ul><li>Development Executive at Telenor Pakistan </li></ul><ul><li>Microsoft Most Valuable Professional </li></ul><ul><li>Microsoft Certified Professional </li></ul><ul><li>INETA, User Group Leader </li></ul><ul><li>I blog at </li></ul><ul><li>Author of few articles on </li></ul>1
    3. 3. Speaker(s) <ul><li>Namrah Arif </li></ul><ul><li>Software Engineer at Folio3 </li></ul><ul><li>Graduated from NEDUET (CIS Dept.) in 2009 </li></ul><ul><li>Served as head Volunteer of DevNext at NEDUET in 2009 </li></ul><ul><li>Active volunteer of DevNext and Emerging .NET Devs User groups </li></ul>
    4. 4. Agenda <ul><li>Background </li></ul><ul><li>Web Fundamentals </li></ul><ul><ul><li>HTTP Request </li></ul></ul><ul><ul><li>Static and Dynamics Sites </li></ul></ul><ul><ul><li>HTTP Forms </li></ul></ul><ul><ul><li>Role of Web Server </li></ul></ul><ul><li>ASP.NET </li></ul><ul><ul><li>ASP.NET Page Life Cycle </li></ul></ul><ul><ul><li>Client Side vs. Server Side </li></ul></ul><ul><ul><li>Understanding Submit vs. PostBack </li></ul></ul><ul><ul><li>State Management and View State </li></ul></ul>
    5. 5. Pre-requisite <ul><li>Some working knowledge of Object Oriented Programming Language such as C#, VB.NET or Managed C++ </li></ul><ul><li>Basic familiarity with Web and ASP.NET </li></ul><ul><li>Development Tools: </li></ul><ul><ul><li>.NET Framework 3.5+ </li></ul></ul><ul><ul><li>Visual Web Developer or Visual Studio 2008 + </li></ul></ul>
    6. 6. Web Fundamentals <ul><li>HTTP Requests </li></ul><ul><ul><li>The communication mechanism by which Web browsers talk to Web sites </li></ul></ul><ul><ul><li>As a connection protocol, HTTP is built around several basic commands </li></ul></ul><ul><ul><li>GET, HEAD, POST </li></ul></ul><ul><ul><li>HTTP is Stateless Protocol </li></ul></ul>
    7. 7. HTTP GET Request HTML to be rendered by browser Web Browser (Client ) Web Site (Server)
    8. 8. Sample GET Command <ul><li>GET HTTP/1.1 </li></ul><ul><li>Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, ... , */* </li></ul><ul><li>Accept-Language: en-us </li></ul><ul><li>Accept-Encoding: gzip, deflate </li></ul><ul><li>User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; ... .NET CLR 3.0.04506.30) </li></ul><ul><li>Host: localhost:80 </li></ul><ul><li>Connection: Keep-Alive </li></ul>
    9. 9. Sample Response <ul><li>HTTP/1.1 200 OK </li></ul><ul><li>Server: Microsoft-IIS/5.1 </li></ul><ul><li>X-Powered-By: ASP.NET </li></ul><ul><li>Date: Thu, 01 Nov 2007 23:44:04 GMT </li></ul><ul><li>Content-Type: text/html </li></ul><ul><li>Accept-Ranges: bytes </li></ul><ul><li>Last-Modified: Mon, 22 Oct 2007 21:54:20 GMT </li></ul><ul><li>ETag: &quot;04e9ace185fc51:bb6&quot; </li></ul><ul><li>Content-Length: 130 </li></ul><ul><li><html> </li></ul><ul><li><body> </li></ul><ul><li><h1> Hello World </h1> </li></ul><ul><li>Nothing really showing here yet, except some HTML... </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
    10. 10. DEMO <ul><li>Web Request using .NET (With out using Browser) </li></ul>
    11. 11. Web Fundamentals <ul><li>Static Pages </li></ul><ul><ul><li>The earliest web sites were built primarily using static HTML pages. </li></ul></ul><ul><ul><li>HTML eventually evolved to be capable of much more </li></ul></ul><ul><li>HTML Forms </li></ul><ul><ul><li>Notify browser that a section of HTML includes tags representing controls </li></ul></ul><ul><ul><li>The contents of the form will be “posted back” to the server for processing. </li></ul></ul>
    12. 12. Web Fundamentals <ul><li>HTTP Requests </li></ul><ul><ul><li>GET vs. POST </li></ul></ul>
    13. 13. DEMO <ul><li>HTML Forms – GET Vs. POST </li></ul>
    14. 14. GET HTML to be rendered by browser POST HTML to be rendered by browser Web Browser (Client ) Web Site (Server)
    15. 15. Web Fundamentals <ul><li>Role of Web Server </li></ul><ul><ul><li>A program on server that monitors port 80 for incoming HTTP Requests </li></ul></ul><ul><ul><li>On the Microsoft platform, IIS is the watchdog intercepting HTTP requests from port 80—the normal inbound port for HTTP requests </li></ul></ul>
    16. 16. HTTP GET Request HTML to be rendered by browser Web Browser (Client ) Web Site (Server) IIS (Web Server)
    17. 17. Web Fundamentals <ul><li>Static and Dynamic Web Pages </li></ul><ul><ul><li>“ Dynamic means capable of action and/or change, while </li></ul></ul><ul><ul><li>Static means fixed” </li></ul></ul><ul><ul><li>Static Web Pages: </li></ul></ul><ul><ul><li>The server where the page is stored returns the HTML document to the user's computer and the browser displays it </li></ul></ul><ul><ul><li>The user may interact with the document through clicking available links, or a small program (an applet) may be activated, but the document has no capacity to return information that is not pre-formatted </li></ul></ul>
    18. 18. Web Fundamentals <ul><li>Dynamic Web Pages: </li></ul><ul><ul><li>The user can make requests (often through a form) for data contained in a database on the server that will be assembled on the fly </li></ul></ul><ul><ul><li>The request is relayed to the server using an intermediary, such as an Active Server Page (ASP) script embedded in the page's HTML. The intermediary tells the server what information to return </li></ul></ul>
    19. 19. Web Fundamentals <ul><li>What's the difference? </li></ul><ul><ul><li>Static pages are those that send exactly the same response to every request </li></ul></ul><ul><ul><li>Dynamic pages can customize the response on the server to offer personalization based on cookies and information it can get from the visitor. </li></ul></ul><ul><ul><li>IMPORTANT!!! Flash and Shockwave presentations are also classed as static content; despite the fact that user interaction can lead to different ways of presenting the same data, everyone will download the same file from the server </li></ul></ul>
    20. 20. ASP.NET <ul><li>Web application development framework by Microsoft to easily create dynamic websites </li></ul><ul><li>Built on top of CLR allowing programmer to write ASP.NET code using any .NET Languages (such as C#, VB.NET etc.) </li></ul><ul><li>Main advantage is Rapid Application Development </li></ul><ul><li>Works on Code behind model </li></ul>
    21. 21. .NET Framework Overview .NET Class Libraries Operating System/Hardware Internet Information Services .NET Runtime (CLR) ASP.NET Data, LINQ, & XML System Communications & Workflow Windows Presentation Foundation Managed Application
    22. 22. DEMO <ul><li>Simple ASP.NET Web Application </li></ul>
    23. 23. Introduction to ASP.NET Pages HTTP Handler IIS Client Browser
    24. 24. DEMO <ul><li>ASP.NET Page Life Cycle </li></ul>
    25. 25. ASP.NET <ul><li>Client Side vs Server Side </li></ul><ul><ul><li>Client side is what's happening on your computer in your browser. It has nothing to do with the server, or ASP or ASPX pages, or IIS, or the database. </li></ul></ul><ul><ul><li>JavaScript in a web page would be an example of something client side. You don't need the server to help with the functionality of the script. </li></ul></ul><ul><ul><li>when a web page is sitting in your browser after it has been processed by the server and sent &quot;over the wire&quot;, there is absolutely no further connection with the server at this point. </li></ul></ul><ul><ul><li>Client side scripting is usually done in VBScript or JavaScript. Since the code is included in the HTML page, it also poses as a possible security hazard for the client computer. </li></ul></ul>
    26. 26. ASP.NET <ul><ul><li>Server side is when the server is being used to process something. Script or code that is run on the server does not appear on or in the web page that is sent to your browser -- the web page that your browser receives is only the result of the script or database code or processing that happened on the server. </li></ul></ul><ul><ul><li>Server side scripting means that all the script will be executed by the server and interpreted as needed. Client side scripting means that the script will be executed immediately in the browser such as form field validation, clock, email validation, etc. </li></ul></ul>
    27. 27. DEMO <ul><li>Submit Vs. PostBack </li></ul>
    28. 28. State Management <ul><li>The problem of state </li></ul><ul><ul><li>HTTP is a stateless protocol </li></ul></ul><ul><ul><li>Traditional desktop applications have a portion of memory allocated </li></ul></ul><ul><ul><li>Web applications are all together different </li></ul></ul><ul><ul><li>ASP.NET facilitates programmers by creating an illusion of maintaining state using ViewState and other techniques </li></ul></ul>
    29. 29. DEMO <ul><li>ViewState </li></ul>
    30. 30. Web Forms vs. MVC Framework <ul><li>Common Web Presentation Patterns </li></ul><ul><ul><li>MVC </li></ul></ul><ul><ul><ul><li>Ruby on Rails </li></ul></ul></ul><ul><ul><ul><li>ASP.NET MVC </li></ul></ul></ul><ul><ul><ul><li>MonoRail </li></ul></ul></ul><ul><ul><ul><li>Others… </li></ul></ul></ul><ul><ul><li>Web forms </li></ul></ul><ul><ul><li>Other patterns </li></ul></ul><ul><ul><ul><li>MVP </li></ul></ul></ul><ul><ul><ul><li>MVVM </li></ul></ul></ul>
    31. 31. Web Forms <ul><li>Tooling/designer </li></ul><ul><li>Postbacks </li></ul><ul><li>Event driven </li></ul><ul><li>HTML forms and viewstate </li></ul><ul><li>Controls abstraction </li></ul><ul><li>3 rd party component model </li></ul><ul><li>Rapid development </li></ul><ul><li>Declarative syntax </li></ul><ul><li>SharePoint use Web Forms </li></ul>
    32. 32. ASP.NET MVC <ul><li>Full control over markup </li></ul><ul><li>Lightweight views/no Codebehind </li></ul><ul><li>Separation of concerns </li></ul><ul><li>Testing/TDD </li></ul><ul><li>Pluggable view engines </li></ul><ul><li>RESTful </li></ul><ul><li>No postbacks </li></ul><ul><li>No viewstate </li></ul>
    33. 33. Making a choice <ul><li>Personal choice </li></ul><ul><li>Internet versus intranet </li></ul><ul><li>Control over markup </li></ul><ul><li>Familiarity with patterns </li></ul><ul><li>Gradual progression </li></ul><ul><li>RAD controls </li></ul><ul><li>SharePoint </li></ul><ul><li>They can be used together! </li></ul>
    34. 34. THANK YOU! Adil Ahmed Mughal Namrah Arif 3rd April, 2010 Q & A
    35. 35. Useful Links <ul><li>DevNext User Group Blog </li></ul><ul><li> </li></ul><ul><li>Adil’s Weblog </li></ul><ul><li> </li></ul><ul><li>DevNext Facebook Page </li></ul><ul><li> </li></ul>