【原创】 Ajax之ModalPopup编程实例

 

以下是我最近做项目的时候遇到了关于ModalPopup的使用实例，解决了一些技术难题，详细见源代码
解决了打开网页的时候ModalPopup闪烁出现的现象，以及TargetControlID后台代码不被执行的问题。

1.jpg

2.jpg 

前台代码：

<%@ 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

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

 


posted @ 2008-11-27 09:06  灵雨飘零  阅读(593)  评论(0)  编辑  收藏  举报