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

1)前台代码:

[html]  view plain  copy
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JSDemo._Default" %>  
  2. >  
  3. <html xmlns="http://www.w3.org/1999/xhtml" >  
  4. <head runat="server">  
  5.     <title>title>  
  6.       
  7.     <script language="javascript" src="Dialog/zDrag.js" type="text/javascript">script>  
  8.     <script language="javascript" src="Dialog/zDialog.js" type="text/javascript">script>  
  9.       
  10.     <script language="javascript" src="JQuery/jquery-1.4.2.min.js" type="text/javascript">script>  
  11.     <script language="javascript" type="text/javascript">  
  12.         function ShowAddSearchSource() {  
  13.             //设置Dialog的属性  
  14.             var diag = new Dialog();  
  15.             diag.ShowButtonRow = true;  
  16.             diag.Width = 400;  
  17.             diag.Height = 300;  
  18.             diag.Title = "添加外网搜索源";  
  19.             diag.InvokeElementId = "AddSearchSourcePanel"  
  20.             diag.ShowMessageRow = false;  
  21.             //diag取消按钮触发的事件  
  22.             diag.CancelEvent = function() {  
  23.                 window.location.href = window.location.href;  
  24.             }  
  25.             //diag添加按钮触发的事件  
  26.             diag.OKEvent = function() {  
  27.                 document.getElementById("lblMessage").innerHTML = "";  
  28.                 var title = document.getElementById("txtTitle");  
  29.                 var firstStartNode = document.getElementById("txtFirstStartNode");  
  30.                 var firstEndNode = document.getElementById("txtFirstEndNode");  
  31.                 var secondStartNode = document.getElementById("txtSecondStartNode");  
  32.                 var secondEndNode = document.getElementById("txtSecondEndNode");  
  33.                 if (title.value == null || firstStartNode.value == "" || firstEndNode.value == "" || secondStartNode.value == "" || secondEndNode.value == "") {  
  34.                     document.getElementById("lblMessage").innerHTML = "请输入完整的外网搜索源!";  
  35.                 }  
  36.                 else {  
  37.                     //JQuery调用后台代码  
  38.                     $.ajax({  
  39.                         type: "POST",   //访问WebService使用Post方式请求  
  40.                         contentType: "application/json",  
  41.                         url: "default.aspx/AddSearchSource",  
  42.                         data: "{strTitle:'" + title.value + "',strFirstStartNode:'" + firstStartNode.value + "',strFirstEndNode:'" + firstEndNode.value + "',strSecondStartNode:'" + secondStartNode.value + "',strSecondEndNode:'" + secondEndNode.value + "'}",  
  43.                         dataType: 'json',  
  44.                         success: function(result) {//回调函数,result,返回值  
  45.                             if (result.d == true) {  
  46.                                 Dialog.alert("添加成功!");  
  47.                                 document.getElementById("txtTitle").value = "";  
  48.                                 document.getElementById("txtFirstStartNode").value = "";  
  49.                                 document.getElementById("txtFirstEndNode").value = "";  
  50.                                 document.getElementById("txtSecondStartNode").value = "";  
  51.                                 document.getElementById("txtSecondEndNode").value="";  
  52.                             }  
  53.                             else {  
  54.                                 Dialog.alert("添加失败!");  
  55.                             }  
  56.                         }  
  57.                     });  
  58.                 }  
  59.             }  
  60.             diag.show();  
  61.             diag.okButton.value = "添加";  
  62.             diag.okButton.width = 80;  
  63.             diag.cancelButton.value = "取消";  
  64.             diag.cancelButton.width = 80;  
  65.         }  
  66.     script>  
  67. head>  
  68. <body>  
  69.     <form id="form1" runat="server">  
  70.     <div>  
  71.         <asp:Button ID="btnAdd" runat="server" Text="添加" Width="100" OnClientClick="ShowAddSearchSource();return false;"/>  
  72.         <asp:GridView ID="gvwJSDemo" runat="server" CellPadding="4" ForeColor="#333333"   
  73.             GridLines="None" HorizontalAlign="Center" Width="100%" PageSize="20">  
  74.             <RowStyle BackColor="#EFF3FB" HorizontalAlign="Center" />  
  75.             <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" HorizontalAlign="Center" />  
  76.             <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />  
  77.             <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />  
  78.             <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />  
  79.             <EditRowStyle BackColor="#2461BF" />  
  80.             <AlternatingRowStyle BackColor="White" />  
  81.         asp:GridView>  
  82.     div>  
  83.       
  84.     <div id="AddSearchSourcePanel" style="display:none">  
  85.         <br /><br />标题:                <input id="txtTitle" type="text" />  
  86.         <br /><br />第一开始节点:<input id="txtFirstStartNode" type="text" />  
  87.         <br /><br />第一结束节点:<input id="txtFirstEndNode" type="text" />  
  88.         <br /><br />第二开始节点:<input id="txtSecondStartNode" type="text" />  
  89.         <br /><br />第二结束节点:<input id="txtSecondEndNode" type="text" />  
  90.         <br /><br /><span id="lblMessage" style="color:Red;" >span>  
  91.     div>  
  92.     form>  
  93. body>  
  94. html>  

2)后台代码:

[csharp]  view plain  copy
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.Services;  
  7. using System.Web.UI.WebControls;  
  8. namespace JSDemo  
  9. {  
  10.     public partial class _Default : System.Web.UI.Page  
  11.     {  
  12.         protected void Page_Load(object sender, EventArgs e)  
  13.         {  
  14.             if (!IsPostBack)  
  15.             {  
  16.                 BindJSDemo();  
  17.             }  
  18.         }  
  19.         ///   
  20.         /// 绑定SQL 2005 中数据库TestDemo中JSDemo表到gvwJSDemo  
  21.         ///   
  22.         private void BindJSDemo()  
  23.         {  
  24.             using (DataClassesDataContext dc = new DataClassesDataContext())  
  25.             {  
  26.                 gvwJSDemo.DataSource = dc.JSDemo;  
  27.                 gvwJSDemo.DataBind();  
  28.             }  
  29.         }  
  30.         [WebMethod]  
  31.         public static bool AddSearchSource(string strTitle,string strFirstStartNode,string strFirstEndNode,string strSecondStartNode,string strSecondEndNode)  
  32.         {  
  33.             bool flag = false;  
  34.             JSDemo jsdemo=new JSDemo();  
  35.             jsdemo.title=strTitle;  
  36.             jsdemo.firstStartNode=strFirstStartNode;  
  37.             jsdemo.firstEndNode=strFirstEndNode;  
  38.             jsdemo.secondStartNode=strSecondStartNode;  
  39.             jsdemo.secondEndNode=strSecondEndNode;  
  40.             
  41.             using (DataClassesDataContext dc = new DataClassesDataContext())  
  42.             {  
  43.                 try  
  44.                 {  
  45.                     dc.JSDemo.InsertOnSubmit(jsdemo);  
  46.                     dc.SubmitChanges();  
  47.                     flag = true;  
  48.                 }  
  49.                 catch (Exception ex)  
  50.                 {  
  51.                     flag = false;  
  52.                 }  
  53.             }  
  54.             return flag;  
  55.         }  
  56.     }  
  57. }  

你可能感兴趣的:(js实用功能)