Form is the most important source of information for every WEB developer to interact with the WEB server. Although the Asp.net WebForms framework has made perfect encapsulation to help us simplify development, we can simply use the server-side controls to directly operate those HTML form elements. However, I think that understanding some basic things can make it easier to solve WebForms frameworks and some strange problems. However, the development in asp.net makes it impossible for us to go deep into the form. (Normally, we need to write the server Control in the from field and add runat = "server ")
<form id="form1" runat="server"> <div> <asp:Label ID="lb1" runat="server"></asp:Label> </div> </form>
But how does one operate from in html?
<Form action = "Handler1.ashx" method = "post"> <p> CUSTOMER name: <input type = "text" name = "CustomerName" style = "width: 300px "/> </p> <p> customer's phone number: <input type =" text "name =" CustomerTel "style =" width: 300px "/> </p> <input type =" submit "value =" submit "/> </p>
In this image, we can see that the browser actually sent the request to the address specified in the action before and sent it in POST format. The input values of the two controls in the form are placed in the Request body and [encoding] is performed. The encoding method is described by the request header Content-Type. In this way, when the server receives the request, you will know how to read the requested content. Note: The form data is submitted in the form of name1 = value1 & name2 = value2, where name and value correspond to the corresponding attributes of the Form Control.
Submission method:In the previous sample code, I specified method = "post" for form. This submission method determines how the browser transmits the data when submitting the data.
If it is [post], the form data will be sent out in the Request body.
If it is get, the form data will be appended to the query string and submitted to the server as a query string.
Suggestion: it is better to submit a form in post mode, so that the URL is not damaged and the URL length is limited.
Data Encoding:Previously, I used Fiddler to describe the request details of the browser. From this figure, we can see that the content entered by the control is not directly sent, but is processed by a encoding rule. Currently, only two encoding rules are used: application/x-www-form-urlencoded (default) and multipart/form-data. When receiving the message, the server is told how to read the data.
On the receiving page, we can access Request. Form through the name attribute of the Form Control.
Using System; using System. collections. generic; using System. linq; using System. web; namespace test2 {// <summary> // summary of Handler1 /// </summary> public class Handler1: IHttpHandler {public void ProcessRequest (HttpContext context) {string name = context. request. form ["CustomerName"]; string tel = context. request. form ["CustomerTel"]; context. response. contentType = "text/plain"; context. response. write (name + ":" + tel);} public bool IsReusable {get {return false ;}}}}
Running result:
lingx:112233
What data will be submitted when a form is submitted?
The browser does not send all form controls to the server, but searches for all 【Successful Control]. Only data of these successful controls is sent to the server. What is a successful control?
To put it simply, the successful control means that each control in the form should have a name attribute and "current value". When submitting, they are used as part of the submitted data in the form of name = value.
In some special cases, the successful control also has the following rules:
1. The control cannot be in the disabled status, that is, specify disabled = "disabled "]. That is, the disabled control is not a successful control.
2. If a form contains multiple submission buttons, only the submitted button clicked by the user is a successful control.
3. For the checkbox control, the control is successful only when it is selected by the user.
4. For the radio button, only the control selected by the user is successful.
5. For the select control, all selected options are used as the success control, and the name is provided by the select Control.
6. For the file Upload control, if it contains the selected file, it will be a successful control.
In addition, the browser does not consider Reset buttons and OBJECT elements.
How do I submit a form?
Click button in form to submit the form! When there are multiple buttons, how can we determine the use of each button?
Method 1:According to the definition of the "successful control", we set the button name, and use the name on the server to identify which button is submitted:
HTML code
<Form action = "Handler1.ashx" method = "post"> <p> CUSTOMER name: <input type = "text" name = "CustomerName" style = "width: 300px "/> </p> <p> customer's phone number: <input type =" text "name =" CustomerTel "style =" width: 300px "/> </p> <input type =" submit "name =" btnSave "value =" save "/> <input type =" submit "name =" btnQuery "value =" query "/> </p>
Server processing code
Using System; using System. collections. generic; using System. linq; using System. web; namespace test2 {// <summary> // summary of Handler1 /// </summary> public class Handler1: IHttpHandler {public void ProcessRequest (HttpContext context) {if (string. isNullOrEmpty (context. request. form ["btnSave"]) = false) {// The stored processing logic string name = context. request. form ["CustomerName"]; string tel = context. request. form ["CustomerTel"]; context. response. contentType = "text/plain"; context. response. write (name + ":" + tel);} if (string. isNullOrEmpty (context. request. form ["btnQuery"]) = false) {// query processing logic context. response. write ("btnQuery") ;}} public bool IsReusable {get {return false ;}}}}
Method 2:I set the name of the two buttons to the same value (based on the previous successful control rule, only the clicked button will be submitted) and judge the value on the server. The sample code is as follows:
<Form action = "Handler1.ashx" method = "post"> <p> CUSTOMER name: <input type = "text" name = "CustomerName" style = "width: 300px "/> </p> <p> customer's phone number: <input type =" text "name =" CustomerTel "style =" width: 300px "/> </p> <input type =" submit "name =" submit "value =" save "/> <input type =" submit "name =" submit "value =" query "/> </p>
String action = context. request. form ["submit"]; if (action = "save") {// The stored processing logic} else if (action = "query ") {// query processing logic}