【原创】 Ajax之ModalPopup编程实例
来源：互联网 发布：郑州办公软件培训班 编辑：程序博客网 时间：2024/04/30 10:59
以下是我最近做项目的时候遇到了关于ModalPopup的使用实例，解决了一些技术难题，详细见源代码
解决了打开网页的时候ModalPopup闪烁出现的现象，以及TargetControlID后台代码不被执行的问题。
-
-
前台代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.PanelBorder {
border: 3px solid #0000CC;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<br />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1"
PopupControlID="pnlDepart" CancelControlID="imgClose">
</ajaxToolkit:ModalPopupExtender>
<center>
<div>
<div>
<div style="width: 680px; height: 30px; background-color: #507CD1; padding-top: 8px;
padding-left: 20px; text-align: left">
<strong><font color="white">查询条件</font></strong></div>
<div style="width: 700px; height: auto">
<table>
<tr>
<td style="width: 80px; height: 26px;" align="right">
科室编码</td>
<td style="width: 100px; height: 26px;" align="left">
<asp:TextBox ID="txtDepartIDFind" runat="server" Width="80px"></asp:TextBox></td>
<td style="width: 80px; height: 26px;" align="right">
科室名称</td>
<td style="width: 120px; height: 26px;" align="left">
<asp:TextBox ID="txtDepartNameFind" runat="server" Width="100px"></asp:TextBox></td>
<td style="width: 320px; height: 26px;" align="center">
<asp:Button ID="btnAdd" runat="server" Text="添加科室" OnClick="btnAdd_Click" /><asp:Button
ID="btnQuery" runat="server" Text="查询" OnClick="btnQuery_Click" />
<asp:Button ID="Button1" runat="server" Text="Button" Style="display: none" /></td>
</tr>
</table>
</div>
</div>
<div>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
ForeColor="#333333" GridLines="None" Width="700px">
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#EFF3FB" />
<Columns>
<asp:BoundField DataField="DepartID" HeaderText="科室编码">
<HeaderStyle Width="80px" />
</asp:BoundField>
<asp:BoundField DataField="DepartName" HeaderText="科室名称">
<HeaderStyle HorizontalAlign="Left" Width="200px" />
<ItemStyle HorizontalAlign="Left" />
</asp:BoundField>
<asp:BoundField DataField="SortID" HeaderText="排序编码">
<HeaderStyle Width="80px" />
</asp:BoundField>
<asp:BoundField DataField="State" HeaderText="状态">
<HeaderStyle Width="80px" />
</asp:BoundField>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btnModify" runat="server" Text="修改" OnClick="btnModify_Click" />
</ItemTemplate>
<HeaderStyle Width="80px" />
</asp:TemplateField>
<asp:CommandField ShowDeleteButton="True">
<HeaderStyle Width="80px" />
</asp:CommandField>
</Columns>
<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>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ID="pnlDepart" runat="server" Height="150px" Width="400px" CssClass="PanelBorder"
Style="display: none" BackColor="White">
<div style="width: 100%; height: 30px; background-image: url(Images/Title.jpg)">
<div style="float: left; padding-top: 5px; padding-left: 10px">
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<asp:Label ID="lblCaption" runat="server" Text="Label" Font-Bold="True" ForeColor="White"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div style="float: right; padding-top: 2px; padding-right: 3px">
<asp:ImageButton ID="imgClose" runat="server" ImageUrl="~/Images/Close.JPG" /></div>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="width: 400px; height: 120px; vertical-align: middle;">
<br />
<table>
<tr>
<td>
科室编码</td>
<td>
<asp:TextBox ID="txtDepartID" runat="server" Width="100px"></asp:TextBox></td>
<td>
科室名称</td>
<td>
<asp:TextBox ID="txtDepartName" runat="server" Width="100px"></asp:TextBox></td>
</tr>
<tr>
<td>
排序编码</td>
<td>
<asp:TextBox ID="txtSortID" runat="server" Width="100px"></asp:TextBox></td>
<td>
状态</td>
<td>
<asp:DropDownList ID="ddlState" runat="server" Width="105px">
<asp:ListItem>使用</asp:ListItem>
<asp:ListItem>关闭</asp:ListItem>
</asp:DropDownList></td>
</tr>
<tr>
<td align="center" colspan="4">
<asp:Button ID="btnSave" runat="server" Text="保存" OnClick="btnSave_Click" /></td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</div>
</div>
</center>
</form>
</body>
</html>
后台代码：
using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack) BindData();
}
//GridView绑定
private void BindData()
{
this.GridView1.DataSource = RunQuery("Select * From DepartInfo Where 1=1 "+GetCon()+" Order by SortID").DefaultView;
this.GridView1.DataBind();
}
private string GetCon()
{
string sCon = "";
if (!this.txtDepartIDFind.Text.Trim().Equals(""))
{
sCon = " And DepartID Like '%" + this.txtDepartIDFind.Text + "%' ";
}
if (!this.txtDepartNameFind.Text.Trim().Equals(""))
{
sCon = " And DepartName Like '%" + this.txtDepartNameFind.Text + "%' ";
}
return sCon;
}
//查询方法
private DataTable RunQuery(string sSQL)
{
SqlConnection con = new SqlConnection("server=.;uid=sa; pwd=; database=pubs");
SqlDataAdapter da = new SqlDataAdapter(sSQL, con);
DataSet ds = new DataSet();
da.Fill(ds);
if (ds.Tables.Count > 0)
{
return ds.Tables[0];
}
else
{
return null;
}
}
//执行SQL语句
private void RunExec(string sSQL)
{
SqlConnection con = new SqlConnection("server=.;uid=sa; pwd=; database=pubs");
con.Open();
SqlCommand cmd = con.CreateCommand();
cmd.CommandText = sSQL;
cmd.CommandType = CommandType.Text;
cmd.ExecuteNonQuery();
con.Close();
}
protected void btnQuery_Click(object sender, EventArgs e)
{
BindData();
}
protected void btnSave_Click(object sender, EventArgs e)
{
if (this.txtDepartID.ReadOnly)
{
string sSQL = "UpDate DepartInfo Set DepartName='"+this.txtDepartName.Text+"', SortID="+
this.txtSortID.Text + ",State='" + this.ddlState.SelectedValue +
"' Where DepartID='"+this.txtDepartID.Text+"'";
RunExec(sSQL);
BindData();
this.ModalPopupExtender1.Hide();
}
else
{
string sSQL = "Insert DepartInfo(DepartID, DepartName, SortID, State) " +
"Values('" + this.txtDepartID.Text + "','" + this.txtDepartName.Text + "'," +
this.txtSortID.Text + ",'" + this.ddlState.SelectedValue + "')";
RunExec(sSQL);
BindData();
this.txtDepartID.Text = "";
this.txtDepartName.Text = "";
this.txtSortID.Text = "";
this.ddlState.SelectedIndex = 0;
}
}
protected void btnAdd_Click(object sender, EventArgs e)
{
this.lblCaption.Text = "添加科室";
this.txtDepartID.Text = "";
this.txtDepartName.Text = "";
this.txtSortID.Text = "";
this.ddlState.SelectedIndex = 0;
this.txtDepartID.ReadOnly = false;
this.ModalPopupExtender1.Show();
}
protected void btnModify_Click(object sender, EventArgs e)
{
this.lblCaption.Text = "修改科室";
GridViewRow gvr = ((Button)sender).Parent.Parent as GridViewRow;
this.txtDepartID.Text = gvr.Cells[0].Text;
this.txtDepartName.Text = gvr.Cells[1].Text;
this.txtSortID.Text = gvr.Cells[2].Text;
this.ddlState.SelectedIndex = this.ddlState.Items.IndexOf(this.ddlState.Items.FindByText(gvr.Cells[3].Text));
this.txtDepartID.ReadOnly = true;
this.ModalPopupExtender1.Show();
}
}
数据库建库脚本
use pubs
if exists (select * from sysobjects where name='DepartInfo')
drop table DepartInfo
GO
Create Table DepartInfo(
DepartID varchar(20),
DepartName varchar(60),
SortID int,
State varchar(4))
GO
以上只是一个能解决实际技术问题的演示实例，当然还有好多功能没有一一实现（例如删除），当然那些都很简单了，有兴趣的朋友可以完善一下。
前台代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.PanelBorder {
border: 3px solid #0000CC;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<br />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1"
PopupControlID="pnlDepart" CancelControlID="imgClose">
</ajaxToolkit:ModalPopupExtender>
<center>
<div>
<div>
<div style="width: 680px; height: 30px; background-color: #507CD1; padding-top: 8px;
padding-left: 20px; text-align: left">
<strong><font color="white">查询条件</font></strong></div>
<div style="width: 700px; height: auto">
<table>
<tr>
<td style="width: 80px; height: 26px;" align="right">
科室编码</td>
<td style="width: 100px; height: 26px;" align="left">
<asp:TextBox ID="txtDepartIDFind" runat="server" Width="80px"></asp:TextBox></td>
<td style="width: 80px; height: 26px;" align="right">
科室名称</td>
<td style="width: 120px; height: 26px;" align="left">
<asp:TextBox ID="txtDepartNameFind" runat="server" Width="100px"></asp:TextBox></td>
<td style="width: 320px; height: 26px;" align="center">
<asp:Button ID="btnAdd" runat="server" Text="添加科室" OnClick="btnAdd_Click" /><asp:Button
ID="btnQuery" runat="server" Text="查询" OnClick="btnQuery_Click" />
<asp:Button ID="Button1" runat="server" Text="Button" Style="display: none" /></td>
</tr>
</table>
</div>
</div>
<div>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
ForeColor="#333333" GridLines="None" Width="700px">
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#EFF3FB" />
<Columns>
<asp:BoundField DataField="DepartID" HeaderText="科室编码">
<HeaderStyle Width="80px" />
</asp:BoundField>
<asp:BoundField DataField="DepartName" HeaderText="科室名称">
<HeaderStyle HorizontalAlign="Left" Width="200px" />
<ItemStyle HorizontalAlign="Left" />
</asp:BoundField>
<asp:BoundField DataField="SortID" HeaderText="排序编码">
<HeaderStyle Width="80px" />
</asp:BoundField>
<asp:BoundField DataField="State" HeaderText="状态">
<HeaderStyle Width="80px" />
</asp:BoundField>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btnModify" runat="server" Text="修改" OnClick="btnModify_Click" />
</ItemTemplate>
<HeaderStyle Width="80px" />
</asp:TemplateField>
<asp:CommandField ShowDeleteButton="True">
<HeaderStyle Width="80px" />
</asp:CommandField>
</Columns>
<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>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ID="pnlDepart" runat="server" Height="150px" Width="400px" CssClass="PanelBorder"
Style="display: none" BackColor="White">
<div style="width: 100%; height: 30px; background-image: url(Images/Title.jpg)">
<div style="float: left; padding-top: 5px; padding-left: 10px">
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<asp:Label ID="lblCaption" runat="server" Text="Label" Font-Bold="True" ForeColor="White"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div style="float: right; padding-top: 2px; padding-right: 3px">
<asp:ImageButton ID="imgClose" runat="server" ImageUrl="~/Images/Close.JPG" /></div>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="width: 400px; height: 120px; vertical-align: middle;">
<br />
<table>
<tr>
<td>
科室编码</td>
<td>
<asp:TextBox ID="txtDepartID" runat="server" Width="100px"></asp:TextBox></td>
<td>
科室名称</td>
<td>
<asp:TextBox ID="txtDepartName" runat="server" Width="100px"></asp:TextBox></td>
</tr>
<tr>
<td>
排序编码</td>
<td>
<asp:TextBox ID="txtSortID" runat="server" Width="100px"></asp:TextBox></td>
<td>
状态</td>
<td>
<asp:DropDownList ID="ddlState" runat="server" Width="105px">
<asp:ListItem>使用</asp:ListItem>
<asp:ListItem>关闭</asp:ListItem>
</asp:DropDownList></td>
</tr>
<tr>
<td align="center" colspan="4">
<asp:Button ID="btnSave" runat="server" Text="保存" OnClick="btnSave_Click" /></td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</div>
</div>
</center>
</form>
</body>
</html>
后台代码：
using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack) BindData();
}
//GridView绑定
private void BindData()
{
this.GridView1.DataSource = RunQuery("Select * From DepartInfo Where 1=1 "+GetCon()+" Order by SortID").DefaultView;
this.GridView1.DataBind();
}
private string GetCon()
{
string sCon = "";
if (!this.txtDepartIDFind.Text.Trim().Equals(""))
{
sCon = " And DepartID Like '%" + this.txtDepartIDFind.Text + "%' ";
}
if (!this.txtDepartNameFind.Text.Trim().Equals(""))
{
sCon = " And DepartName Like '%" + this.txtDepartNameFind.Text + "%' ";
}
return sCon;
}
//查询方法
private DataTable RunQuery(string sSQL)
{
SqlConnection con = new SqlConnection("server=.;uid=sa; pwd=; database=pubs");
SqlDataAdapter da = new SqlDataAdapter(sSQL, con);
DataSet ds = new DataSet();
da.Fill(ds);
if (ds.Tables.Count > 0)
{
return ds.Tables[0];
}
else
{
return null;
}
}
//执行SQL语句
private void RunExec(string sSQL)
{
SqlConnection con = new SqlConnection("server=.;uid=sa; pwd=; database=pubs");
con.Open();
SqlCommand cmd = con.CreateCommand();
cmd.CommandText = sSQL;
cmd.CommandType = CommandType.Text;
cmd.ExecuteNonQuery();
con.Close();
}
protected void btnQuery_Click(object sender, EventArgs e)
{
BindData();
}
protected void btnSave_Click(object sender, EventArgs e)
{
if (this.txtDepartID.ReadOnly)
{
string sSQL = "UpDate DepartInfo Set DepartName='"+this.txtDepartName.Text+"', SortID="+
this.txtSortID.Text + ",State='" + this.ddlState.SelectedValue +
"' Where DepartID='"+this.txtDepartID.Text+"'";
RunExec(sSQL);
BindData();
this.ModalPopupExtender1.Hide();
}
else
{
string sSQL = "Insert DepartInfo(DepartID, DepartName, SortID, State) " +
"Values('" + this.txtDepartID.Text + "','" + this.txtDepartName.Text + "'," +
this.txtSortID.Text + ",'" + this.ddlState.SelectedValue + "')";
RunExec(sSQL);
BindData();
this.txtDepartID.Text = "";
this.txtDepartName.Text = "";
this.txtSortID.Text = "";
this.ddlState.SelectedIndex = 0;
}
}
protected void btnAdd_Click(object sender, EventArgs e)
{
this.lblCaption.Text = "添加科室";
this.txtDepartID.Text = "";
this.txtDepartName.Text = "";
this.txtSortID.Text = "";
this.ddlState.SelectedIndex = 0;
this.txtDepartID.ReadOnly = false;
this.ModalPopupExtender1.Show();
}
protected void btnModify_Click(object sender, EventArgs e)
{
this.lblCaption.Text = "修改科室";
GridViewRow gvr = ((Button)sender).Parent.Parent as GridViewRow;
this.txtDepartID.Text = gvr.Cells[0].Text;
this.txtDepartName.Text = gvr.Cells[1].Text;
this.txtSortID.Text = gvr.Cells[2].Text;
this.ddlState.SelectedIndex = this.ddlState.Items.IndexOf(this.ddlState.Items.FindByText(gvr.Cells[3].Text));
this.txtDepartID.ReadOnly = true;
this.ModalPopupExtender1.Show();
}
}
数据库建库脚本
use pubs
if exists (select * from sysobjects where name='DepartInfo')
drop table DepartInfo
GO
Create Table DepartInfo(
DepartID varchar(20),
DepartName varchar(60),
SortID int,
State varchar(4))
GO
以上只是一个能解决实际技术问题的演示实例，当然还有好多功能没有一一实现（例如删除），当然那些都很简单了，有兴趣的朋友可以完善一下。
- 【原创】 Ajax之ModalPopup编程实例
- ModalPopup控件实例
- Ajax控件--FilteredTextBox,Calendar,ModalPopup
- altas(ajax)控件(十六)：遮盖全屏幕的对话框控件ModalPopup
- altas(ajax)控件(十六)：遮盖全屏幕的对话框控件ModalPopup
- Ajax 之实例应用
- Winsock异步方式编程实例 原创
- 【原创】C#插件编程(实例精析)
- java编程 Ajax+Servlet实例
- AJAX远程调用之JSON篇 原创
- ［原创］Ajax标签导航实例详解
- jQuery之ajax编程
- 史上最简单之ajax实例
- ajax之updatePanel控件(实例)
- ajax 之 dwr配置实例
- ajax实例2之DWR
- Jquery之Ajax实例应用
- Ajax中，ModalPopup与UpdatePanel结合，实现局部刷新的登录效果 (调用cs服务)
- 禁用VS2005实时调试和恢复方法
- 怎么获取地址里的汉字
- 2008-11-27: xBlog成长记一
- 从51初学者到电子工程师
- JUnit Cookbook
- 【原创】 Ajax之ModalPopup编程实例
- 在Excel中连接字符串的方法
- 浅析UpdatePanel的partial render原理
- 关键字 mutalbe
- 公司发展
- 关于Mantis变更日志（Changelog）和路线图（Roadmap）的说明
- Amazon云计算的一些实用应用
- junit4测试技巧
- 我的imap地图编辑器
