| 网站首页 | 文章中心 | 电子书下载 | 矢量图库 | 视频教程 | 素材下载 | 程序代码下载 | JS代码 | 论坛 | 
龙腾教程网  
常用软件类:
|杀毒安全 |联络聊天 |网络软件 |多媒体类 |系统工具 |图形图像 |系统工具 |应用软件 |行业软件
开发设计类:
|动画制作 |图像处理 |3D设计 |操作系统 |站长学院 |网络相关 |WEB设计 |数据库类 |程序开发
 
  您当前位置:您现在的位置: 龙腾软件教程网 >> 文章中心 >> WEB设计 >> javascript >> 实列教程 >> 文章正文>>>>>> 
JavaScript技巧:实现动态增加和删除用户控件的方法


<1> TableDataField.aspx  
<%...@ Page language="c#" Codebehind="TableDataField.aspx.cs" AutoEventWireup="false" Inherits="ScuHR.TableSet.TableDataField" %> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 
<HTML> 
    <HEAD> 
        <title>TableDataFiled</title> 
        <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1"> 
        <meta name="CODE_LANGUAGE" Content="C#"> 
        <meta name="vs_defaultClientScript" content="JavaScript"> 
        <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> 
    </HEAD> 
    <body MS_POSITIONING="GridLayout"> 
        <form id="Form1" method="post" runat="server"> 
            <TABLE id="Table1" style="Z-INDEX: 101; LEFT: 56px; WIDTH: 680px; POSITION: absolute; TOP: 32px; HEIGHT: 75px" 
                cellSpacing="1" cellPadding="1" width="680" border="1"> 
<TR> 
                    <TD style="WIDTH: 21px"><FONT face="宋体"></FONT></TD> 
                    <TD style="WIDTH: 621px"></TD> 
                    <TD></TD> 
                </TR> 
                <TR> 
                    <TD style="WIDTH: 21px"></TD> 
                    <TD style="WIDTH: 621px"> 
                        <asp:PlaceHolder id="plhDataFields" runat="server"></asp:PlaceHolder></TD> 
                    <TD></TD> 
                </TR> 
                <TR> 
                    <TD style="WIDTH: 21px"></TD> 
                    <TD style="WIDTH: 621px"></TD> 
                    <TD></TD> 
                </TR> 
                <TR> 
                    <TD style="WIDTH: 21px"></TD> 
    <TD style="WIDTH: 621px"> 
                        <asp:Button id="btnAadd" runat="server" Text="增加"></asp:Button></TD> 
                    <TD></TD> 
                </TR> 
                <TR> 
                    <TD style="WIDTH: 21px"></TD> 
                    <TD style="WIDTH: 621px"><FONT face="宋体"> 
                            <asp:Button id="btnGetValue" runat="server" Text="获得属性值"></asp:Button></FONT></TD> 
                    <TD></TD> 
                </TR> 
            </TABLE> 
        </form> 
    </body> 
</HTML> 

<2>TableDataField.aspx .cs 
using System; 
using System.Collections; 
using System.ComponentModel; 
using System.Data; 
using System.Drawing; 
using System.Web; 
using System.Web.SessionState; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Web.UI.HtmlControls; 

