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

最新推荐文章于 2020-11-24 15:28:13 发布

原创最新推荐文章于 2020-11-24 15:28:13 发布 · 1w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #自定义div

jquery 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何使用ASP.NET和jQuery实现一个带有输入验证的弹出窗口功能，并通过Ajax调用后台服务完成数据提交。

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

1)前台代码：

<%@ 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)后台代码：

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