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

通过一个例子来演示: 


    我们通过网页来动态创建表和字段时,一次性需要添加多个字段,而字段还有其属性。那么可以通过创建一个用户控件,里面包含多个文本控件或者其他控件来存放一个字段的名称和其多个属性值。然后,在网页中,根据需要创建字段个数的需要,来多次动态加载相等数量的用户控件。  

    既然能动态加载用户控件,那么加载结束后如果发现某个或几个字段多余,那就需要删除多余的用户控件.在删除时,应该给出提示是否删除。 

    那么具体操作是:点击"增加"按钮,页面增加一个用户控件,再次点击"增加"按钮又增加一个控件用户。每个用户控件上有一个删除按钮,点击任何用户控件上的“删除”按钮就删除掉该用户控件而不影响其他已存在的用户控件。 
    我们先提到四个基本概念,他们在动态加载用户控件中需要用到的知识。 
    什么是用户控件?用户控件就是已经被转换为包含一个或者多个控件的ASP.NET页面. 使用用户控件可以很方便的在多个ASP.NET页面中使用相同的内容和编程逻辑。


    什么是PlaceHolder控件?通常不将控件直接添加到页面的Controls集合中。因为我们希望将控件添加到页面的指定的位置。ASP.NET框架中就包含PlaceHolder控件,它用来作为其他控件的容器,我们将控件添加其中,这样我们只需要对PlaceHolder控件定位就可以实现对其他控件的定位。 


    什么是ViewState?ViewState是.Net中提出的状态保存的一种新途径,它是服务器控件状态保存的基础。通俗的说,就是点击页面的按钮(WebControls.Button类型)提交页面后,页面会被重新加载,那么我们需要保存提交前页面中变量的值,在页面被重新加载后可以使用这些被保存变量的值。在本例中,当我们删除一个控件时,页面会被重新加载,而我们需要删除前用户在其他控件输入的值仍然存在,那么我们就需要ViewState来保存这些值。如果不保存这些值,页面会被重新加载后其他控件输入的值就会被清除,不符合我们的需要。 
    isPostBack是什么意思?判断页面是否首次被加载,是返回 false, 不是true。通过 isPostBack和ViewState一起就可以在Page_Load中完成页面状态的保存。 


    完成这个例子的步骤: 


    (1) 新建一个ASP.NET的项目,(有点废话,但是没有项目是无法完成这个例子的)。创建一个后缀名为aspx的页面,我们需要在它里面来动态添加和删除用户控件(假设该页面的名称为TableDataField.aspx)。创建一个后缀名为ascx的用户控件,(假设该用户控件的名称为WebUserControlCls.ascx),我们需要在它里面添加我们需要的多个服务端控件。呵呵,准备工作完成。 
    (2) 创建一个字段时,在页面TableDataField.aspx和用户控件WebUserControlCls.ascx包含的内容 
    <1> 页面TableDataField.aspx包含的内容为: 
属性名称控件类型用途 
WPlaceHolder控件WebControls.PlaceHolder  作为其他控件的容器 
添加按钮 WebControls.Button点击"增加"按钮,页面增加一个用户控件 
获得属性按钮WebControls.Button点击"增获得属性"按钮可以获得在用户控件中输入的值 
表格HTML 控件所有的控件放在这个表格里面,5行3列 
              
    <2>用户控件WebUserControlCls.ascx包含的内容为: 

