home *** CD-ROM | disk | FTP | other *** search
/ io Programmo 40 / IOPROG_40.ISO / SOFT / NETFrameworkSDK.exe / comsdk.cab / samples.exe / QuickStart / aspplus / doc / webformsintro.aspx < prev    next >
Encoding:
Text File  |  2000-06-08  |  15.7 KB  |  405 lines
  1.  
  2. <%@ Register TagPrefix="Acme" TagName="SourceRef" Src="/quickstart/util/SrcRef.aspx"%>
  3.  
  4. <!-- #include virtual="/quickstart/aspplus/include/header.inc" -->
  5.  
  6. <h4>Introducing Web Forms</h4>
  7. <p>
  8.  
  9. <!-- #include virtual="/quickstart/aspplus/include/wftoc1.inc" -->
  10. <p>
  11. <hr>
  12.  
  13. <!--BEGIN SECTION-->
  14. <a name="webforms">
  15. <span class="subhead">What is ASP+ Web Forms?</span>
  16. <p>
  17.  
  18. The ASP+ Web Forms Page Framework is a scalable NGWS runtime programming model 
  19. that can be used on the server to dynamically generate web pages.
  20.  
  21. <p>
  22.  
  23. Intended as a logical evolution of ASP (ASP+ provides syntax compatibility with 
  24. existing pages), the ASP+ Web Forms Framework has been specifically designed to 
  25. address a number of key deficiencies with the previous model.  In particular: 
  26.  
  27. <ul>
  28.    <li>The ability to create and use reusable UI controls that can encapsulate common functionality and reduce the code a page developer has to write. 
  29.    <li>The ability for developers to cleanly structure their page logic in an orderly -- non-ôspaghetti codeö û fashion.
  30.    <li>The ability for development/authoring tools to provide strong WYSIWYG design support for pages (existing ASP code today is opaque to a tool). 
  31. </ul>
  32.  
  33. <p>
  34.  
  35. This section of the quickstart provides a high-level code walkthrough of some key ASP+ Web Forms features. Subsequent sections of
  36. the quickstart can then be visited to drill down into more specific details.
  37.  
  38.  
  39. <!--BEGIN SECTION-->
  40. <br>
  41. <a name="writingforms">
  42. <br>
  43. <span class="subhead">Writing Your First Web Form Page</span>
  44. <p>
  45.  
  46. ASP+ Web Form Pages are text files with a <b>.aspx</b> filename extension.  They can be deployed throughout an IIS 
  47. virtual root directory tree.  When a browser client requests .aspx resources, the ASP+ runtime parses and compiles
  48. the target file into a NGWS class.  This class can then be used to dynamically process  incoming request (note that
  49. the .aspx file is only compiled the first time it is accessed -- the compiled type instance is reused across multiple
  50. requests). 
  51.  
  52. <p>
  53.  
  54. An ASP+ Page can be created simply by taking an existing HTML file and renaming its file extension .aspx (no
  55. modification or code is required).  For example, the below sample demonstrates a simple HTML page that collects
  56. a user's name and category preference, and then performs a form-post back to the originating page when a button
  57. is clicked:
  58.  
  59. <p>
  60.  
  61. <Acme:SourceRef 
  62.   RunSample="/quickstart/aspplus/samples/webforms/intro/intro1.aspx" 
  63.   ViewSource="/quickstart/aspplus/samples/webforms/intro/intro1.src"
  64.   Icon="/quickstart/aspplus/images/intro1.gif"
  65.   Caption="Intro1.aspx"
  66.   runat="server" />
  67.  
  68. <p>
  69.  
  70. <b>Important:</b> Note that nothing really happens yet when you click the "Lookup" button.  This is because the .aspx file contains
  71. only static HTML (no dynamic content).  As such, the same HTML gets sent back to the client on each trip to the page --
  72. which results in the contents of the form fields (the TextBox and DropDownList) getting lost between requests.
  73.  
  74.  
  75. <!--BEGIN SECTION-->
  76. <br>
  77. <a name="usingasp">
  78. <br>
  79. <span class="subhead">Using ASP <% %> Render Blocks</span>
  80. <p>
  81.  
  82. ASP+ Pages provides syntax compatibility with existing ASP Pages.  This includes support for <% %> <b>code render blocks</b>
  83. that can be intermixed with HTML content within a .aspx file.  These code blocks execute in a top-down manner at page 
  84. render time.  
  85.  
  86. <p>
  87.  
  88. The below example demonstrates how <% %> render blocks can be used to loop over a HTML block (increasing
  89. the font size each time):
  90.  
  91. <p>
  92.  
  93. <Acme:SourceRef 
  94.   RunSample="/quickstart/aspplus/samples/webforms/intro/intro2.aspx" 
  95.   ViewSource="/quickstart/aspplus/samples/webforms/intro/intro2.src"
  96.   Icon="/quickstart/aspplus/images/intro2.gif"
  97.   Caption="Intro2.aspx"
  98.   runat="server" />
  99.  
  100. <p>
  101.  
  102. <b>Important:</b> Unlike ASP, the code used within the above <% %> blocks is <i>compiled</i> -- not interpreted using a script engine.  This
  103. results in improved runtime execution performance. 
  104.  
  105. <p>
  106.  
  107. ASP+ Page developers can utilize <% %> code blocks to dynamically modify HTML output much like they can today with ASP.  For example,
  108. the below sample demonstrates how <% %> code blocks can be used to interpret results posted back from a client.
  109.  
  110. <p>
  111.  
  112. <Acme:SourceRef 
  113.   RunSample="/quickstart/aspplus/samples/webforms/intro/intro3.aspx" 
  114.   ViewSource="/quickstart/aspplus/samples/webforms/intro/intro3.src"
  115.   Icon="/quickstart/aspplus/images/intro3.gif"
  116.   Caption="Intro3.aspx"
  117.   runat="server" />
  118.  
  119. <p>
  120.  
  121. <b>Important:</b> While <% %> code blocks provide a powerful way to custom manipulate the text output returned from a ASP+ Page,
  122. they do not provide much help in providing a clean HTML programming model.  As shown in the sample above, developers
  123. using only <% %> code blocks must custom manage page state between round-trips and custom interpret posted values.
  124.  
  125. <!--BEGIN SECTION-->
  126. <br>
  127. <a name="serverctrls">
  128. <br>
  129. <span class="subhead">Introduction to ASP+ Server Controls</span>
  130. <p>
  131.  
  132. In addition to (or instead of) using <% %> code blocks to program dynamic content, ASP+ Page developers can now leverage <b>ASP+
  133. Server Controls</b> to program web pages.  Server controls are declared within a .aspx file using custom tags that contain a 
  134. <b>runat="server"</b> attribute value.  
  135.  
  136. <p>
  137.  
  138. The below sample uses four server controls: <form runat=server>, <asp:textbox runat=server>, 
  139. <asp:dropdownlist runat=server>, and <asp:button runat=server>.  At runtime these server controls
  140. automatically generate HTML content.  
  141.  
  142. <p>
  143.  
  144. <Acme:SourceRef 
  145.   RunSample="/quickstart/aspplus/samples/webforms/intro/intro4.aspx" 
  146.   ViewSource="/quickstart/aspplus/samples/webforms/intro/intro4.src"
  147.   Icon="/quickstart/aspplus/images/intro4.gif"
  148.   Caption="Intro4.aspx"
  149.   runat="server" />
  150.  
  151. <p>
  152.  
  153. <b>Important:</b> Note that these server controls automatically maintain any client-entered values between round-trips
  154. to the server.  This control state is <u>not</u> stored on the server (it is instead stored within a 
  155. <hidden> form field that is round-tripped between requests).  Note also that no client-side script was
  156. required on the client.
  157.  
  158. <p>
  159.  
  160. In addition to standard HTML input controls, ASP+ enables developers to utilize richer custom controls on their 
  161. pages.  For example, the below sample demonstrates how the <asp:adrotator> control can be used to dynamically
  162. display rotating ads on a page:
  163.  
  164. <p>
  165.  
  166. <Acme:SourceRef 
  167.   RunSample="/quickstart/aspplus/samples/webforms/intro/intro5.aspx" 
  168.   ViewSource="/quickstart/aspplus/samples/webforms/intro/intro5.src"
  169.   Icon="/quickstart/aspplus/images/intro5.gif"
  170.   Caption="Intro5.aspx"
  171.   runat="server" />
  172.  
  173. <p>
  174.  
  175. <b>Important:</b> A detailed listing of all built-in server controls can be found in the "Web Forms Control Reference" section of 
  176. this quickstart. 
  177.  
  178. <!--BEGIN SECTION-->
  179. <br>
  180. <a name="handlingevts">
  181. <br>
  182. <span class="subhead">Handling Server Control Events</span>
  183.  
  184. <p>
  185.  
  186. Each ASP+ Server Control is capable of exposing an object model containing properties, methods and events.  ASP+ developers can
  187. utilize this object model to cleanly modify and interact with the page.
  188.  
  189. <p>
  190.  
  191. The below example demonstrates how a ASP+ Page developer can handle the <b>OnClick</b> event from the <asp:button runat=server>
  192. control to manipulate the "text" property of the <asp:label runat=server> control.
  193.  
  194. <p>
  195.  
  196. <Acme:SourceRef 
  197.   RunSample="/quickstart/aspplus/samples/webforms/intro/intro6.aspx" 
  198.   ViewSource="/quickstart/aspplus/samples/webforms/intro/intro6.src"
  199.   Icon="/quickstart/aspplus/images/intro6.gif"
  200.   Caption="Intro6.aspx"
  201.   runat="server" />
  202.  
  203. <p>
  204.  
  205. This simple sample is functionally equivalent to the "Intro3" sample demonstrated earlier in this section.  Note, however,
  206. how much cleaner and easier the code is with this new server-control based version.
  207.  
  208.  
  209. <!--BEGIN SECTION-->
  210. <br>
  211. <a name="customctrls">
  212. <br>
  213. <span class="subhead">Using Custom Server Controls</span>
  214. <p>
  215.  
  216. ASP+ ships with 45 built-in server controls that can be used out of the box (please review the <a href="webcontrolsref.aspx">Web Forms Controls Reference</a>
  217. section for complete details).  In addition to the built-in ASP+ controls, developers can also leverage controls developed
  218. by third-party vendors.
  219.  
  220. <p> 
  221.  
  222. The below sample demonstrates the use of a simple calendar control.  The calendar control has been declared within the page 
  223. using a <acme:calendar runat=server> tag.  Note that the <% Register %> directive at the top of the page is 
  224. responsible for registering the "Acme" XML tag prefix with the "Acme" code namespace of the control implementation.  The
  225. ASP+ Page Parser will then utilize this namespace to load the calendar control class instance at runtime.  
  226.  
  227. <p>
  228.  
  229. <Acme:SourceRef 
  230.   RunSample="/quickstart/aspplus/samples/webforms/intro/intro7.aspx" 
  231.   ViewSource="/quickstart/aspplus/samples/webforms/intro/intro7.src"
  232.   Icon="/quickstart/aspplus/images/intro7.gif"
  233.   Caption="Intro7.aspx"
  234.   runat="server" />
  235.  
  236. <p>
  237.  
  238. The calendar control in this sample has been designed to work for both "uplevel" and "downlevel" browsers.  For
  239. uplevel browsers it generates DHTML output.  This DHTML output does not require round-trips back to the server when doing
  240. day selections and month navigations.  For downlevel browsers the control generates standard HTML 3.2.  This HTML 3.2 does
  241. require round-trips back to the server to handle client-side user interactions.
  242.  
  243. <p>
  244.  
  245. <b>Important:</b> The code a page developer writes is identical regardless of whether an "uplevel" or "downlevel" browser is
  246. used to access the page.  The calendar control itself encapsulates all of the logic required to handle the two
  247. scenarios.  
  248.  
  249. <!--BEGIN SECTION-->
  250. <br>
  251. <a name="listsanddata">
  252. <br>
  253. <span class="subhead">Lists, Data, and Databinding</span>
  254. <p>
  255.  
  256. ASP+ ships with a built-in set of data  grid and list controls.  These can be used to provide custom UI driven from
  257. queries against a database or other datasource.  For example, the below sample demonstrates how a 
  258. <asp:datagrid runat=server> control can be used to databind book information collected using a SQL database
  259. query:
  260.  
  261. <p>
  262.  
  263. <Acme:SourceRef 
  264.   RunSample="/quickstart/aspplus/samples/webforms/intro/intro75.aspx" 
  265.   ViewSource="/quickstart/aspplus/samples/webforms/intro/intro75.src"
  266.   Icon="/quickstart/aspplus/images/intro75.gif"
  267.   Caption="Intro7.5.aspx"
  268.   runat="server" />
  269.  
  270. <p>
  271.  
  272. The <asp:datagrid runat=server> <b>DataGrid</b> control provides an easy way to quickly display data results using
  273. a traditional grid-control UI.  ASP+ Developers can alternatively use the <asp:DataList runat=server> <b>DataList</b> control
  274. and a custom "ItemTemplate" template to customize data information:
  275.  
  276. <p>
  277.  
  278. <Acme:SourceRef 
  279.   RunSample="/quickstart/aspplus/samples/webforms/intro/intro8.aspx" 
  280.   ViewSource="/quickstart/aspplus/samples/webforms/intro/intro8.src"
  281.   Icon="/quickstart/aspplus/images/intro8.gif"
  282.   Caption="Intro8.aspx"
  283.   runat="server" />
  284.  
  285. <p>
  286.  
  287. Note that the <asp:datalist runat=server> control enables end-users to exactly control the structure
  288. and layout of each item within the list (via the the <b>ItemTemplate</b> template property).  The control also 
  289. automatically handles the two-column wrapping of content (users can control the number of columns using
  290. the <b>Repeatcolumn</b> property on the datalist).
  291.  
  292. <p>
  293.  
  294. An alternate view of the <asp:datalist runat=server> control can be seen with the below sample:
  295.  
  296. <p>
  297.  
  298. <Acme:SourceRef 
  299.   RunSample="/quickstart/aspplus/samples/webforms/intro/intro9.aspx" 
  300.   ViewSource="/quickstart/aspplus/samples/webforms/intro/intro9.src"
  301.   Icon="/quickstart/aspplus/images/intro9.gif"
  302.   Caption="Intro9.aspx"
  303.   runat="server" />
  304.  
  305. <p>
  306.  
  307. Note that the exact same control, datamodel and page user code was used in this example as in the previous.  The
  308. only difference was that alternative templates were declaratively supplied to the code.
  309.  
  310. <!--BEGIN SECTION-->
  311. <br>
  312. <a name="formvalidate">
  313. <br>
  314. <span class="subhead">Form Validation Controls</span>
  315. <p>
  316.  
  317. The ASP+ Web Forms Page framework provides a set of validation server controls that provide an easy-to-use 
  318. but powerful way to check input forms for errors, and if necessary, display messages to the user. 
  319.  
  320. <p>
  321.  
  322. Validation controls are added to a ASP+ Page like other server controls. There are controls for specific types 
  323. of validation, such as range checking or pattern matching, plus a <b>RequiredFieldValidator</b> that ensures a user 
  324. does not skip an entry field.  
  325.  
  326. <p>
  327.  
  328. The below example demonstrates how two <asp:requirefieldvalidator runat=server> controls can be used
  329. on a page to validate the contents of the <b>TextBox</b> and <b>DropDownList</b> controls:
  330.  
  331. <p>
  332.  
  333. <Acme:SourceRef 
  334.   RunSample="/quickstart/aspplus/samples/webforms/intro/intro10.aspx" 
  335.   ViewSource="/quickstart/aspplus/samples/webforms/intro/intro10.src"
  336.   Icon="/quickstart/aspplus/images/intro10.gif"
  337.   Caption="Intro10.aspx"
  338.   runat="server" />
  339.  
  340. <p>
  341.  
  342. Note that the validation controls have both "uplevel" and "downlevel" client support.  Uplevel browsers will
  343. perform validation on the client (using javascript and DHTML).  Downlevel browsers will perform the validation
  344. on the server.  The programming model for both scenarios is identical.
  345.  
  346. <p>
  347.  
  348. Note that ASP+ Page developers can optionally check the <b>Page.IsValid</b> property at runtime to determine whether <u>all</u>
  349. validation server controls on a page are currently valid.  This provides a simple "one line" way to determine
  350. whether or not to proceed with business logic.  For example, the below sample performs a Page.IsValid check before
  351. executing a database lookup on the selected category:
  352.  
  353. <p>
  354.  
  355. <Acme:SourceRef 
  356.   RunSample="/quickstart/aspplus/samples/webforms/intro/intro11.aspx" 
  357.   ViewSource="/quickstart/aspplus/samples/webforms/intro/intro11.src"
  358.   Icon="/quickstart/aspplus/images/intro11.gif"
  359.   Caption="Intro11.aspx"
  360.   runat="server" />
  361.  
  362.  
  363. <!--BEGIN SECTION-->
  364. <br>
  365. <a name="codebehind">
  366. <br>
  367. <span class="subhead">Code-Behind Web Forms</span>
  368. <p>
  369.  
  370. ASP+ supports two methods of authoring dynamic pages.  The first is the method you've seen in the above samples -- 
  371. where the page code is physically declared within the originating .aspx file.  An alternative approach --
  372. known as the <b>Code-behind</b> method -- enables the page code to be more cleanly separated from the HTML content
  373. into a separate file altogether.  
  374.  
  375. <p>
  376.  
  377. The below sample demonstrates the use of the Code-behind method of writing ASP+ Page code:
  378.  
  379. <p>
  380.  
  381. <Acme:SourceRef 
  382.   RunSample="/quickstart/aspplus/samples/webforms/intro/intro12.aspx" 
  383.   ViewSource="/quickstart/aspplus/samples/webforms/intro/intro12.src"
  384.   Icon="/quickstart/aspplus/images/intro12.gif"
  385.   Caption="Intro12.aspx"
  386.   runat="server" />
  387.  
  388. <p>
  389. <!--BEGIN SECTION-->
  390. <a name="endofsection">
  391.  
  392. <h4>Section Summary</h4>
  393. <ol>
  394. <li> ASP+ Web Forms provides an easy and powerful way to build dynamic Web UI
  395. <li> ASP+ Web Form Pages can target any browser client (no script library or cookie requirements)
  396. <li> ASP+ Web Form Pages provides syntax compatibility with existing ASP Pages
  397. <li> ASP+ Server Controls provide an easy way to encapsulate common functionality
  398. <li> ASP+ ships with 45 built-in server controls.  Developers can also use controls built by third-parties
  399. <li> ASP+ Server Controls are capable of automatically projecting both "uplevel" and "downlevel" HTML
  400. <li> ASP+ Templates provide an easy way to customize the look and feel of list server controls
  401. <li> ASP+ Validation controls provide an easy way to do declarative client or server data validation
  402. </ol>
  403. <p>
  404.  
  405. <!-- #include virtual="/quickstart/aspplus/include/footer.inc" -->