细说Form(表单).docx

细说Form(表单)虽然A WebForms框架为了帮助我们简化开发工作，做了很完美的封装，让我们只需要简单地使用服务端控件就可以直接操作那些 HTML表单元素了。但我认为了解一些基础的东西，可以使我们不必束缚在WebForms框架上，以及遇到一些奇怪问题时， 可以更从容地解决它们。今天，我将和大家来聊聊表单，这个简单又基础的东西。我将站在HTML和单纯的A框架的角度来解释它们的工作方式， 因此，本文不演示WebForms服务器控件的相关内容。(/北京网站制作)简单的表单，简单的处理方式好了，让我们进入今天的主题，看看下面这个简单的HTML表单。form action=Handler1.ashx method=post p客户名称: input type=text name=CustomerName style=width: 300px //p p客户电话: input type=text name=CustomerTel style=width: 300px //p pinput type=submit value=提交 //p /form 在这个HTML表单中，我定义了二个文本输入框，一个提交按钮，表单将提交到Handler1.ashx中处理，且以POST的方式。注意哦，如果我们想让纯静态页面也能向服务器提交数据，就可以采用这样方式来处理：将action属性指向一个服务器能处理的地址。说明：当我们使用WebForms的服务器表单控件时，一般都会提交到页面自身来处理(action属性指向当前页面)， 这样可以方便地使用按钮事件以及从服务器控件访问从浏览器提交的控件输入结果。如果在URL重写时，希望能在页面回传时保持URL不变，即：action为重写后的URL，那么可以Page类中执行以下调用：Form.Action = Request.RawUrl; // 受以下版本支持：3.5 SP1、3.0 SP1、2.0 SP1 好了，我们再回到前面那个HTML表单，看一下如果用户点击了“提交”按钮，浏览器是如何把表单的内容发出的。 在此，我们需要Fiddler工具的协助，请在提交表单前启动好Fiddler。我将这个表单的提交请求过程做了如下截图。上图是将要提交的表单的输入情况，下图是用Fiddler看到的浏览器发出的请求内容。在这张图片中，我们可以看到浏览器确实将请求发给了我前面在action中指定的地址，且以POST形式发出的。 表单的二个控件的输入值放在请求体中，且做了【编码】处理，编码的方式用请求头【Content-Type】说明， 这样，当服务端收到请求后，就知道该如何读取请求的内容了。 注意：表单的数据是以name1=value1name2=value2 的形式提交的，其中name,value分别对应了表单控件的相应属性。我们还可以在Fiddler中，将视图切换到WebForms选项卡，这样能更清楚地只查看浏览器提交的数据，如下图。看了客户端的页面和请求的内容，我们再来看看在服务端如何获取浏览器提交的表单的输入吧，代码如下：string name = context.Request.Form[CustomerName]; string tel = context.Request.Form[CustomerTel]; 代码很简单，直接根据表单控件的name属性访问Request.Form就可以了。表单提交，成功控件我们再来看一下浏览器是如何提交表单的，或者说，浏览器在提交表单时，要做哪些事情。浏览器并不是将所有的表单控件全部发送到服务器的，而是会查找所有的【成功控件】，只将这些成功控件的数据发送到服务端， 什么是成功控件呢?简单地来说，成功控件就是：每个表单中的控件都应该有一个name属性和”当前值“， 在提交时，它们将以 name=value 的形式做为提交数据的一部分。对于一些特殊情况，成功控件还有以下规定：1. 控件不能是【禁用】状态，即指定【disabled=disabled】。即：禁用的控件将不是成功控件。2. 如果一个表单包含了多个提交按键，那么仅当用户点击的那个提交按钮才算是成功控件。3. 对于checkbox控件来说，只有被用户勾选的才算是成功控件。4. 对于radio button来说，只有被用户勾选的才算是成功控件。5. 对于select控件来说，所有被选择的选项都做为成功控件，name由select控件提供。6. 对于file上传文件控件来说，如果它包含了选择的文件，那么它将是一个成功控件。此外，浏览器不会考虑Reset按钮以及OBJECT元素。注意：1. 对于checkbox, radio button来说，如果它们被确认为成功控件，但没有为控件指定value属性， 那么在表单提交时，将会以