在ASP.Net中应用Javascript

原创 2007年10月12日 13:10:00

一、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,比如<asp:textbox>生成input text。表单中的每个HTML控件都有它自己的Javascript事件,比如Textbox有onchange事件,Button有onclick事件,Listbox有onchange事件等。要想为服务器控件添加客户端的事件,需要用到Attributes属性。Attributes属性是所有的服务器控件都有的一个属性,它用来为最终生成的HTML添加自定义的一些标记。假设Web Form上有一个保存按钮btnSave,希望在用户点此按钮时提示用户是否确实要保存(比如一旦保存就无法恢复等),则应在Page_Load事件中添加如下代码:

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的声明中添加如下代码:

<asp:datagrid id="grd1" runat="server" OnItemDataBound = "ItemDataBound" >

…Columns definition here

</asp:datagrid> 此处说明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上看就是在每个<tr>里增加了一个onclick事件。Page.GetPostBackClientHyperLink方法返回页面中LinkButton控件产生的客户端脚本,其中第一个参数是Linkbutton控件,第二个参数是传递给此控件的参数,通常为空。如果不是LinkButton控件,有一个类似的函数GetPostBackClientEvent,读者可以参考MSDN。

服务器产生的脚本与手工添加的脚本冲突

服务器控件服务器事件一般对应到客户端控件的相应事件,如Dropdownlist的SelectedIndexChanged事件对应HTML <Select>的onchange事件。如果你要手工增加一个onchange事件,则会在客户端产生两个onchange,浏览器就会忽略掉一个。比如用户希望每当改变了Dropdownlist中的选项就保存到数据库(虽然不是很常见,但确实有这种需要),但同时还希望提醒用户是否确实要做保存。显然,保存的代码应该放在SelectedIndexChanged事件中,而提醒的工作应该手工加一段onchange事件。结果就是两个onchange只能执行一个。正确的方法应该是添加一个不可见的保存按钮,在手工增加的onchange事件中调用此按钮生成的程序。

Page_Load方法如下:

Dim sCmd as string

sCmd=Page.GetPostBackClientHyperlink(btnUpdate, "")

If not page.isPostback then

Dropdownlist1.Attributes.add("onchange","ConfirmUpdate(""" & sCmd & """)")

End if

ConfirmUpdate函数如下

<Script language=”javascript”>

function ConfirmUpdate(cmd){

if confirm(“Are you sure to update?”)

eval(cmd);

}</Script>

这里利用了Javascript eval函数来调用一个字符串中包含的命令。需注意的是包含命令的字符串不能用单引号括起来,因为自动生成的脚本中包括单引号,所以这里用两个双引号表示字符串本身的双引号。

三、结束语

以上简单讨论了在ASP.Net中插入Javascript的几种情况。合理地在服务器程序中插入客户端的Javascript脚本,可以提高程序的运行效率并提供更友好的用户界面。 

ASP.NET 后台调用前台javascript 的方法

从服务端调用客户端函数来操作,也就是在asp.net中调用javascript脚本中已经定义好的脚本函数。一般有以下几种方法 1. Response.Write : 比如在你单击按钮,先操作...
  • softuse
  • softuse
  • 2016年10月09日 11:35
  • 1174

Asp.Net 如何调用js中的函数function ?

http://bbs.csdn.net/topics/330215458 1、直接在前台调用 javascript 函数  很简单,在 head 元素之间加入 script 元素,将 ty...
  • DJ2008
  • DJ2008
  • 2013年09月28日 17:34
  • 5432

JavaScript的应用在什么地方?

JavaScript的应用在什么地方?JavaScript虽然与Java的名称类似,但二者不论在性质上还是在用途上都大不相同:Java是一种类似于C++的高级语言   JavaScript虽然与...
  • pi19740306
  • pi19740306
  • 2015年01月29日 10:25
  • 1357

ASP.NET MVC4 乱七八糟罗列

一、ASP.NET MVC概述1、什么是ASP.NET MVC?ASP.NET MVC是微软官方提供的MVC模式编写ASP.NET Web应用程序的一个框架。是微软继ASP.NET WebForm后的...
  • taomanman
  • taomanman
  • 2016年09月19日 10:29
  • 1065

asp.net与JS传值、访问值

如何在C#中访问JavaScript函数? c#代码中执行javaScript函数: 方法一:ClientScript.RegisterStartupScript(this.GetType(), ...
  • sunroyi666
  • sunroyi666
  • 2016年07月08日 16:53
  • 2187

在ASP.NET MVC应用程序中防止JavaScript注入式攻击

在本文中,我们将探讨如何在ASP.NET MVC应用程序中有效地防范JavaScript注入式攻击的问题。   1、简介   在本文中,你将了解到JavaScript注入式攻击远比你可能想象的...
  • tiz198183
  • tiz198183
  • 2013年04月18日 17:25
  • 1224

ASP.NET中JavaScript 调用后台代码

前序:在不需要右击页面或回发的情况下刷新页面,即JS调用后台代码; 方法一:调用隐藏服务端按钮的点击事件        1、在前端放一个隐藏按钮,将需要调用的后台代码写入OnClick事件中;  ...
  • rosefly110
  • rosefly110
  • 2015年02月12日 18:06
  • 1437

ASP.NET CS文件中输出JavaScript脚本的3种方法以及区别

Response.Write 与   Page.ClientScript.RegisterStartupScript 与 Page.ClientScript.RegisterClientScriptB...
  • jumtre
  • jumtre
  • 2014年09月17日 15:30
  • 2020

充分发挥异步在 ASP.NET 中的强大优势

在本篇博文中,我们将讨论一下 IIS 和 ASP.NET 处理请求的方式,然后看看 ASP.NET 中哪些地方可以使用异步,最后再讨论几个最能体现异步优势的场景。...
  • wangpeng198688
  • wangpeng198688
  • 2016年04月13日 16:03
  • 505

ASP.NET—000:调试JS代码

ASP.ENT开发调试页面JS代码相信即使是菜鸟也会,不过我还是要啰嗦一下步骤。因为在页面使用JS太频繁了,而且也太容易出问题了。即使是高手在页面上写长篇的JS代码,也难免有bug出现,出了bug也只...
  • yysyangyangyangshan
  • yysyangyangyangshan
  • 2014年08月01日 22:01
  • 2758
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:在ASP.Net中应用Javascript
举报原因:
原因补充:

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