• 【原创】 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=" 680px; height: 30px; background-color: #507CD1; padding-top: 8px;
                            padding-left: 20px; text-align: left">
                            <strong><font color="white">查询条件</font></strong></div>
                        <div style=" 700px; height: auto">
                            <table>
                                <tr>
                                    <td style=" 80px; height: 26px;" align="right">
                                        科室编码</td>
                                    <td style=" 100px; height: 26px;" align="left">
                                        <asp:TextBox ID="txtDepartIDFind" runat="server" Width="80px"></asp:TextBox></td>
                                    <td style=" 80px; height: 26px;" align="right">
                                        科室名称</td>
                                    <td style=" 120px; height: 26px;" align="left">
                                        <asp:TextBox ID="txtDepartNameFind" runat="server" Width="100px"></asp:TextBox></td>
                                    <td style=" 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=" 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=" 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

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

     
  • 相关阅读:
    Oracle通过Rman的"copy datafile"转移数据文件后不要使用sqlplus来重命名文件位置和文件名
    Oracle使用errorstack跟踪客户端的ORA报错
    Oracle OEM 13C表空间报警延迟问题
    CH5 用神经网络解决线性问题
    CH4 简化神经网络模型
    CH3 初识 TensorFlow
    Python 语言和 TensorFlow 框架环境准备
    创建型模式之单例模式与工厂模式（一）
    Node.js Koa框架学习笔记
    国庆七天假 不如来学学Vue-Router
  • 原文地址：https://www.cnblogs.com/kingboy2008/p/2055602.html
Copyright © 2020-2023  润新知