1  /  1  页   1 跳转 查看:1642

HTML服务器控件

HTML服务器控件

HTML Server Controls
本书的重点是使用ASP.NET服务器控件。然而,了解和使用HTML及HTML服务器控件,对在现实中开发应用程序是有帮助的。
服务器不会处理普通的HTML控件,例如,<h1>、<a>和<input>,它们将直接被发送到客户端,由浏览器进行显示。可以为服务器提供标准的HTML控件,将它们转换为HTML服务器控件,使得它们能在服务器端处理。
将HTML控件转换为HTML服务器控件,只需简单地添加runat="server"属性。另外,可能您还会添加id属性,这样可以通过编程方式访问和控制控件。例如,下面从一个简单的输入控件开始:
<input type="text" size="40">
您可以添加id和runat属性,将它转换为HTML服务器控件,如下所示:
<input type="text" id="BookTitle" size="40" runat="server">
基于以下两个主要原因,可选择使用HTML服务器控件,而不是ASP.NET服务器控件:
为了在ASP.NET下运行,转换现有的HTML页
为了在ASP.NET下运行转换的现有的HTML页,您须将文件的扩展名修改为.aspx。然而,HTML控件只能运行在客户端,而不是服务器端。为了获得如自动维护状态(见第6章)等服务器端处理的优势,必须为控件添加runat属性。
使用HTML表格实现页面布局
服务器端控件消耗服务器资源。通常,页面使用静态表格实现布局。除非须要引用一个或多个表格元素,否则,无须进行服务器端处理。下面的示例说明了这一要点。
在VS2005中,新建一个网站,并将其命名为HtmlServerControls。从“Toolbox”中拖动一个HTML表格控件到设计区。将该表格设置为2列6行。将一个HTML按钮拖动到页面中,并且置于表格下方。接着设置按钮的ID和runat="server"属性。
在表格第一行的第一个单元格中,输入文本字符串Name,然后在第二个单元格中,添加一个Input(文本框)控件。将Input控件的ID设置为txtName。接下来的三行与之类似,三个Input控件分别命名为txtStreet、txtCity和txtState。保留表格第5行

的空白。保留最后一行第二列的空白,并将它的ID设置为tdInnerHtml。设计视图如图3-5所示,其中标识了控件名称。

图3-5:HTML控件的页面布局

确认所有被命名的控件都设置了runat="server"属性。然而,页面上其他表格元素,既不需要ID属性,又不需要runat属性。因为,它们都用作静态显示,而无须在服务器上处理。
在设计视图中,双击按钮以便在代码隐藏文件中添加事件处理程序。输入以下突出显示的代码:
protected void btnDoIt_ServerClick(object sender, EventArgs e)
{
  string strHtml = "";
  strHtml += txtName.Value + "<br/>";
  strHtml += txtStreet.Value + "<br/>";
  strHtml += txtCity.Value + ", " + txtState.Value;
  tdInnerHtml.InnerHtml = strHtml;
}
如果查看Default.aspx文件源视图中按钮的HTML代码,您将会发现,按钮包含一个onServerClick属性,而不是常规HTML或ASP页面中使用的onServer属性。这就在告知服务器:当Click事件发生时,应调用的函数是:

提示:如果希望控件在客户端处理事件,那么应使用传统的onClick属性。在这种情况下,必须提供客户端脚本来处理事件。
您可以在同一个按钮控件中,包含onClick和onServerClick属性。这种情况下,将首先执行客户端代码,而后再运行服务器端代码。本章稍后将做示范。
如果留意一下Click事件处理程序会发现,每次单击“Do It!”按钮,它都会被执行。您将看到一个HTML字符串中包含了输入文本框的值,同时,还会加上些HTML作为换行。这个字符串被指定给一个表格单元格的InnerHtml属性,该单元格id属性值为tdInnerHtml:
tdInnerHtml.InnerHtml = strHtml
如果使用InnerText属性替换InnerHtml属性,那么结果页则显示<和>符号。然而,采用这样方式,当在文本域中输入值,并单击按钮之后,结果页如图3-6所示。

图3-6:具有InnerHtml的HTML服务器控件

表3-5列举了HTML标签,以及它们属于的类别。在图3-5和3-6所示的示例中,两个输入控件的类型分别是文本域和按钮。如表3-5所示,这二者都使用了<input>这样的HTML标签,而其他输入控件则没有使用该标签。

表3-5  HTML标签及其类别

