jquery+自定义dialog实现弹出div添加数据
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;
}
}
}