【原创】 Ajax之ModalPopup编程实例 - 灵雨飘零 - ITeye博客

`

灵雨飘零

浏览: 34947 次
性别:
来自: 唐山

最近访客更多访客>>

u012363178

woodding2008

InJavaWeTrust

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

全部博客 (160)

社区版块

存档分类

最新评论

【原创】 Ajax之ModalPopup编程实例

阅读更多

以下是我最近做项目的时候遇到了关于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

以上只是一个能解决实际技术问题的演示实例，当然还有好多功能没有一一实现（例如删除），当然那些都很简单了，有兴趣的朋友可以完善一下。

分享到：

【原创】串口通信测试程序 | 从网上收集的一些源代码，电子教程和视频讲 ...

2008-11-27 09:06
浏览 164
评论(0)
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

ajax vs2005 编程实例 part01: ajax vs2005 编程实例，ajax vs2005 编程实例

[A025]ASP.NET AJAX控件之ModalPopup: 【ASP.NET AJAX控件之ModalPopup】是ASP.NET框架中一个强大的交互组件，它允许开发者在不刷新整个页面的情况下创建模态弹出窗口。在Web应用程序中，这种功能极大地提升了用户体验，因为它允许用户与主页面交互的同时...

ajax vs2005 编程实例 part04: ajax vs2005 编程实例 part04

ajax vs2005 编程实例 part02: ajax vs2005 编程实例 part02

ajax vs2005 编程实例 part03: ajax vs2005 编程实例 part03

Ajax编程技术与实例: **Ajax（Asynchronous JavaScript and XML）编程技术是Web开发领域中的一个重要里程碑，它极大地提升了网页的用户体验，使得页面无需刷新就能实现数据的异步更新。本文将深入探讨Ajax的核心概念、工作原理及其在实际...

《AJAX编程技术与实例》: 综上所述，《AJAX编程技术与实例》这本书很可能是涵盖了这些AJAX的基础知识，包括如何创建和使用XMLHttpRequest对象，处理响应数据，以及如何在实际项目中应用AJAX来提升网页交互性。如果你正在学习AJAX，这本书会是...

Ajax编程技术与实例(光盘)_Chap06: 《Ajax编程技术与实例》人民邮电出版社出版随书光盘资料。里面有:1、诸多小实例，融合作者近一年来年的网络开发经验；2、6大综合实例，不仅分析Ajax开发技术的精髓，还提供详细的实现步骤；3、多个角度出发，既...

Ajax网站开发典型实例JSP源码包: 在本"Ajax网站开发典型实例JSP源码包"中，我们可以深入学习如何使用Ajax与JavaServer Pages (JSP) 结合，创建高效动态的Web应用。 1. **Ajax基础** Ajax的核心是JavaScript对象XMLHttpRequest，它允许JavaScript在...

ajax ajax原理 ajax代码 ajax编程 ajax学习: **Ajax（Asynchronous ...随着前端技术的发展，如Fetch API和Promise的普及，以及Vue、React等库对Ajax的封装，现在的Ajax编程变得更加简洁高效。不过，理解其基本原理和流程对于任何前端开发者来说仍然至关重要。

UpdatePanel ModalPopup经典实例: ModalPopup是ASP.NET AJAX Control Toolkit中的一个客户端控件，用于创建弹出式模态对话框，它可以阻止用户与背景页面的交互，直到弹出框被关闭。 1. **基本用法：** ModalPopup可以与任何服务器控件配合使用，通常...

ajax+json实例: **Ajax+JSON 实例详解** 在现代Web开发中，AJAX（Asynchronous JavaScript and XML）技术已经成为提升用户体验的重要工具，它允许网页在不刷新整个页面的情况下与服务器进行数据交互。结合JSON（JavaScript Object ...

ajax实例ajax实例: ajax实例ajax实例ajax实例ajax实例ajax实例ajax实例ajax实例ajax实例ajax实例ajax实例ajax实例ajax实例ajax实例ajax实例

Jquery Ajax分页（有实例）: 本篇文章将深入探讨jQuery AJAX分页的原理与实践，通过具体的实例来展示如何实现炫酷的分页功能。首先，理解jQuery AJAX的核心概念。AJAX允许我们在不刷新整个页面的情况下，与服务器交换数据并更新部分网页内容。...

ajax 源码100大实例: **Ajax 源码100大实例：深入理解与应用** Ajax（Asynchronous JavaScript and XML）技术，自2005年引入以来，极大地改变了Web应用程序的用户体验，通过在后台与服务器进行少量数据交换，实现了页面的无刷新更新。本...

Ajax程序开发经典实例教程.zip: 本教程“Ajax程序开发经典实例教程”旨在帮助开发者深入理解和掌握Ajax技术，通过实例学习，使学习过程更加直观和易懂。 Ajax的核心在于创建XMLHttpRequest对象，它是JavaScript内置的对象，用于在后台与服务器进行...

AJAX编程技术与实例（java）源代码下载: 在这个“AJAX编程技术与实例（java）源代码”中，我们可以期待学习到以下关键知识点： 1. **XMLHttpRequest对象**：这是AJAX的核心，用于在后台与服务器通信。在JavaScript中创建XMLHttpRequest对象，然后利用它的...

ajax 实例实例实例ajax 实例实例实例ajax 实例实例实例: 本篇文章将深入探讨Ajax的核心概念、工作原理及其在实际开发中的应用实例。 ### 一、Ajax核心概念 1. **异步通信**：Ajax的最大特点就是异步，即在不阻塞用户交互的前提下，向服务器发送请求并获取数据。 2. **...

基于java的开发源码-ajax写的登录实例.zip: 基于java的开发源码-ajax写的登录实例.zip 基于java的开发源码-ajax写的登录实例.zip 基于java的开发源码-ajax写的登录实例.zip 基于java的开发源码-ajax写的登录实例.zip 基于java的开发源码-ajax写的登录实例.zip ...

Java+ajax写的登录实例: 在这个“Java+ajax写的登录实例”中，我们将深入探讨如何利用这两种技术实现一个实时验证用户登录信息的功能。首先，让我们了解Java。Java是一种面向对象的编程语言，广泛用于开发服务器端应用。在登录场景中，...

Global site tag (gtag.js) - Google Analytics