HTML标签
类  别
HTML服务器控件名称
说  明
<head>
容器
HtmlHead
<head>元素。可以在它的控件集合中添加其他元素
<input>
输入
HtmlInputButton
HtmlInputCheckbox
HtmlInputFile
HtmlInputHidden
HtmlInputImage
HtmlInputPassword
HtmlInputRadioButton
HtmlInputReset
HtmlInputSubmit
HtmlInputText
<input type=button | submit | reset>
<input type=checkbox>
<input type=file>
<input type=hidden>
<input type=image>
<input type=password>
<input type=radio>
<input type=reset>
<input type=submit>
<input type=text | password>
<img>

HtmlImage
图片
<link>

HtmlLink
Href属性读取/设置URL目标
<textarea>
输入
HtmlTextArea
多行文本输入
<a>
容器
HtmlAnchor
锚标签
<button>
容器
HtmlButton
可自定义输出格式,IE 4.0及以上版本可用
<form>
容器
HtmlForm
每个页面最多只能有一个HtmlForm控件;method默认为POST
<table>
容器
HtmlTable
表格,可以包含行,行中包含单元格
<td> <th>
容器
HtmlTableCell
表格单元格;表格标题单元格
<tr>
容器
HtmlTableRow
表格行
<title>
容器
HtmlTitle
标题元素
<select>
容器
HtmlSelect
用于选择的下拉菜单
容器
HtmlGenericControl
没有列出任何HTML控件

提示:实际上,在一个内容文件,例如,页面、用户控件或者母版页中,您不会仅使用表3-5中所示的HTML服务器控件名称。您的HTML代码中,还经常会包括runat="server"属性,还有id属性。
任何HTML控件加上runat="server"属性,都可转换成服务器端处理。它们作为HtmlGenericControl并未在表3-5中列出。所有容器控件,都允许通过编程方式访问控件内部的HTML。
所有HTML服务器控件都从System.Web.UI.Control类派生,都包含在System.Web.UI.HtmlControls命名空间之下。如图3-7显示了HTML服务器控件的对象层次结构。

图3-7:HTML服务器控件对象层次结构



 感谢原创者的辛勤劳动,希望对您有所帮助,转载请注明原出处。
 您可能对 [Asp.Net] 的这些文章也感兴趣:

.NET Framework 3.0 版本命名與部署 Q
在ASP.Net中两种利用CSS实现多界面的方法
ASP.NET 链接数据库基础
ASP.NET 2.0中直接将Access数据库导入到Excel文件中
如何在asp.net中操作文件
ASP.NET中为DataGrid添加合计字段
ASP.NET上传文件的实例
ASP.Net Web Page深入探讨二
ViewState——自定义状态管理(二)
asp.net StreamReader 创建文件
 

回复: HTML服务器控件

ASP.NET的核心是服务器端处理。然而,这种方式存在一些缺点。主要问题是:任何处理开始之前,都必须回传到服务器。甚至对于通过本地高速网络连接到服务器的Intranet应用程序,也是如此。这将常常给用户带来显而易见的,无法接受的延迟体验。对于那些经过高速宽带连接的Internet应用程序而言,这种延迟似乎变得更加漫长。
客户端处理可为用户行为提供及时响应,因此能够显著改善用户体验。它们可使用诸如JavaScript或者VBScript这样的脚本语言来实现。
某些ASP.NET服务器控件使用客户端脚本,来提供用户行为响应,而不需要回传到服务器。典型的如,验证控件下载脚本到浏览器,那么,无效数据将在浏览器中被捕捉和
标记,而不需要回传到服务器。然而,在这些情况下,客户端脚本由ASP.NET提供,而开发人员则不用编写或管理脚本。
如同您所了解的,从ASP.NET服务器控件调用客户端代码是可能的。另外,ASP.NET服务器控件中的Button控件包含一个OnClientClick属性,该属性允许您指定客户端脚本,并且当按钮被单击时执行脚本。
常规的HTML控件和HTML服务器控件包含许多事件,当它们被引发时,则可执行脚本。脚本包含在内容文件的脚本块,或者包含在控件声明的属性内。如前文所述,HTML按钮控件的onclick和onserverclick属性,就可以用来处理单击事件。表3-6列出了HTML控件可以使用的一些常用事件。

表3-6  常用的HTML事件

