4.[ASP.NET wbfom 三层： 小牛之路-3]： 基于JQuery Ui Dialog实现Ajax提交表单

一、代码

(1)Default2.aspx页面

%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>用户列表</title>  
    <script type="text/javascript" src="JQueryUi/js/jquery-1.6.2.min.js"></script>  
    <script type="text/javascript" src="JQueryUi/js/jquery-ui-1.8.16.custom.min.js"></script>  
    <link type="text/css" rel="Stylesheet" href="JQueryUi/css/ui-lightness/jquery-ui-1.8.16.custom.css" />  
    <script type="text/javascript">  
        $(document).ready(function () {  
            $("#Btn_Add").click(function () {  
                $("#hidediv").dialog({  
                    modal: true,  
                    title: "增加会员",  
                    resizable: false,  
                    bgiframe: true,  
                    open: function () { $("#hidediv").load("Add.aspx") }  
                });  
            })  
        });  
    </script>  
</head>  
<body>  
    <div>  
        <input id="Btn_Add" type="button" value="增加用户"/>  
    </div>  
    <ul>  
    </ul>  
    <div id="hidediv"></div>  
</body>  
</html>

(2)Add.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Add.aspx.cs" Inherits="Add" %>  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title></title>  
       
     <script type="text/javascript">  
         $(document).ready(function () {  
             $("#Submit1").click(function () {  
                 if ($("#Text1").val() == "") {  
                     alert("请输入用户名");  
                     return false;  
                 }  
                 if ($("#Password1").val() == "") {  
                     alert("请输入密码");  
                     return false;  
                 }  
                 if ($("#Select1").val() == "-1") {  
                     alert("请选择性别");  
                     return false;  
                 }  
                 $.ajax({  
                     type: "post",  
                     url: "Add.ashx",  
                     data: "username=" + $("#Text1").val() + "&password=" + $("#Password1").val() + "&sex=" + $("#Select1").val() + "&time=" + function () {  
                         var dt = new Date();  
                         var dts = dt.getYear().toString() + dt.getMonth().toString() + dt.getDay().toString() + dt.getHours().toString() + dt.getMinutes().toString() + dt.getSeconds().toString() + dt.getMilliseconds().toString();  
                         return dts;  
                     } (),  
                     success: function (dt) {  
                         alert(dt);  
                         $("#Submit1").attr("value", "提交").removeAttr("disabled");  
                         $("#Text1").val("");  
                         $("#Password1").val("");  
                         $("#Select1").val("-1");  
                     },  
                     Error: function (dt) {  
                         alert("出错啦！");  
                     },  
                     beforeSend: function (dt) {  
                         $("#Submit1").attr({ "value": "正在提交", "disabled": "disabled" });  
                     }  
  
                 });  
                 return false;  
             })  
         });  
     </script>  
</head>  
<body>  
    <form id="form1" action="">  
    <div>  
        用户名：<input id="Text1" type="text" name="username" />  
        <br />  
        密码：<input id="Password1" type="password" name="password" />  
        <br />  
        性别：  
        <select id="Select1" name="sex">  
            <option value="-1">请选择</option>  
            <option value="0">男</option>  
            <option value="1">女</option>  
        </select>  
        <br />  
        <input id="Submit1" type="submit" value="提交" /><input id="Reset1" type="reset"  
            value="清除" />  
    </div>  
    </form>  
</body>  
</html>

(3)Add.ashx

<%@ WebHandler Language="C#" Class="Add" %>  
  
using System;  
using System.Web;  
  
public class Add : IHttpHandler {  
      
    public void ProcessRequest (HttpContext context) {  
        string username = context.Request.Form["username"].ToString();  
        string password = context.Request.Form["password"].ToString();  
        string sex = context.Request.Form["sex"].ToString();  
        ThreeLevelBLL.Users user = new ThreeLevelBLL.Users();  
        int i = user.UserInsert(new ThreeLevelMODEL.Users(0, username, password, (sex == "0" ? true : false)));  
        if (i > 0)  
        {  
            context.Response.Write("添加成功");  
        }  
        else  
        {  
            context.Response.Write("添加失败");  
        }  
        context.Response.End();  
    }  
   
    public bool IsReusable {  
        get {  
            return false;  
        }  
    }  
  
}

 

posted @ 2016-11-30 15:41  狼牙者.net  阅读(88)  评论(0)  编辑  收藏  举报