在ASP.Net中应用Javascript
一、ASP.Net与Javascript
.Net是微软公司下一代的战略核心,ASP.Net是.Net战略在Web开发方面的具体实现。它继承了ASP的简单性和易用性,同时克服了ASP程序结构化较差,难于阅读和理解的缺点。特别是服务器端控件和事件驱动模式的引入,使得Web应用程序的开发更接近于过去桌面程序的开发。
在各种各样介绍ASP.Net的文章和书籍中,都把重点放在了服务器控件和.Net Framework SDK上,因为这是ASP.Net中最新和最具革命性的改进;与此相反,在过去的Web开发中占据重要地位的客户端脚本Javascript(也包括VBScript)则鲜有提及,似乎有了服务器端程序,已经不需要客户端脚本了。但是,服务器端的程序毕竟需要一次浏览器与Web服务器的交互,对于ASP.Net来说,就是一次页面的提交,需要来回传送大量的数据,而很多工作,比如输入验证或者删除确认等,完全可以用Javascript来实现。因此,探讨在ASP.Net中如何使用Javascript仍然很有必要。
二、Javascript的应用示例
1.为页面上的某个服务器控件添加Javascript事件
服务器控件最终生成的仍然是普通的HTML,比如
if not page.isPostBack() then
btnSave.Attributes.Add(“onclick”,”Javascript:return confirm(‘Are you sure to save?’);”)
end if
要注意的是‘return’,这是不可省的,否则即使用户点了取消,数据仍然会保存。
2.为Datagrid中的每一行添加Javascript事件
假设Datagrid的每一行有一个删除按钮,希望在用户点此按钮时提示用户是否确实要删除此条记录,以防用户点错了行,或仅仅是无意中点了删除按钮。
无论这个删除按钮是什么名字,都不能象上个例子那样直接引用,因为每一行都有这样一个按钮,它们是Datagrid中的子控件。在这种情况下,需要用到Datagrid的OnItemDataBound事件。OnItemDataBound事件发生在Datagrid的每一行数据绑定到Datagrid之后(即一行激发一次)。首先在Datagrid的声明中添加如下代码:
…Columns definition here
此处说明OnItemDataBound事件发生时调用ItemDataBound方法,在代码后置文件中添加此方法的定义:
Sub ItemDataBound(ByVal sender As Object, ByVal e As DataGridItemEventArgs)
If e.Item.ItemType <> ListItemType.Header And e.Item.ItemType <> ListItemType.Footer Then
Dim oDeleteButton As LinkButton = e.Item.Cells(5).Controls(0)
oDeleteButton.Attributes("onclick") = "javascript:return Confirm ('Are you sure you want to delete" & DataBinder.Eval(e.Item.DataItem, "m_sName") & "?')"
End If
End Sub
由于Datagrid的标题行和脚注行也会激发此事件,所以首先判断激发此事件的行不是标题行和脚注行。这里假设Delete按钮位于Datagrid的第6列(第一列是0),且Datagrid的Datasource中包含名为”m_sName”的列
3.引用编辑状态下的Datagrid中的控件
Datagrid的内置编辑功能使得当记录的字段较少时的一种编辑方法。用户不必进入一个单独的页面编辑记录,而是直接点编辑按钮就可以使当前行进入编辑模式。而另一方面,有一些Javascript程序需要引用控件的名称。比如,很多程序在需要用户输入日期时都提供一个日期控件以保证日期格式的合法性,当用户点控件图标时弹出一个新窗口供用户选择日期。此时需要把显示日期的文本框的ID提供给新窗口,以便当用户选择日期后值可以回填到文本框中。
如果是普通的服务器文本框控件,它的ID与生成的HTML输入框的ID是相同的;但是在Datagrid的编辑状态下,两个ID并不相同(其道理与上例相同),这就需要用到控件的ClientID属性。
Protected Sub ItemEdit(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs)
Dim sDateCtrl as string
sDateCtrl = grd1. Items (e.Item.ItemIndex) . Cells(2). FindControl("txtDate") . ClientID
End Sub
这里假设ItemEdit方法是Dategrid的OnItemEdit事件处理程序,同时在Datagrid的第三列包含一个名为txtDate的服务器文本框控件。
4.引用ASP.Net自动生成的Javascript程序
所谓的“服务器端控件”是针对开发人员的,在生成的HTML源程序中并没有服务器和客户端之分,都是标准的HTML,DHTML和Javascript。它之所以能响应用户的输入是因为每个控件的事件处理程序最终都生成了一段脚本,此脚本重新提交页面使得Web Server有机会再次响应并作出处理。通常情况下我们不必知道此脚本是什么也不必直接调用此脚本,但在有些情况下,适当地调用此脚本可以简化许多工作。请看下面两个例子。
● 点Datagrid的任一位置以选中一行
Datagrid提供了一种内置的选择按钮,当点此按钮时选中当前行(可以设置SelectedItemStyle属性以使当前行有不同的外观)。但用户可能更习惯于点任意一个位置都能选中一行,如果完全自己实现这个功能相当烦琐。一个好的思路是添加一个选择按钮,但使此列隐藏,当点任一行时调用此按钮产生的Javascript脚本。
Sub Item_Bound(ByVal sender As Object, ByVal e As DataGridItemEventArgs )
Dim itemType As ListItemType
itemType = CType(e.Item.ItemType, ListItemType)
If (itemType <> ListItemType.Header) And _
(itemType <> ListItemType.Footer) And _
(itemType <> ListItemType.Separator) Then
Dim oSelect As LinkButton = CType(e.Item.Cells(5).Controls(0), LinkButton)
e.Item.Attributes("onclick") = Page. GetPostBackClientHyperlink (oSelect, "")
End Sub
这里假设选择按钮位于第6列。e.Item代表了一行,从生成的HTML上看就是在每个里增加了一个onclick事件。Page.GetPostBackClientHyperLink方法返回页面中LinkButton控件产生的客户端脚本,其中第一个参数是Linkbutton控件,第二个参数是传递给此控件的参数,通常为空。如果不是LinkButton控件,有一个类似的函数GetPostBackClientEvent,读者可以参考MSDN。
● 服务器产生的脚本与手工添加的脚本冲突
服务器控件的服务器事件一般对应到客户端控件的相应事件,如Dropdownlist的SelectedIndexChanged事件对应HTML
function ConfirmUpdate(cmd){
if confirm(“Are you sure to update?”)
eval(cmd);
} 这里利用了Javascript eval函数来调用一个字符串中包含的命令。需注意的是包含命令的字符串不能用单引号括起来,因为自动生成的脚本中包括单引号,所以这里用两个双引号表示字符串本身的双引号。 三、结束语 以上简单讨论了在ASP.Net中插入Javascript的几种情况。合理地在服务器程序中插入客户端的Javascript脚本,可以提高程序的运行效率并提供更友好的用户界面。 给力 上一篇:JavaScript 和 Java 的区别 下一篇:AJAX的七宗罪 and 驳AJAX的七宗罪 分享到: QQ空间 新浪微博 人人网 开心网 更多 精彩图集 node+express+ js点亮星星评 鼠标滑过出 查找Oracle高 PHP开发者必 精彩文章 H5和微信小游戏 Canvas API 整理 JavaScript变量声明详解 开源的javascript项目Kissy介绍 jQuery实现统计复选框选中数量 jQuery实现隔行背景色变色 Javascript window对象详解 初始Nodejs_node.js js 操作符汇总 jquery 获取 outerHtml 包含当前节点本 Nodejs极简入门教程(一):模块机 热点文章 修改jquery插件carouFredSel使其支持鼠 Nodejs全栈框架StrongLoop推荐_node. 微信分享的标题、缩略图、连接及 div+js实现alert弹出提示框效果 手机端网页点击链接触发自动拨打 js停止setInterval函数自动运行 jQuery 实现自动填充邮箱功能(带 天气预报插件更改官方代码实现完 html中让表单不可修改方法总结 js实现按权重值随机抽取广告或记 最新文章 最新日志 最新帖子 H5和微信小游戏 Canvas API 整理 vue插件开发、文档书写、github发布、npm包发 使用jsonp完美解决跨域问题 JavaScript变量声明详解 js脚本实现数据去重 javascript制作坦克大战全纪录(1) javascript制作坦克大战全纪录(2) javascript 面向对象封装与继承 jQuery的ready方法详解 不能看到某个圆圈中的数字,就说明某方面潜伏问题 恶搞新交规 三个故事说穿了许多人 Linux下安装、启动MySQL 学习PHP&MySQL之——字符编码篇( Navicat连接本地Mysql出现10061错 MySQL Connector/Net 6.6. mysql主从同步图 "未找到 Oracle 客户端和网络组 .rmbq a{height:20px;padding:2px;line-height:20px;} 热门标签 精度 全栈式开 模板方法模式 wince程序 DatabaseObje 可执行文件 php 格式化段落 jquery.post 受访 CURD 批量上传图片 上移 移动文件夹 移植 学习过程 求 调用汇编 名字乱码 func_get_arg rabbitmq 目录作用 mysql表分区 R 36进制 过滤HTML 被挂木马 URLDecoder IIS7.5 外部程序 索引处 this指针 背景图 hostname Transactiona 求pi 事件捕获 sprite 核心参数 分页插件 淡入淡出 FLV 局部刷新 源代码 次数 php设计模式 加入Windows服务 base标签 复选框 一个队列 输出图像 sqlldr ksop 数据编程 在线生成条 wc命令 冲突 实体修改 增加账户 PHP内核探索 赞助商链接 关于我们 - 联系我们 - 广告服务 - 意见反馈 - 网站地图 - 版权声明 - 人才招聘 - 帮助 @CopyRight 2002-2008, 1SOHU.COM, Inc. All Rights Reserved QQ:1010969229 京ICP备18042785号-1 ♦▐返回顶部