您的位置:首页 > Web前端 > JavaScript

结合JavaScript与ASP.NET Web窗体进行程序开发

2007-12-15 20:46 417 查看
ASP.NET为Web程序开发提供了新的范例.其中包括一系列基于服务器的控件, 这些控件类似于HTML窗体中诸如文本框、按钮等元素.使用这些控件的问题是必须调用服务器.JavaScript为很多任务提供多种选择的机会, 而这些过程不需要调用服务器.让我们来看结合JavaScript与ASP.NET所带来的强大功能. 性能是必需的 调用服务器要求带宽和服务器处理时间, 然而对一个可以享受高速流通的局域网程序将不会有任何问题, 但是在广域网中就是不同的情况.一个因特网用户连接速度的不同主要取决于用户的拨号调制解调器、带宽或者电缆调制解调器.使用用户型的JavaScript可以不需要调用服务器.
传统方法
一个标准的网页窗体包括像标题框、正文和窗体在内的页面.JavaScript函数按传统方法被放置在网页窗体的标题框, 这些函数允许被页面的其它部分载入和利用, 一旦被载入, 这些函数将从HTML元素中调用.
让我们看看一个简单的JavaScript的例子:
function valSubmit( )
{
var doc = document.forms[0];
varmsg = "";
if ( doc.firstName.value == "" ) { msg += "- Please enter a first name.n"; } if ( doc.lastName.value == "" )
{
msg += "- Please enter a last name.n"; } if ( msg == "" )
{
doc.submit( );
}
else
{
alert( "The following errors wereencountered.nn" + msg );
}
}
这一函数将检验数据被传送到窗体中的两个HIML区.如果其中一个区是空的, 将显示错误信息并且停止运行.如果两个区都有值时, 窗体被提交, 你可以使用以下的代码调用这一函数:
<input type = "button" value = "submit"name = "btnSubmit" onClick = "valSubmit( ); "> 利用这一关系, 在HIML区没有数据之前, 窗体是不会被提交的.这样我们可以看到, 代码变得更加简单, 但是由于无需调用额外的服务器而不会产生任何副作用.JavaScript简短而实用, 这就意味着窗体不需要额外的载入时间.
ASP.NET网页窗体允许使用标准的HTML, 因此你可以容易地使用前面的范例.ASP.NET用户控件允许你很轻松地调用服务器代码来处理Web窗体.庆幸的是, 用户控件和JavaScript的结合使用完全是可以的.我将利用一个ASP.NET按钮控件的例子来说明这一使用过程.
按钮控件的所有属性提供了将JavaScript连接到控件的方式.首先, 将JavaScript函数放置在ASP.NET网页窗体中, 但是通过添加返回值可以改变放置的方法.如果确认通过, 函数值返回为真, 与按钮相关的服务器函数就会别调用.如果返回值为假, 则窗体不会被提交.
<%@ Page language = "c#" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ><html><head><title>WebForm1</title><script language = "javascript">function valSubmit( )
{
var doc = document.forms[0];
varmsg = ""; if ( doc.firstName.value == "" )
{
msg += "- Please enter a first name.n";
}
if ( doc.lastName.value == "" ) { msg += "- Please enter a last name.n"; } if ( msg == "" )
{
doc.submit( );
return true;
}
else
{
alert( "The following errors were encountered.nn" + msg );
return false;
}
}
</script><script language = "C#" runat = "server">
private void btnSearch_Click( object sender, System.EventArgs e )
{
Response.Write( "Search" );
}

private void Page_Load( object sender, System.EventArgs e )
{
btnSubmit.Attributes.Add( "onClick", "return valSubmit( ); " );
}
</script></head><body><form id = "frmBuilderTest" method = "post" runat = "server"><label style = "Z-INDEX: 101; LEFT: 10px; POSITION: absolute; TOP: 48px">First Name:</label><input style = "Z-INDEX: 102; LEFT: 88px; POSITION: absolute; TOP: 48px"type = "text" name = "firstName" id = "firstName"><label style = "Z-INDEX: 103; LEFT: 10px; POSITION: absolute; TOP: 88px">Last Name:</label><input style = "Z-INDEX: 104; LEFT: 88px; POSITION: absolute; TOP: 88px"type = "text" name = "lastName" id = "lastName"><br /><br /><asp:Button id = "btnSubmit" style = "Z-INDEX: 105; LEFT: 64px; POSITION: absolute; TOP: 128px" runat = "server" Text = "Submit" Width = "136px"OnClick = "btnSearch_Click"></asp:Button></form></body></html> 这些代码中最为关键的一行是:
btnSubmit.Attributes.Add( "onClick", "return valSubmit( ); " );
通过风格属性使用CSS可以将元素放置在HIML窗体.窗体将JavaScript函数和ASP.NET 按钮 ( btnSubmit )以及HTML的onClick事件连接起来.在窗体被提交给服务器时, ASP.NET Button 中的onClick属性会通知系统调用哪些函数.
如果你是一名VB.NET开发人员, 对于前面代码, 只需要改变代码中的C#模块.VB.NET相应的代码如下:
<script language = "vb" runat = "server">Private btnSearch_Click ( sender As Object, e As System.EventArgs )Response.Write( "Search" )End SubPrivate Page_Load( sender As Object, e As System.EventArgs )btnSubmit.Attributes.Add( "onClick", "return valSubmit( ); " )End Sub</script> 功能强大的JavaScript和ASP.NET结合
JavaScript是面向用户网页开发的实用标准语言, 它与ASP.NET Web窗体的结合, 为开发人员提供了一个功能强大的用于构建稳固程序的工具集, 而程序的稳固性被认为软件性能的一个关键组成部分.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: