设计有复杂客户端Script的服务器控件

简介:
使用ASP.NET的服务器控件,可以极大的提高我们Web开发中组件的复用性。不过由于ASP.NET默认的__doPostBack传输机制,对于我们在Web页上开发DHMTL特性的功能没有什么实质的帮助,因为我们不可能每次HTML属性修改都doPostBack,这样的效率和用户体验会死人的哦~~

    所以这时候使用客户端Script是一个很好的办法。那我们就用呗,可是问题就谁之而来了。使用Script来操作DHTML,需要获得被操作HTML元素对象的引用(废话,不然怎么操作?!)。我们最常用的方法是:使用HTML元素的ID来引用或者使用document对象的方法:getElementById、getElementsByName 和 getElementsByTagName。由于getElementsByName 和 getElementsByTagName获得的都是一个HTML元素对象集合,所以最常用的就是getElementById了。可是对于ASP.NET的服务器端控件,要在该控件PreRender的时候才能准确的获得其ClientID属性。而且就算我们取到了HTML元素的ID,我们还需要把这个ID hard-coding到被Register到页面的Script里去。这里的复杂程度就可大可小很难说了

    这样一来每次修改Script都要很麻烦的到控件的RegisterClientScript方法里去修改Script,并处理好需要动态写入Script的参数。更麻烦的是如果页面允许多个这样的控件Render,还需要考虑会不会ID冲突等问题,虽然ASP.NET控件Render时候会自动保证控件和其子控件的ID是unique的,可是其它的HTML元素就比较的麻烦了。而且大量的ID使用,也会给Web的设计带来一些小麻烦,因为也存在需要避免ID重复的问题。

    所以在我管理有复杂客户端Script的服务器控件时,我都不给其中的HTML元素设置ID,并且也不在客户端脚本中使用任何和HTML元素ID有关的方法去引用它们。那么怎么引用呢?使用HTML元素在DHTML对象树中的Hierarchy来查找它们就行了。当我们在IE中操作这个"控件"(已经就是HTML元素了)时,在该控件最外层作为container的HTML元素里俘获event,然后使用其event.srcElement,就可以以它为起点来查找需要的HTML元素了。比如:
< table  border ="1"  ondblclick ="ShowOrHideSpan(this)"  style ="border-collapse: collapse;" >
     < tr >
          < td  name ="title" >
             Tilte </ td >
     </ tr >
     < tr >
          < td >
              < span >Content: asdf asdf asdf </ span ></ td >
     </ tr >
</ table >
我们想实现double click表格中的Title来隐藏或显示Content,怎么弄呢?

    使用如下JScript代码:
< script  language ="javascript" >
function  ShowOrHideSpan(elmt)
{
    
var  srcElmt  =  event.srcElement;
    
if  ( srcElmt  &&  srcElmt.tagName  ==  'TD'  &&  srcElmt.name  ==  'title' )
    
{
         
var  span  =  FindChildElement(elmt, 'SPAN');
         
if  ( span.style.display  ==  'none' )
         
{
              span.style.display 
=  'inline';
         }

         
else
         
{
              span.style.display 
=  'none';
         }
       
    }
   
}

</ script >
    这段Script中的FindChildElement(elmt, 'SPAN')就是在以elmt为起点遍历DHMTL对象树,一找出SPAN元素。当然这个示例只是一个demo,或许你会说,把事件监听放到第一个tr上多好,可那不是我们在这个demo中关心的东西。在实际的控件开发中可能会比这复杂的多,不过原理就是这样弄了,完全不依赖任何的ID。

    不过这种方式也还是有些不足,因为有时我们会发现FindChildElement相对于FindParentElement不是那么容易确定,一个起点元素的parent肯定是唯一的,而它的child显然可能是很多个。不过在我觉得在控件开发中注意一下HTML元素的Hierarchy比管理它们ID要容易得多,而且也不会对Script产生太大的影响。

    欢迎您的讨论和建议~~

    附一、FindChildElement(element, tagName)源代码(先深遍历):
< script  lanuage ="JavaScript" > </ script >
    在某些时候我们可以不用这个遍历算法,而使用element.all.tags(tagName)来获取Child Element,这个依赖于该页面的HTML元素之间的Hierarchy。

    附二、FindParentElement(element, tagName)源代码:
< script  lanuage ="JavaScript" > </ script >

本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。