namespace ScuHR.TableSet 
...{ 
    /**//// <summary> 
    /// TableDataFiled 的摘要说明。 
    /// </summary> 
    ///  
  
    public class TableDataField : System.Web.UI.Page 
...{ 
        protected System.Web.UI.WebControls.Button btnAadd; 
        protected System.Web.UI.WebControls.PlaceHolder plhDataFields; 
        protected System.Web.UI.WebControls.Button btnGetValue; 
  
        private void Page_Load(object sender, System.EventArgs e) 
        ...{ 
            if (! IsPostBack ) 
            ...{ 
                //跟踪用户控件状态值     
                ViewState[ "DataFieldCount" ] = 0; 
            } 
            else 
            ...{ 
                for ( int counter = 0 ; counter < (int)ViewState ["DataFieldCount"]; counter++) 
                ...{ 
                    AddDataField( counter.ToString() ); 
                } 
            } 
        } 

        Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码 
        override protected void OnInit(EventArgs e) 
        ...{ 
            // 
            // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。 
  // 
            InitializeComponent(); 
            base.OnInit(e); 
        } 
   
        /**//// <summary> 
        /// 设计器支持所需的方法 - 不要使用代码编辑器修改 
        /// 此方法的内容。 
        /// </summary> 
        private void InitializeComponent() 
        ...{     
            this.btnAadd.Click += new System.EventHandler(this.btnAadd_Click); 
            this.btnGetValue.Click += new System.EventHandler(this.btnGetValue_Click); 
            this.Load += new System.EventHandler(this.Page_Load); 

        } 
        #endregion 

        private void btnAadd_Click(object sender, System.EventArgs e) 
        ...{ 
            ViewState[ "DataFieldCount" ] = (int)ViewState[ "DataFieldCount" ] + 1; 
            AddDataField( ViewState[ "DataFieldCount" ].ToString() ); 
   
        } 

        /**//// <summary> 
        /// 通过用户控件来增加动态控件 
        /// </summary> 
        /// <param name="strFieldNum"></param> 
        private void AddDataField(string  strFieldNum)  
        ...{  
 //获得用户控件 
            WebUserControlCls webUserCtrl = (WebUserControlCls)Page.LoadControl("WebUserControlCls.ascx"); 
            //将用户控件增加到PlaceHolder中  
            this.plhDataFields.Controls.Add(webUserCtrl); 
            //对用户控件的按钮注册动态事件 
            webUserCtrl.btnDelRow.Attributes.Add("onclick", "return confirm(’确定要删除该字段吗?’);"); 
            webUserCtrl.btnDelRow.Click +=new EventHandler(btnDelRow_Click); 
            //对PlaceHolder中的所有用户控件来设置ID属性,目的是为了点击用户控件中的"删除"按钮删除该用户控件 
            setControlsID(); 
        } 

        /**//// <summary> 
        /// 删除所选择的那行用户控件 
        /// </summary> 
        /// <param name="sender"></param> 
        /// <param name="e"></param> 
        private void btnDelRow_Click(object sender, System.EventArgs e) 
        ...{ 
            // 
            ViewState[ "DataFieldCount" ] = (int)ViewState[ "DataFieldCount" ] - 1; 
            Button btnDel = (Button)sender; 
            WebUserControlCls webUserCtrl = new WebUserControlCls();    
            webUserCtrl.ID = btnDel.ID; 
 this.plhDataFields.Controls.Remove(this.plhDataFields.FindControl(webUserCtrl.ID)); 
            //对PlaceHolder中的所有用户控件来重新设置ID属性 
            setControlsID(); 

        } 
         
        /**//// <summary> 
        /// 获得所有用户控件中的值 
        /// </summary> 
        /// <param name="sender"></param> 
        /// <param name="e"></param> 
        private void btnGetValue_Click(object sender, System.EventArgs e) 
        ...{ 
            if(ViewState["DataFieldCount"]!=null)  
            ...{ 
                foreach(WebUserControlCls webUserCtrl in this.plhDataFields.Controls) 
                ...{ 
                    Response.Write(webUserCtrl.DataFieldName);      
                    Response.Write(webUserCtrl.LogicName); 
                    Response.Write(webUserCtrl.DataFieldType); 
                    Response.Write(webUserCtrl.TypeLength); 
                    Response.Write("<br>"); 
                }     
     } 
        } 
         
        /**//// <summary> 
        /// 对PlaceHolder中的所有用户控件来设置ID属性 
        /// </summary> 
        private void setControlsID() 
        ...{ 
            int i=1; 
            //将用户控件与其按钮设置为相同的ID 
            foreach(WebUserControlCls wc in this.plhDataFields.Controls) 
            ...{ 
                wc.ID = i.ToString(); 
                wc.btnDelRow.ID =i.ToString(); 
                i++; 
            } 
    
        } 
    } 


<3>WebUserControlCls.ascx   
<%...@ Control Language="c#" AutoEventWireup="false" codebehind="WebUserControlCls.ascx.cs" Inherits="ScuHR.TableSet.WebUserControlCls" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%> 
<TABLE id="Table1" style="WIDTH: 746px; HEIGHT: 30px" cellSpacing="0" cellPadding="0" width="746" 
    border="1"> 
    <TR> 
        <TD>物理名称:</TD> 
        <TD><FONT face="宋体"><asp:textbox id="txtDataFieldName" runat="server" CssClass="textbox" MaxLength="20" Width="117" 
                    Height="24"></asp:textbox></FONT></TD> 
        <TD><FONT face="宋体">逻辑名称</FONT></TD> 
<TD style="WIDTH: 119px"><asp:textbox id="txtLogicName" runat="server" CssClass="textbox" MaxLength="20" Width="117px" 
                Height="24px"></asp:textbox></TD> 
        <TD style="WIDTH: 75px"><FONT face="宋体">字段属性:</FONT></TD> 
        <TD style="WIDTH: 87px"><FONT face="宋体"><asp:dropdownlist id="dropDataType" runat="server"> 
                    <asp:ListItem Value="0">字符类型</asp:ListItem> 
                    <asp:ListItem Value="1">数字类型</asp:ListItem> 
                </asp:dropdownlist></FONT></TD> 
        <TD><FONT face="宋体">属性长度:</FONT></TD> 
        <TD style="WIDTH: 40px"><FONT face="宋体"><asp:textbox id="txtTypeLength" runat="server" Width="36px" Height="23px">30</asp:textbox></FONT></TD> 
        <TD><FONT face="宋体"><FONT face="宋体"><asp:button id="btnDelRow" Text="删除" runat="server"></asp:button></FONT></FONT></TD> 
    </TR> 
</TABLE> 

<4>WebUserControlCls.ascx .cs 
namespace ScuHR.TableSet 
...{ 
    using System; 
    using System.Data; 
    using System.Drawing; 
    using System.Web; 
    using System.Web.UI.WebControls; 
    using System.Web.UI.HtmlControls; 
    using System.Text.RegularExpressions; //使用正则表达式 

    /**//// <summary> 
    ///  WebUserControl 的摘要说明。 
    /// </summary> 
public class WebUserControlCls : System.Web.UI.UserControl 
    ...{ 
        public System.Web.UI.WebControls.Button btnDelRow;//注意,应该是public 
        protected System.Web.UI.WebControls.DropDownList dropDataType; 
        protected System.Web.UI.WebControls.TextBox txtLogicName; 
        protected System.Web.UI.WebControls.TextBox txtDataFieldName; 
        protected System.Web.UI.WebControls.TextBox txtTypeLength; 
   

        private void Page_Load(object sender, System.EventArgs e) 
        ...{ 
            // 在此处放置用户代码以初始化页面 
        } 

        /**//// <summary> 
        /// 物理名称,只读属性 
        /// </summary> 
        public string DataFieldName 
        ...{ 
            get    
            ...{    
                return   txtDataFieldName.Text.Trim(); 
            }    
        } 

        /**//// <summary> 
        /// 逻辑名称,只读属性 
        /// </summary> 
        public string LogicName 
        ...{ 
            get    
            ...{ 
                return   txtLogicName.Text.Trim(); 
   } 

        } 

        /**//// <summary> 
        /// 数据类型,0表示是字符串类型,1表示是数字类型 
        /// </summary> 
        public int DataFieldType 
        ...{ 
            get    
            ...{ 
                return   Int32.Parse(dropDataType.SelectedValue); 
            } 

        } 

        public int TypeLength 
        ...{ 
            get    
            ...{ 
                //使用正则表达式判断字符串是否为数字 
                //是数字则返回该数字的值 
                //不是则返回-1 
                Regex r = new Regex(@"^d+$"); 
                if(r.IsMatch(txtTypeLength.Text.Trim())) 
                ...{ 
                    return   Int32.Parse(txtTypeLength.Text); 
                } 
                else 
                ...{ 
                    return -1;  

上一页  [1] [2] 


上一篇:
  • 上一篇文章:
  • 下一篇
  • 下一篇文章: 没有了
  • 收藏此文到百度搜藏 百度搜藏| 新浪VIvi| 365key| Younote| 博采中心| 你好BLOG| 亿友网摘| 和讯网摘|
    相关文章    
    arp病毒中的Javascript技术
    Javascript实现检查用户输入密码的强度
    JavaScript静态页面值传递之Cookie篇
    详解javascript函数劫持和反劫持
    JavaScript的9个陷阱及评点
    Javascript 实现检测网速的方法
    JS函数实现鼠标指向后带图片的提示效果
    Javascript实现获取页面URL技巧
    javascript 转换外部链接样式
    JS实现禁止查看网页源代码方法
     
     
     
    最新文章
    普通文章 JavaScript技巧:实现动态增加和删最新文章
    普通文章 PHOTOSHOP制作图片隐藏美女效果最新文章
    普通文章 CSS之字距与行距的相关属性最新文章
    普通文章 微软Windows Mobile7.0新功能预览最新文章
    普通文章 无处不在 Photoshop里大玩分身术最新文章
    普通文章 启用大缓存优化Vista系统性能最新文章
    普通文章 巧妙的化解DDOS分布式拒绝服务攻最新文章
    普通文章 Vista系统下利用Media Center录制最新文章
    普通文章 SQL Server的锁机制和锁模式最新文章
    普通文章 Photoshop打造梦幻韩式签名最新文章
     
    热门文章
    推荐文章 最新迅雷下载电骡资源技巧放送最新文章
     
     
    设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 

    版权所有2006-2008 龙腾教程网