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

最新推荐文章于 2018-10-12 18:38:59 发布

原创最新推荐文章于 2018-10-12 18:38:59 发布 · 4.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #dialog #ajax #ui #function #xhtml

迎接2012 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一个使用ASP.NET和jQuery UI实现的简单用户添加功能。该功能包括一个用于增加新用户的对话框，并通过Ajax向服务器发送数据进行处理。文章提供了完整的代码示例，包括Default.aspx页面、Add.aspx页面及Add.ashx处理程序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、代码

(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;
        }
    }

}

二、效果图