server controls


Published on

Published in: Internet
  • Be the first to comment

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

No notes for slide server controls

  1. 1. ASP.NET Server Controls Prepared By: Eng. Raed T Aldahdooh Overview About the key concepts ASP.NET server controls.
  2. 2. Agenda  Introduction about internet & client server architecture.  Comparison between Asp.NET & ASP.  ASP.NET Architecture.  Asp. Net Server Controls.  Proc of using controls.  Example.
  3. 3. The Internet  The Internet is a vast interconnected collection of computer networks of many different types.  It is the dominant distributed system at the current time.  World’s largest client/server application.
  4. 4. Client/Server Architectures  Application is modeled as a set of services that are provided by servers and a set of clients that use these services  Clients know the servers but the servers do not need to know all the clients s1 s2 s3 s4 c1 c2 c3 c4 c5 c6 c7 c8 c9 c10 c11 c12 Client process Server process
  5. 5. Microsoft and DS  ASP.NET Web services and .NET Remoting are the generic ways to build distributed applications.
  6. 6. “Classic” ASP Successes  Simple procedural programming model  No compiling, just save  Support for multiple scripting languages  Mix HTML and code
  7. 7. “Classic” ASP Challenges  Code readability  Coding overhead  Reuse “a simple file include model ”.  Performance
  8. 8. ASP.NET  ASP.NET is a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites, web applications and web services.  First released in January 2002 with version 1.0 of the .NET Framework, and is the successor to Microsoft's Active Server Pages (ASP) technology.
  9. 9. ASP.NET part of .NET Framework Base Class Library Common Language Specification Common Language Runtime ADO.NET: Data and XML VisualStudio.NET ASP.NET: Web Services and Web Forms Windows Forms Visual Basic® C++ C# JScript® …
  10. 10. Elements of an ASP.NET application three-tier architecture HTML pages .aspx User controls .ascx Style sheets .css Code behind for .aspx files .aspx.cs Code behind for user controls .ascx.cs Other classes .cs Database classes .cs DatabaseDatabase layer Business Rules Layer Presentation layer
  11. 11. How ASP.NET applications work  When IIS receives an HTTP request for an ASP.NET page, it forwards the request to ASP.NET. ASP.NET then creates and executes a compiled page that combines the page class with the compiled C# code.  When the compiled page is executed, an instance of the ASP.NET page class is generated. Then, ASP.NET the appropriate events, which are processed braises y the event handlers in the page. Finally, the page generates the HTML that’s passed back to IIS.  The ASP.NET page is compiled only the first time it’s requested. After that, the page is run directly from the DLL file.
  12. 12. ASP.NET Architecture ASPX .ASPX
  13. 13. ASP.NET Architecture .ASPXCompiled
  14. 14. ASP.NET Architecture .ASPXCompiled
  15. 15. ASP.NET Architecture .ASPXCompiled .ASPXCompiled
  16. 16. Visual BasicSource code Compiler C++C# CompilerCompiler Assembly IL Code Assembly IL Code Assembly IL Code Operating System Services Common Language Runtime JIT Compiler Native Code Managed code Unmanaged Component ASP.NET Execution Model
  17. 17. ASP.NET Features  Powerful controls  ASPX, ASP – side by side  Simplified programming model  Simplified deployment  Better performance  Security
  18. 18. ASP.NET Features .. cont  Simplified browser support  Simplified form validation  Code behind pages  More powerful data access  Simplified configuration
  19. 19. .NET Controls ASP.NET Server Controls
  20. 20. What Is A Server Control?  A server control is a .NET component that is used to generate the user interface of an ASP.NET Web application.  Controls range in complexity and power: button, text, drop down, calendar, data grid, ad rotator, validation  It is implemented as a managed class deriving directly or indirectly from the System.Web.UI.Control base class.
  21. 21. What Is A Server Control? Speaking More Practically…  A Web user interface element  Renders into HTML, script or a different markup format  Allows customization of rendering  A Web user interface component  Exposes properties, events and methods and is programmable  Provides higher level abstractions  Performs post-back processing  Handles differences between browsers  Consistent programming model
  22. 22. ASP.NET Server App Raising A Server Event  Mapping a browser event to server event Click! Button1 Control Control Control Button1.RaisePostBackEvent() calls OnClick() invokes event handler Button1_Click() Controls registered to receive post-back event notification IPostBackEventHandler HTTP form post
  23. 23. ASP.NET Server Controls Organized into logical families • HTML controls • Controls / properties map 1:1 with HTML • Web controls • Richer functionality • More consistent object model
  24. 24. HTML Server Controls  HTML elements exposed to the server for programming, with an object model mapping to the element  Additional attribute runat=“server”  HTML controls map one-to-one to HTML elements  HTML server controls are primarily used when migrating older ASP pages to ASP.NET.
  25. 25. HTML Supported controls  Supported controls  <a>  <img>  <form>  <table>  <tr>  <td>  <th>  <select>  <textarea>  <button>  <input type=text>  <input type=file>  <input type=submit>  <input type=button>  <input type=reset>  <input type=hidden>
  26. 26. Web Server Controls  ASP.NET Web server controls are objects on ASP.NET Web pages that run when the page is requested and that render markup to a browser.  Many Web server controls resemble familiar HTML elements, such as buttons and text boxes.  Other controls encompass complex behavior, such as a calendar controls, and controls that manage data connections.
  27. 27. Web Server Controls  Web server controls offer more functionality than HTML controls.  Consistent object model  Richer functionality  E.g. AutoPostBack, additional methods Label1.BackColor = Color.Red; Table.BackColor = Color.Blue;
  28. 28. How Web controls appear ..  Web controls appear in HTML markup as namespaced tags  Web controls have an asp: prefix  Defined in the System.Web.UI.WebControls namespace  This namespace is automatically mapped to the asp: prefix <asp:button onclick="button1_click“ runat=server> <asp:textbox onchanged="text1_changed“ runat=server>
  29. 29. Code Behind Code Behind private void Button_Click( s As Object, e As EventArgs ) { If ( == "btnHello“) { lblMessage.Text = "Hello!" } Else { lblMessage.Text = "Goodbye!" } } ASPX PAGE: <form Runat="Server"> <asp:button id="btnHello" Text="Say Hello!" OnClick="Button_Click" Runat="Server" /> <asp:button id="btnGoodbye" Text="Say Goodbye!" OnClick="Button_Click" Runat="Server" /> <asp:Label id="lblMessage" Runat="Server" /> </form>
  30. 30. Properties To Controls Display  Web Controls provide extensive properties to control display and format, e.g.  Font  BackColor, ForeColor  BorderColor, BorderStyle, BorderWidth  Style, CssClass  Height, Width  Visible, Enabled
  31. 31. Create Controls • User controls • Custom controls
  32. 32. 2 Ways To Author Server Controls  User Controls  Simple, declarative authoring model (.ascx file)  Scoped to a single application  Well suited to static content and layout  “Custom” or Compiled Controls  Code-based authoring model (.cs or .vb class file)  Easily shared across applications  Well suited to dynamic or programmatic generation of content and layout  More complex, but also more capabilities
  33. 33. Web User Controls  What they are:  Similar in functionality to ASP include files but much better.  Encapsulate HTML and code into smaller functional units.  Built similar to web forms but hosted on a page as an object.  Reusable within the web project that hosts them.
  34. 34. Two part entry into the aspx page Part 1: The declaration. <%@ Register TagPrefix="uc1" TagName="PageHeader" Src=“_PageHeader.ascx" %> TagPrefix: This is like a namespace in case you want to include other controls with the same name. Usually defaults to uc1. TagName: Again its only significance is to help uniquely identify the control on the page. Usually defaults to the name of the class. Src: Let’s the page know where it can find the ascx file that goes with the control.
  35. 35. Two part entry into the aspx page Part 2: The actual control tag. <uc1:pageheader id="_PageHeader1" runat="server" /> TagName TagPrefix Required if manipulating on Server Unique instance identifier
  36. 36. Create Custom Controls  Creating your own controls can simultaneously improve the quality of your Web applications, make you more productive and improve your user interfaces.  Next Slide will discuss create HTML5 video Player controls.
  37. 37. HTML video player  ASP.NET custom controls are more flexible than user controls.  We can also share a custom control among projects.  create our custom control in a web custom control library that is compiled separately from our web application.  we can add that library to any project in order to use our custom control in that project.
  38. 38. HTML video player  The controls attribute is for adding play, pause and volume controls.  Autoplay, controls, height, loop, preload, src, width, poster.
  39. 39. Creating a Custom Control Project
  40. 40. Adding a Web Custom Control to the Project The new custom control vedioPlayer.cs is created
  41. 41. VedioPlayer.cs Modifying the Class Declaration Line
  42. 42. Adding Properties  VideoUrl: A string property which specifies the URL of the video to play.  PosterUrl: A string property which specifies the address of an image file to show while no video data is available.  AutoPlay: A boolean property to specify whether the video should automatically start playing or not, when the webpage is opened.  DisplayControlButtons: A boolean property that specifies whether the player navigation buttons are displayed or not.  Loop: A boolean property that specifies whether the video will start over again or not, every time it is finished.
  43. 43. Add the following code to the VideoPlayer class
  44. 44. Creating the Render Contents Method  The primary job of a server control is to render some type of markup language to the HTTP output stream, which is returned to and displayed by the client.  The overridden RenderContents method is the primary location where we tell the control what we want to render to the client.
  45. 45. Creating the Render Contents Method  protected override void RenderContents(HtmlTextWriter output) { }  RenderContents method has one method parameter called output. This parameter is an HtmlTextWriter object, which is what the control uses to render HTML to the client.  The HtmlTextwriter class has a number of methods you can use to render your HTML, including AddAttribute and RenderBeginTag.
  46. 46. Adding Tag Attributes
  47. 47. Rendering the <video> Element
  48. 48. Final vedioPlayer.cs Class
  49. 49. Building the Project
  50. 50. Adding VideoPlayer Control to the Visual Studio Toolbox
  51. 51. Placing the VideoPlayer Control on ASP.NET Web Page
  52. 52. Types of Web Controls  Types of Web Controls  Basic Web controls  List controls  Data Controls  Rich controls  Validation controls
  53. 53. Basic Web Controls  Are rendered to simple HTML elements, provides additional server-side functionality for a developer.  Basic Web controls provide the same functionality as their HTML server control counterparts. However, basic Web control include additional methods, events, and properties against which you can program.  Supported controls  <asp:button>  <asp:imagebutton>  <asp:linkbutton>  <asp:hyperlink>  <asp:textbox>  <asp:checkbox>
  54. 54. Basic Web Controls ..cont  Label  Change text with the help of code.  TextBox  Can be used to display a single-line text box, password text box, and multi-line text box by selecting its mode.  The modes are mutually exclusive.  <%@ ValidateRequest="False" %>
  55. 55. Basic Web Controls ..cont  Button  OnClickRaises the Click event.  Form is submitted to the server  Private void Button_Click( s As Object, e As EventArgs )  OnCommandRaises the Command event.  The form is submitted with values of the CommandName and CommandArgument properties.  Private void Buttom_Command( s As Object, e As CommandEventArgs )  Image  With the help of image control we can create image maps.  Link Button  Rendered as Hyperlink
  56. 56. Basic Web Controls ..cont  RadioButton  One radio button can be selected from a group  CheckBox  Multiple checkboxes can be selected at a time
  57. 57. Basic Web Controls ..cont  TextBox, ListControl, CheckBox and their subclasses don’t automatically do a postback when their controls are changed  Specify AutoPostBack=true to make change events cause a postback
  58. 58. List Controls  Controls that handle repetition  Supported controls  Repeater, DataList and DataGrid controls expose templates for customization
  59. 59. List Controls ..cont  DropDownList  Acts as radio button list  Covers less space  List Box  Acts as Checkbox list  Selection Mode enables multiple selection in the list.
  60. 60. Rich Controls  provide a rich user interface for particular tasks.  Custom controls with rich functionality  Supported Controls  <asp:calendar>  <asp:adrotator>  More will be added
  61. 61. Visual Studio Standard controls
  62. 62. Data Controls  Data access in ASP.NET 2.0 can be accomplished completely declaratively (no code) using the new data-bound and data source controls.  There are new data source controls to represent different data backends such as SQL database, business objects, and XML.  There are new data-bound controls for rendering common UI for data, such as gridview, detailsview, and formview..
  63. 63. Data Controls  Data source controls - these controls provides data binding to different data sources  Data view controls - these are various lists and tables, which can bind to data from data sources for display
  64. 64. Supported Controls
  65. 65. Validation Controls  Why Validate?  Usability  Frustrating for the user  Data Integrity  Ensure your getting data in the format you expect  Security  Keeping your forms from being used against you or your users  Assume all input is evil
  66. 66. Validation Controls …cont  Cross Site Scripting Attack  Cross-site scripting allows hackers to run malicious script in a client’s Web browser  Any Web page that renders dynamic HTML based on content that users submit is vulnerable  That script can then be executed by the browser of an unsuspecting user. The browser has know way of knowing that the script shouldn’t be executed.
  67. 67. Where to Validate?  Server Side  CGI, ASP, .Net, Coldfusion, etc.  Pros  Ensures that every time the form is submitted, the validation will run.  Allows for validation against other server resources, such as a backend database and business rules.  Cons  Puts more load on the server.  Slower
  68. 68. Where to Validate?  Client Side  JavaScript  Pros  Processing is done on the client computer  Faster  Cons  Will not work if the user has it disabled  Not a solution for security.  Not a good solution for data integrity.
  69. 69. When Server Side is also Client Side  Many server side controls will produce JavaScript for validation when the page is served.  form field with validation <form runat="server"> Email:<asp:textbox id="txtEmail" size="20" runat="server"/><br> <ASP:RequiredFieldValidator ControlToValidate="txtEmail" Display="Static" ErrorMessage="*Email is a required field." runat="server"/>  Resulting form on Page <form name="_ctl0" method="post" action="name_email1.aspx" language="javascript" onsubmit="ValidatorOnSubmit();" id="_ctl0"> <script language="javascript" type="text/javascript" src="/aspnet_client/system_web/1_0_3705_6018/WebUIValidation.js"></ script>  Server Side Validation : Page.IsValid “ Gets a value indicating whether page validation succeeded”.
  70. 70. Validation Controls …cont  provide a way to reduce the number of server round-trips by adding client side validation code  <asp:RequiredFieldValidator>  Ensures that a value is entered  Display properties  Dynamic, static or none  Comparing to an Initial Value  Set InitialValue property
  71. 71. Validation Controls …cont  <asp:RegularExpressionValidator>  Tests if value matches a predefined pattern  Validating email (  S+@S+.S+  Specifying length  S{0,10}  Digits  d{5}
  72. 72. Validation Controls …cont  <asp:CompareValidator>  Compares value against constant, another control or data type  <asp:RangeValidator>  Checks if value is within minimum and maximum values  <asp:ValidationSummary>  Displays list of validation errors in one place  <asp:CustomValidator>  Lets you create custom client- or server-side validation function
  73. 73. Validation Controls …cont  Validation controls are derived from System.Web.UI.WebControls.BaseValidato r, which is derived from the Label control  Validation controls contain text which is displayed only if validation fails  Text property is displayed at control location  ErrorMessage is displayed in summary
  74. 74. Validation controls offer the following advantages:  You can associate one or more validation controls with each control that you want to validate.  The validation is performed when the page form is submitted.  You can specify programmatically whether validation should occur, which is useful if you want to provide a cancel button so that the user can exit without having to fill valid data in all of the fields.  The validation controls automatically detect whether validation should be performed on the client side or the server side.
  75. 75. Supported controls
  76. 76. Pros Of Using Controls Pros
  77. 77. Pros  All Web Controls follow a rich object model that provides type-safe programming capabilities.  Web Controls are able to raise a greater variety of server-side events.  Some controls (DataGrid, repeater, etc) have the ability to define your own look for the control using templates.  Web Controls are extensible, meaning that you can create your own Web Controls
  78. 78. Pros  Developers don’t need any web experience to write web apps.  Developers can focus on their application -NOT on maintaining the illusion of a state ful windows application via web forms.  Maintainable, reusable code. That mix of VBScript and HTML that worked OK for simple jobs but was unmanageable for serious jobs has gone.
  79. 79. Example Of using Server Controls demo
  80. 80. Any Question?