迎接2012之基于JQuery Ui Dialog实现Ajax提交表单

来源：互联网发布：178剑网3脸型数据库编辑：程序博客网时间：2024/05/16 11:00

一、代码

(1)Default.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;        }    }}

二、效果图

三、代码都是基于上篇博文来写的，可能会有错误，尚未仔细测试。需要自己下载Jquery Ui，页面未CSS布局，只为了实现功能！