jquery+自定义dialog实现弹出div添加数据

来源：互联网发布：一刀流游戏源码编辑：程序博客网时间：2024/06/17 09:06

1)前台代码：

[html] view plain copy
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JSDemo._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 runat="server">  
    <title></title>  
    <!--添加Dialog 的js-->  
    <script language="javascript" src="Dialog/zDrag.js" type="text/javascript"></script>  
    <script language="javascript" src="Dialog/zDialog.js" type="text/javascript"></script>  
    <!--添加JQuery 的js-->  
    <script language="javascript" src="JQuery/jquery-1.4.2.min.js" type="text/javascript"></script>  
    <script language="javascript" type="text/javascript">  
        function ShowAddSearchSource() {  
            //设置Dialog的属性  
            var diag = new Dialog();  
            diag.ShowButtonRow = true;  
            diag.Width = 400;  
            diag.Height = 300;  
            diag.Title = "添加外网搜索源";  
            diag.InvokeElementId = "AddSearchSourcePanel"  
            diag.ShowMessageRow = false;  
            //diag取消按钮触发的事件  
            diag.CancelEvent = function() {  
                window.location.href = window.location.href;  
            }  
            //diag添加按钮触发的事件  
            diag.OKEvent = function() {  
                document.getElementById("lblMessage").innerHTML = "";  
                var title = document.getElementById("txtTitle");  
                var firstStartNode = document.getElementById("txtFirstStartNode");  
                var firstEndNode = document.getElementById("txtFirstEndNode");  
                var secondStartNode = document.getElementById("txtSecondStartNode");  
                var secondEndNode = document.getElementById("txtSecondEndNode");  
                if (title.value == null || firstStartNode.value == "" || firstEndNode.value == "" || secondStartNode.value == "" || secondEndNode.value == "") {  
                    document.getElementById("lblMessage").innerHTML = "请输入完整的外网搜索源!";  
                }  
                else {  
                    //JQuery调用后台代码  
                    $.ajax({  
                        type: "POST",   //访问WebService使用Post方式请求  
                        contentType: "application/json",  
                        url: "default.aspx/AddSearchSource",  
                        data: "{strTitle:'" + title.value + "',strFirstStartNode:'" + firstStartNode.value + "',strFirstEndNode:'" + firstEndNode.value + "',strSecondStartNode:'" + secondStartNode.value + "',strSecondEndNode:'" + secondEndNode.value + "'}",  
                        dataType: 'json',  
                        success: function(result) {//回调函数，result，返回值  
                            if (result.d == true) {  
                                Dialog.alert("添加成功!");  
                                document.getElementById("txtTitle").value = "";  
                                document.getElementById("txtFirstStartNode").value = "";  
                                document.getElementById("txtFirstEndNode").value = "";  
                                document.getElementById("txtSecondStartNode").value = "";  
                                document.getElementById("txtSecondEndNode").value="";  
                            }  
                            else {  
                                Dialog.alert("添加失败!");  
                            }  
                        }  
                    });  
                }  
            }  
            diag.show();  
            diag.okButton.value = "添加";  
            diag.okButton.width = 80;  
            diag.cancelButton.value = "取消";  
            diag.cancelButton.width = 80;  
        }  
    </script>  
</head>  
<body>  
    <form id="form1" runat="server">  
    <div>  
        <asp:Button ID="btnAdd" runat="server" Text="添加" Width="100" OnClientClick="ShowAddSearchSource();return false;"/>  
        <asp:GridView ID="gvwJSDemo" runat="server" CellPadding="4" ForeColor="#333333"   
            GridLines="None" HorizontalAlign="Center" Width="100%" PageSize="20">  
            <RowStyle BackColor="#EFF3FB" HorizontalAlign="Center" />  
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" HorizontalAlign="Center" />  
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />  
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />  
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />  
            <EditRowStyle BackColor="#2461BF" />  
            <AlternatingRowStyle BackColor="White" />  
        </asp:GridView>  
    </div>  
    <!--设置弹出窗口-->  
    <div id="AddSearchSourcePanel" style="display:none">  
        <br /><br />标题:                <input id="txtTitle" type="text" />  
        <br /><br />第一开始节点:<input id="txtFirstStartNode" type="text" />  
        <br /><br />第一结束节点:<input id="txtFirstEndNode" type="text" />  
        <br /><br />第二开始节点:<input id="txtSecondStartNode" type="text" />  
        <br /><br />第二结束节点:<input id="txtSecondEndNode" type="text" />  
        <br /><br /><span id="lblMessage" style="color:Red;" ></span>  
    </div>  
    </form>  
</body>  
</html>  

2)后台代码：

[csharp] view plain copy
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.UI;  
using System.Web.Services;  
using System.Web.UI.WebControls;  
namespace JSDemo  
{  
    public partial class _Default : System.Web.UI.Page  
    {  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            if (!IsPostBack)  
            {  
                BindJSDemo();  
            }  
        }  
        /// <summary>  
        /// 绑定SQL 2005 中数据库TestDemo中JSDemo表到gvwJSDemo  
        /// </summary>  
        private void BindJSDemo()  
        {  
            using (DataClassesDataContext dc = new DataClassesDataContext())  
            {  
                gvwJSDemo.DataSource = dc.JSDemo;  
                gvwJSDemo.DataBind();  
            }  
        }  
        [WebMethod]  
        public static bool AddSearchSource(string strTitle,string strFirstStartNode,string strFirstEndNode,string strSecondStartNode,string strSecondEndNode)  
        {  
            bool flag = false;  
            JSDemo jsdemo=new JSDemo();  
            jsdemo.title=strTitle;  
            jsdemo.firstStartNode=strFirstStartNode;  
            jsdemo.firstEndNode=strFirstEndNode;  
            jsdemo.secondStartNode=strSecondStartNode;  
            jsdemo.secondEndNode=strSecondEndNode;  
            
            using (DataClassesDataContext dc = new DataClassesDataContext())  
            {  
                try  
                {  
                    dc.JSDemo.InsertOnSubmit(jsdemo);  
                    dc.SubmitChanges();  
                    flag = true;  
                }  
                catch (Exception ex)  
                {  
                    flag = false;  
                }  
            }  
            return flag;  
        }  
    }  
}  

0 0