事  件
说  明
onblur
当控件失去焦点时触发
onfocus
当控件接收焦点时触发
onclick
当控件被单击时触发
onchange
当控件的值发生修改时触发
onkeydown
当用户按键时触发
onkeypress
当用户按文字或数字键时触发
onkeyup
当用户松开键时触发
onmouseover
当鼠标指针移动到控件上时触发
onserverclick
当控件被单击时抛出一个ServerClick事件

为了解客户端脚本如何工作,需要新建一个名为ClientSideProcessing的网站。在内容文件的源视图中,将下面的脚本块添加到</head>关闭标签和<body>打开标签之间:
<script language=javascript>
  function ButtonTest(  )
  {
      alert("Button clicked - client side processing");
  }
  function DoChange(  )
  {
      document.getElementById("btnSave").disabled=false;
  }
</script>
在打开的<script>标签中,使用language属性指定编程语言,当前情况使用的是JavaScript。在该示例中,实现了两个不同的函数。ButtonTest函数调用alert方法弹出一个对话框。DoChange函数启用了一个Save按钮。程序实现了一个场景,即首先将Save
按钮指定为不可用,一直到用户修改了某些数据,才启用Save按钮。
提示:学习JavaScript超出了本书的范围。可阅读O’Reilly出版的,由David Flanagan所著的《JavaScript权威指南(第四版)》(JavaScript: The Definitive Guide, Fourth Edition)。
向窗体添加以下控件:一个HTML按钮、两个ASP.NET按钮、一个HTML输入文本框和一个ASP.NET的TextBox。如示例3-5所示,您可以将控件拖到窗体上,然后重命名控件,并且设置属性。两个HTML控件都包含ID和runat属性,它们则成为了服务器控件。btnServer控件设置了OnClientClick属性,同时,btnSave控件的Enabled属性被设置为false。
示例3-5:Default.aspx中的控件进行客户端处理
<h1>Client-Side Processing</h1>
<input id="btnHTML" runat=server type="button"
      value="HTML Button"

      />
<asp:Button ID="btnServer" runat="server"
            Text="ASP.NET Button"
            />
<br />
<input id="txtHTML" type="text" runat="server"
        /><br />
<br />
<asp:TextBox ID="TextBox1" runat="server"
            ></asp:TextBox>
<br />
<asp:Button ID="btnSave" runat="server"
            Text="Save" Enabled=false />
在设计视图中,双击“btnHTML”控件,以便在代码隐藏文件中创建事件处理程序。接着添加以下高亮显示的代码:
protected void btnHTML_ServerClick(object sender, EventArgs e)
{
  txtHTML.Value = "An HTML server control";
}
在设计视图中,双击“btnServer”来为按钮创建事件处理程序,接着在代码隐藏文件中添加以下高亮显示的代码:
protected void btnServer_Click(object sender, EventArgs e)
{
  txtHTML.Value = "An ASP.NET server control";
}
此时运行页面。初始情况下,Save按钮不可用(灰色)。单击“HTML”按钮将触发JavaScript函数ButtonTest,即弹出对话框“Button clicked - client side processing.”。一旦在对话框中单击了确定按钮,服务器端代码则开始执行。即在HTML输入框中创建一个“An HTML server control.”字符串。同样,单击ASP.NET服务器按钮将弹出相同的对话框,并在HTML输入框中创建“An HTML server control.”字符串。修改任一文本框中的内容,都将启用Save按钮。
从ASP.NET服务器控件调用客户端脚本,本质上是一个非正式特性,它不同于使用Button.OnClientClick属性。它实际利用了一个有利条件来工作,即控件声明的任何属性,只要ASP.NET无法识别,就会不加修改地传递给浏览器。
可在浏览器中查看页面源文件。上面代码段中,ASP.NET的TextBox在浏览器中输出为:
<input name="TextBox1" type="text" id="TextBox1"
  />
既然HTML输入控件的onchange是有效事件,那么JavaScript函数就会正确执行。
 

回复:HTML服务器控件

非常有用,可以达到无刷新效果
 
1  /  1  页   1 跳转

快速回复帖子

标题
禁用 URL 识别
禁用表情
禁用 Discuz!NT 代码
使用个人签名
  [完成后可按 Ctrl+Enter 无刷新发布]  

版权所有 拼吾爱程序人生    Total Unique Visitors:

web counter

Powered by Discuz!NT 2.1.202   Copyright © 2001-2008 Comsenz Inc. 鄂ICP备07500843号
返顶部