目录
相关文章
|
5月前
|
人工智能 搜索推荐 程序员
用 Go 语言轻松构建 MCP 客户端与服务器
本文介绍了如何使用 mcp-go 构建一个完整的 MCP 应用,包括服务端和客户端两部分。 - 服务端支持注册工具(Tool)、资源(Resource)和提示词(Prompt),并可通过 stdio 或 sse 模式对外提供服务; - 客户端通过 stdio 连接服务器,支持初始化、列出服务内容、调用远程工具等操作。
1347 4
|
6月前
|
网络协议 开发者 Python
Socket如何实现客户端和服务器间的通信
通过上述示例,展示了如何使用Python的Socket模块实现基本的客户端和服务器间的通信。Socket提供了一种简单且强大的方式来建立和管理网络连接,适用于各种网络编程应用。理解和掌握Socket编程,可以帮助开发者构建高效、稳定的网络应用程序。
257 10
|
8月前
|
存储 开发工具 git
[Git] 深入理解 Git 的客户端与服务器角色
Git 的核心设计理念是分布式,每个仓库既可以是客户端也可以是服务器。通过 GitHub 远程仓库和本地仓库的协作,Git 实现了高效的版本管理和代码协作。GitHub 作为远程裸仓库,存储项目的完整版本历史并支持多客户端协作;本地仓库则通过 `.git` 文件夹独立管理版本历史,可在离线状态下进行提交、回滚等操作,并通过 `git pull` 和 `git push` 与远程仓库同步。这种分布式特性使得 Git 在代码协作中具备强大的灵活性和可靠性。
185 18
[Git] 深入理解 Git 的客户端与服务器角色
|
9月前
|
存储 人工智能 自然语言处理
ChatMCP:基于 MCP 协议开发的 AI 聊天客户端,支持多语言和自动化安装 MCP 服务器
ChatMCP 是一款基于模型上下文协议(MCP)的 AI 聊天客户端,支持多语言和自动化安装。它能够与多种大型语言模型(LLM)如 OpenAI、Claude 和 OLLama 等进行交互,具备自动化安装 MCP 服务器、SSE 传输支持、自动选择服务器、聊天记录管理等功能。
2305 16
ChatMCP:基于 MCP 协议开发的 AI 聊天客户端,支持多语言和自动化安装 MCP 服务器
|
10月前
|
开发框架 .NET C#
在 ASP.NET Core 中创建 gRPC 客户端和服务器
本文介绍了如何使用 gRPC 框架搭建一个简单的“Hello World”示例。首先创建了一个名为 GrpcDemo 的解决方案,其中包含一个 gRPC 服务端项目 GrpcServer 和一个客户端项目 GrpcClient。服务端通过定义 `greeter.proto` 文件中的服务和消息类型,实现了一个简单的问候服务 `GreeterService`。客户端则通过 gRPC 客户端库连接到服务端并调用其 `SayHello` 方法,展示了 gRPC 在 C# 中的基本使用方法。
181 5
在 ASP.NET Core 中创建 gRPC 客户端和服务器
|
11月前
|
Python
Socket学习笔记(二):python通过socket实现客户端到服务器端的图片传输
使用Python的socket库实现客户端到服务器端的图片传输,包括客户端和服务器端的代码实现,以及传输结果的展示。
385 3
Socket学习笔记(二):python通过socket实现客户端到服务器端的图片传输
|
11月前
|
JSON 数据格式 Python
Socket学习笔记(一):python通过socket实现客户端到服务器端的文件传输
本文介绍了如何使用Python的socket模块实现客户端到服务器端的文件传输,包括客户端发送文件信息和内容,服务器端接收并保存文件的完整过程。
495 1
Socket学习笔记(一):python通过socket实现客户端到服务器端的文件传输
|
11月前
使用Netty实现文件传输的HTTP服务器和客户端
本文通过详细的代码示例,展示了如何使用Netty框架实现一个文件传输的HTTP服务器和客户端,包括服务端的文件处理和客户端的文件请求与接收。
235 1
使用Netty实现文件传输的HTTP服务器和客户端
|
11月前
|
网络协议 Unix Linux
一个.NET开源、快速、低延迟的异步套接字服务器和客户端库
一个.NET开源、快速、低延迟的异步套接字服务器和客户端库
191 4
|
11月前
|
存储 网络协议 Java
【网络】UDP回显服务器和客户端的构造,以及连接流程
【网络】UDP回显服务器和客户端的构造,以及连接流程
221 3

热门文章

最新文章