.NET Programming: Forms & Controls

1. .NET Programming: Forms & Controls Christopher M. Pascucci

2. Web Forms • Forms are the means by which a user can transmit data to the server from the browser. • A form is populated with one or more elements that are called controls. • Examples are the textbox, dropdown, radio button, checkbox, and buttons. • Transmitting data to the server from the client/browser involves 2 concepts: • First is that of controls, which allows the user to enter information, make selections and indicate that data is to be transmitted. • Second are events, which occur during some action (clicking a button) and allow a particular control to connect itself to a function, either on the client-side or server-side. • ASP.NET introduces a different set of form controls, called Web Form Controls (WFC). The original html form elements are called HTML Form Controls (HFC). • HFC Example: <input name=”txtName” type=”textbox”> • WFC Example: <asp:DropdownList id="lstProducts" runat="server">

3. Web Forms & Controls • An aspx page can only contain ONE <form runat="server"> control…! • All server controls must appear within a <form> tag, and the <form> tag must contain the runat="server" attribute. • The runat="server" attribute indicates that the form should be processed on the server. • It also indicates that the enclosed controls can be accessed by server scripts. • An HFC can be converted to exhibit the behavior of a WFC by adding the runat="server" attribute to its HTML control tag. • <input name=”btnSubmit” type=”button” runat=“server”> • ***Only HFCs are subject to being intercepted on the client-side for script processing, such as one would want to do for validation. • WFCs or an HFC that has been converted like the above will submit the form and by pass any possibility of doing any client-side processing. • The client side script can access the content of either an HFC or WFC control.

4. Client-Side Processing • Intercepting a button for function processing. • To intercept a form button with a client script function, the button must be an HTML form control (HFC). It can be done in either of the following ways: • You can use a button with type=“button” attribute of the Input tag and call a client-side script function or the click event of the button. <input type=“button”> • The form action can be invoked within the client script function by the statement formName.submit(), as shown in the code snippet. • If you wish to change the action, you can do it in the function with the statement formName.action = “newURL”, but only if the URL refers to a page that is .htm or .asp. • Transferring to an aspx page from the client script will result in a viewstate error. Aspx transfers can be made in the client script function using the statement window.location.href =”newURL”. Alternatively, aspx transfers can be made on the server-side using either a response.redirector an application.transfer. <script language=vbscript> • Sub myClientProcess() • … • formName.submit() • end Sub </script> <Form name=”formName”> <Input name=”btnClient” onclick=”myClientProcess” type=”button”> OR • <script language=vbscript> • Sub btnClient_onclick() • … • formName.submit() • end Sub • </script> • <Form name=”formName”> • <Input name=”btnClient” type=”button”

5. Client-Side Processing • Referencing the controls from client-side script. • Either type of control (HFC or WFC) can be referenced for processing within a client script function. This is the means by which one can validate data contained in the control. • The control is referenced as formName.controlName.value. • <script language=vbscript> • Sub checkForm() • IfMyForm.txtName.value = “” Then • msgbox(“Name cannot be blank!”) • Else • MyForm.submit() • End If • End Sub • </script> • <form name=”MyForm”> • <input name=”txtName” type=”textbox”> • <input name=”btnClient” onclick=”checkForm” type=”button”>

6. Server-Side Processing • Accessing data from an HFC. • To access an html form control on the server side, use request("controlName") in the aspx page. • To write data back to a web page use response.write(textVariable) or the shorthand format <%= textVariable %> • Accessing data from a WFC or HFC with runat=“server”. • To reference any runat="server" control on the server side, whether it is an HFC or WFC, simply use its object name with an appropriate property. • An HFC control is referenced as ctlName.value, and a WFC control is referenced as controlName.text. • The following table summarizes the above cases for access of controls on both the client and server sides, the method is given for ctlName.method

7. Server-Side Processing • Activating a function on the server-side from a button control with runat=“server. With a CodeBehind • You can double click on the button control in design mode. It will automatically create a Private function in the Code Behind named controlName_Click with phrase Handles controlName.Click afterward. • You can place an attribute OnClick="functionName()" in the button's tag, it will call a function Public functionName() in the codeBehind, when the button is clicked. You do not need the Handles btnResetTable.Click phrase. Without a CodeBehind • Code in script tag • <script language="vbscript" runat="server"> • Sub Answer_Click (ByVal sender As System.Object, ByVal e As System.EventArgs) • [Insert code of the Sub] • End Sub • </script> • <asp:Button id="btnAnswer" OnClick="Answer_Click" runat=”server”… </asp:Button>

8. More on HTML Controls • The expression Request("controlName") accesses the data in the control named controlName on the server-side from the form that was submitted on the client side. • This can be used in the ASPX page as script or in the Code Behind. • If no control with the name controlName has been submitted, then "" (blank string) is returned. This can happen in the following circumstances: • No such name exists on the form. • If all checkboxes or radio buttons with that name are unchecked. • If a textbox with that name has "“ (empty string) in it. • For more info on Form controls refer to the class website page on Forms & Controls Demo Code of ASPX page