1.aspx页面部分
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Add.aspx.cs" Inherits="Web.User.Add" %> <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"> <title>添加用户信息</title> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <div id="content" region="center" title="添加用户" style="padding: 5px;"> <div id="myDiv" class="easyui-panel" style="width: 100%; height: 100%; padding: 30px 60px; margin: 0 auto;"> <form id="ff" method="post"> <div style="margin-bottom: 20px"> <input id="uid" class="easyui-textbox" name="用户编号" type="text" style="width: 100%" data-options="label:'用户编号:',required:true"> </div> <div style="margin-bottom: 20px"> <input id="uname" class="easyui-textbox" name="用户名" style="width: 100%" data-options="label:'用户名:',required:true"> </div> <div style="margin-bottom: 20px"> <input id="upassword" class="easyui-textbox" name="密码" style="width: 100%" data-options="label:'密码:',required:true"> </div> <div style="margin-bottom: 20px"> <input id="email" class="easyui-textbox" name="电子邮箱" style="width: 100%" data-options="label:'电子邮箱:',required:true,validType:'email'"> </div> <div style="margin-bottom: 20px"> <input id="phonenumber" class="easyui-textbox" name="电话号码" style="width: 100%" data-options="label:'电话号码:',required:true"> </div> <div style="margin-bottom: 20px"> <select id="jt" class="easyui-combobox" name="集团名称" label="所属集团" style="width: 100%"> <option value="-1" selected="selected">请选择</option> </select> </div> <div style="margin-bottom: 20px"> <select id="gc" class="easyui-combobox" name="工厂名称" label="所属工厂" style="width: 100%"> <option value="-1" selected="selected">请选择</option> </select> </div> <div style="margin-bottom: 20px"> <select id="role" class="easyui-combobox" name="角色" label="角色" style="width: 100%"> <option value="-1" selected="selected">请选择</option> </select> </div> <div style="text-align: center; padding: 5px 0"> <input type="submit" class="easyui-linkbutton" style="width: 80px; height: 30px;" value="添加"> <input type="reset" class="easyui-linkbutton" style="width: 80px; height: 30px;" value="清空"> </div> </form> </div> <script type="text/javascript"> //jquery的easyui进行自动验证的方法 $('#ff').form({ url: '/User/UserHandler.ashx', //当表单无效时停止提交 onSubmit: function () { return $(this).form('validate'); }, success: function (data) { //弹出漂亮的弹出框(信息框) $.messager.alert('Info', data, 'info'); } }); </script> </div> </asp:Content>
和之前不同使用ajax异步提交表单,并且自己进行数据验证相比,这种方式更加简洁。
2.ashx后台处理程序
using System; using System.Collections.Generic; using System.Linq; using System.Web; using Model; namespace Web.User { /// <summary> /// UserHandler 的摘要说明 /// </summary> public class UserHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { // 如果表单是以 POST 方式提交的,则服务器端必须以 context.Request.Form[name] 或者 context.Request[name] 来获取; // 表单元素必须要有 name 属性,因为Form[] 中的索引就是 name 属性的值; // 注意: ajax提交请求时,需要设置data属性,后台才能够接收到表单中的数据, // 例如 data: $('#ff').serialize() 代表将form表单中的数据序列化传输。 //string userName = context.Request.Form["txt"]; //string userPwd = context.Request.Form["pwd"]; // 如果表单元素以 GET 方式提交,则服务器端必须以 Request.QueryString[] 来获取,索引仍是name属性的值。 // 以 GET 方式提交的时候,会在浏览器的地址栏显示提交的内容。 //string userName = context.Request.QueryString["txt"]; //string userPwd = context.Request.QueryString["pwd"]; UserInfo user1 = new UserInfo(); user1.Id = context.Request.Form["用户编号"]; user1.Name = context.Request.Form["用户名"]; user1.Password = context.Request.Form["密码"]; user1.Email = context.Request.Form["电子邮箱"]; user1.Phonenumber = context.Request.Form["电话号码"]; context.Response.ContentType = "text/plain"; context.Response.Write(user1.ToString()); } public bool IsReusable { get { return false; } } } }和之前的ajax异步提交表单没有区别。