操纵自如--页面内的配合与通信

转载 2007年10月08日 16:20:00

操纵自如--页面内的配合与通信

.NET的页面看似一个整体,却可能是由很多不同的区域组合而来的,常常用到的母版页、用户控件就是最鲜明的例子。
然而在一个页面内的元素要形成一个整体,就少不了控件之间的通信与传值,本文是个人在不断的使用过程中总结的一些东西,有谬误或有更好的解决方案,还请提出来。
在写这篇文章的过程中我做了一些一示例,以作佐证。这些示例的目的都是 在“A”中 把 “B”中 的一个Label的值改变。
这样的做法有什么意义?
比如说你在masterpage中含有一个GridView,在aspx改变了一些数据,而这些数据正是影响到masterpage中的GridView的呈现内容,那么你就有必要在aspx中通知masterpage更新了。本文的目的就是要说,如何去通知它的更新。
本文包括以下几个部分:
1、aspx与ascx的通信
2、master与aspx的之间的通信
3、master中的ascx 与 master中的aspx通信
4、ascx与ascx之间的通信

1、aspx与ascx的通信

一个简单的示例,在这个例子中,一共有两个文件:UserControl-Page.aspx和WebUserControl3.ascx,两个文件之中均含有一个TextBox、Label和一个Button
在这里,我们使用A和B来简称前者和后者。
要求的效果是:点击A中的Button,能将A中TextBox中的值赋给B中的Label;反之,点击B中的Butoon,要将B中TextBox中的值赋给A中的Label。
也就是说,它们两个能改变对方的控件内容。
首先说A->B
这是很简单的,在Ascx中写一个公共的方法,在aspx中调用就行了。

//这是在ascx中的方法,该方法将参数_value的值赋给Label。
    public void setSelect(string _value)
    
...{
        lblMessage.Text 
= _value;
    }

在aspx中直接调用它

protected void btnSet_Click(object sender, EventArgs e)
    
...{
        WebUserControl3_1.setSelect(txtValue.Text);
// WebUserControl3_1是用户控件的ID
    }

可能大家看得不是很明白,不过总之,在aspx中可以调用ascx中的公共方法,传入想传的参数,就OK了。

如果倒过来,由B->A。

在ascx中改变aspx中的一个Label,也只换种方式

Label lblMessage= (Label)Page.FindControl("lblMessage");
 lblMessage.Text 
= txtValue.Text;

也就是说,可以在ascx中查找当前aspx页的控件ID,找到了,直接赋个值就行了。反正,只要找到这个控件,用起来就好像自己的一样。

2、master与aspx的通信

在master中访问aspx中的东西也是查找控件,和ascx中查找aspx中差不多

Label lblMessage= (Label)ContentPlaceHolder1.FindControl("lblMessage");
 lblMessage.Text 
= txtValue.Text;

倒过来,aspx可以调用masterpage的公共方法

MasterPage master = (MasterPage)Page.Master;//转换为masterpage的类型
    master.setValue(txtValue.Text);//调用masterpage的方法

3、master中的ascx 与 master中的aspx通信

从master中的ascx到master中的aspx,需要通过master,查找ContentPlaceHolder,再查找Label

MasterPage master = (MasterPage)Page.Master;
 Label _lblMessage 
= (Label)master.FindControl("ContentPlaceHolder1").FindControl("lblMessage");
 _lblMessage.Text 
= txtValue.Text;

aspx要想与masterpage的ascx联系,要先得到master,再查找ascx,再查找Label。

MasterPage master = (MasterPage)Page.Master;
 Label lblMessage
=(Label)master.FindControl("WebUserControl4_1").FindControl("lblMessage");
 lblMessage.Text 
= txtValue.Text;

 这个双方互通是一样的原理哦。

4、ascx与ascx之间的通信

这应该是最常见的情况,前段时间做的项目,分两个区域,用户在A区域从事活动,B区域记录下他活动的信息,这两个区域都是用户控件。
一种方法是从a.ascx中查找Aspx,再查找B.ascx,再查找Label。
这种方向理论上的行得通的,不过我没试,因为这种方法必须考虑B控件在A中的ID,我却不想与ID发生任何关系。
所以我用接口。
假设现有WebUserControl2.ascx想操纵WebUserControl1.ascx中的控件。
在app_code中新建一个IUserControl1.cs
内容:

public interface IUserControl1
...{
    
void setSelect(string value);
}

在WebUserControl1.ascx继承该接口,并实现其方法。

public partial class UserControl_WebUserControl1 : System.Web.UI.UserControl, IUserControl1
...{
    
public void setSelect(string _value)
    
...{
        lblMessage.Text 
= _value;
    }

}

然后直接在webUserControl2.ascx调用webUserControl1.ascx中的方法

IUserControl1 userControl1 = (IUserControl1)Page.FindControl("WebUserControl1_1");//转化到接口去
 userControl1.setSelect(txtValue.Text);//setSelect是webUserControl1.ascx中的方法,调用它。

这实际上是很好的一种方法,这样来做,其它类型的控件间通信应该都能实现,在那几天,我还一直沾沾自喜着呢。通过这一样一个例子,也发现接口确实不简单,真的是一个“接口”。

.net的partial类的引入使用我的可以在各个文件中实现一个,最后合并在一起,而通过这些小技巧,又可以把各部分联系起来,成为一个真正的“整体”。

js之iframe子页面与父页面通信

iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同。 一、同域下父子页面的通信 父页面parent.html html> head>...
  • qq_34341290
  • qq_34341290
  • 2016年11月26日 09:46
  • 347

iframe父子页面间通信总结

随着网页结构的复杂化,页面内嵌frame越来越常见,但不管是作为内容页来显示,还是作为组件模块嵌入,都有父子页面间通信的需求可能,因此为了更好的实现需求就必须了解父子页面间的通信。iframe子页面与...
  • u010725720
  • u010725720
  • 2015年10月09日 18:49
  • 4492

跨窗口通信的几种方法

推荐几种在浏览器端跨窗口通信的几种方法,并比较其优劣。
  • yiifaa
  • yiifaa
  • 2016年07月15日 16:03
  • 494

父子页面之间跨域通信的方法

父子页面之间跨域通信的方法 2014/08/08 | 分类: WEB前端, 开发 | 1 条评论 | 标签: 前端开发 原文出处: 腾讯TID - lyndon   欢...
  • Joey_zoe
  • Joey_zoe
  • 2014年08月19日 22:42
  • 884

HTML5之窗口间通信

准备工作:虚拟主机相关配置     同域下窗口间通信的二种方式:1.iframe  2 window.open   同域下的窗口通信 方式一:iframe 1.    iframe....
  • u013267266
  • u013267266
  • 2016年06月25日 19:37
  • 3106

微信小程序多页面传参通信的探索与实践

一、前言最近微信小程序越来越火,不少公司都在将原生代码转为微信小程序代码。在开发过程中,由于微信小程序wx.navigateBack方法并不支持返回传参,导致一些页面,尤其是从列表页面跳入详情页,用户...
  • qq273681448
  • qq273681448
  • 2017年05月08日 00:23
  • 337

webpack配合vue.js实现完整的单页面demo

本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本。并且在项目中需要加载一些npm包,由于npm的...
  • hsany330
  • hsany330
  • 2016年11月17日 18:25
  • 2961

基于Redux架构的单页应用开发总结(二)

写在前面 这次重点介绍基于Redux架构的单页应用代码的组织方式 关于less的组织作为一个后端出身的前端工程师,写简单的css实在没有那种代码可配置和结构化的快感。所以引入less是个不错的选择...
  • u011413061
  • u011413061
  • 2016年06月11日 00:14
  • 7734

parent.window.opener实现跨页面通讯

有人在技术交流群里提了个问题,瞬间引起我强烈的好奇心,“通过JS改变上一来源页面内信息,包括跳转等功能”。 也许有人见过在父子iframe通讯,但两个页面之间的通讯很少见。 跨标签跳转页面 ...
  • a0405221
  • a0405221
  • 2017年12月28日 09:54
  • 43

js与原生通讯机制

js 原生 通讯
  • u011342466
  • u011342466
  • 2016年02月18日 20:04
  • 624
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:操纵自如--页面内的配合与通信
举报原因:
原因补充:

(最多只允许输入30个字)