属性名称 控件类型用途 
字段的物理名称WebControls.TextBox数据库表中的字段名称,一般用英文 
字段的逻辑名称WebControls.TextBox对用户显示的字段,作为数据库表中的字段名称的别名 
字段的属性WebControls.DropDownList假设字段属性只允许有两个选择:字符类型和数字类型 
字段的长度WebControls.TextBox  对于字符就是限制长度,是数字就现在其小数位长度 
删除按钮 WebControls.Button 点击“删除”按钮就删除掉该用户控件 
表格HTML 控件 所有用户控件放在这个表格里面,1行9列 
                         
    (3)在页面TableDataField.aspx中,说四个要点。 


    <1>动态增加用户控件 
    1、获得用户控件 

    WebUserControlCls webUserCtrl = (WebUserControlCls)Page.LoadControl("WebUserControlCls.ascx"); 

    2、将用户控件增加到PlaceHolder中 

   this.plhDataFields.Controls.Add(webUserCtrl); 

    3、对用户控件的按钮注册动态事件,这里使用事件和代理。关于事件和代理,请参见<<在C#的事件、多播中使用委托>>一文:http://blog.csdn.net/scucj/archive/2006/07/13/915482.aspx 
    webUserCtrl.btnDelRow.Attributes.Add("onclick", "return confirm(’确定要删除该字段吗?’);"); 
    webUserCtrl.btnDelRow.Click +=new EventHandler(btnDelRow_Click); 

    4、对PlaceHolder中的所有用户控件来设置ID属性,将用户控件的ID和被它包含的按钮的ID相同,目的是为了点击用户控件中的"删除"按钮可以通过"删除"按钮ID来获得用户控件ID,然后可以删除该用户控件 

    setControlsID(); 
    <2>动态删除用户控件 

    1、创建一个用户控件的实例 

    WebUserControlCls webUserCtrl = new WebUserControlCls();  

    2、通过“删除”按钮的ID来获得用户控件的ID 

    webUserCtrl.ID = btnDel.ID; 

    3、通过用户控件的ID来删除用户控件 
JavaScript正则表达式总结Javascript拆分字符串方法
 this.plhDataFields.Controls.Remove(this.plhDataFields.FindControl(webUserCtrl.ID)); 

    4、对PlaceHolder中的剩下所有用户控件来重新设置ID属性 

    setControlsID(); 
    <3>保持用户控件的状态 
    IsPostBack表示页面是否首次加载,如果是,则用户控件状态个数为0;如果不是,则要加载用户控件。 
if (! IsPostBack ) 
...{ 
    //跟踪用户控件状态个数     
    ViewState[ "DataFieldCount" ] = 0; 

else 
...{ 
    for ( int counter = 0 ; counter < (int)ViewState ["DataFieldCount"]; counter++) 
    ...{ 
        //加载用户控件 
        AddDataField( counter.ToString() ); 
    } 

    <4> 用户控件添加成功后,我们提交这个页面。本例通过点击“获得属性”按钮来获得用户控件中输入的值的。 
    在这其中,我们通过一个foreach来找到所有的webUserCtrl,然后通过webUserCtrl中提供的属性来获得各个控件输入的值。 


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>"); 
    }     
   } 

    (4)在用户控件WebUserControlCls.ascx中,说三个要点。 
    <1> 应该在其WebUserControlCls.ascx.cs把“删除”按钮的范围从protected改为public,因为我们需要在 页面TableDataField.aspx中对“删除”按钮添加属性和事件。 
    这样: 
    protected System.Web.UI.WebControls.Button btnDelRow 
    应该变为:public System.Web.UI.WebControls.Button btnDelRow 
    注意,在用户控件WebUserControlCls.ascx移动某个控件时,“删除”按钮的范围会从已经修改的public变回为protected。那么就需要再次将protected改为public。
 <2> 在用户控件WebUserControlCls.ascx中为各个控件定义属性,以便页面TableDataField.aspx中可以方便获取控件中输入的值。 

    比如: 

    物理名称,只读属性 


  public string DataFieldName 
  ...{ 
   get    
   ...{    
    return   txtDataFieldName.Text.Trim(); 
   }    
  } 

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

    呵呵,整个思路就是这样。由于CSDN的blog不能上传文件,我下面给出 TableDataField.aspx 和 WebUserControlCls.ascx 两个文件的四个部分的源代码。或者给我发邮件:scucj@126.com。 

 

[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 龙腾教程网