ASP.NET初了解---Html控件和Web控件

2024-09-05 09:08

本文主要是介绍ASP.NET初了解---Html控件和Web控件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

       作为一名ASP.NET的初学者,了解并且区别一些混淆概念是很必须的,今天这篇博文

就是主要向大家介绍一下Html控件和Web控件。在ASP.NET中,用户界面控件主要就是

Html控件Web控件,在前台页面上看,两种控件非常相似,那么究竟他们有什么不一

样呢?他们又分别适用于什么情况呢?这都是我们需要解决的问题。


     (一)首先,先来分别说一说Html控件和Web控件。


      Html控件它是标准的Html标签。代码如下:

[html] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. <span style="font-family:Microsoft YaHei;"><input id="txtUserName" type="text" /></p></span>  
<input id="txtUserName" type="text" /></p>

       值得注意的是,HTML控件可以通过修改代码将其变成服务器端控件,几乎所有的HT

ML标记只要加上runat="server",这个服务器控件标识属性后都可以变成服务器端控件。

这与普通HTML标记相比最大的区别在于,服务器端控件可以通过服务器端代码来控制。

例如:

[html] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. <span style="font-family:Microsoft YaHei;"><input id="txtUserName" type="text" runat="server"/></p></span>  
<input id="txtUserName" type="text" runat="server"/></p>

    

       Web控件:在这里,我们说的都是Web服务器控件。代码如下:

[html] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. <span style="font-family:Microsoft YaHei;"><asp:TextBoxIDasp:TextBoxID="txtUserName" runat="server">txtUserName</asp:TextBox></span>  
<asp:TextBoxID="txtUserName" runat="server">txtUserName</asp:TextBox>
       它类似 HTML 服务器控件,同样在服务器创建,它在创建时默认有runat="server" 属性 不过,Web 服务器控件不必映射任何已有的 HTML元素,它们可代表更复杂的元素。

       1.特点:

         (1.Web控件是对象,它与对象一样,拥有方法和属性,并且响应事件;

         (2)当Web控件包含在Web页中时,就可以设置其属性并调用其方法;

         (3)可以为Web控件编写服务器端代码以响应在客户端上发生的事件。(这点与

Html控件区别,Html控件是不能在服务器端控制的)

       2.分类:

 

 

     

     (二)再者,初步了解了HtmlWeb控件,我们还需要分析分析两者之间的区别。


       1.书写方面:   显而易见,与Web 服务器控件相比,Html控件没有 asp标记前缀,而

是使用Input

      (1)Web 控件:

[html] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. <span style="font-family:Microsoft YaHei;"><asp:TextBoxIDasp:TextBoxID="txtUserName"runat="server">txtUserName</asp:TextBox></span>  
<asp:TextBoxID="txtUserName"runat="server">txtUserName</asp:TextBox>

      (2)Html控件:

[html] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. <span style="font-family:Microsoft YaHei;"><input id="txtUserName" type="text"/></p></span>  
<input id="txtUserName" type="text"/></p>;
        2.响应事件方面:

      (1)Web 控件:Web控件可以响应服务器端事件,可以在后台代码中设置相关属性

和方法等;

      (2)Html控件:不可以响应服务器端事件,但是也是允许响应用户操作的事件的。

例如,按钮控件提供在用户单击按钮时将引发的 click 事件。你可以创建一个称为事件处

理程序的函数来处理该事件,然后向该控件注册此事件处理程序。

       关于如何注册此事件处理程序:一种方法是在HTML 中添加事件处理程序:将控件的

事件属性设置为 JavaScript 事件处理程序函数或 JavaScript语句的名称。另一种方法是

以编程方式添加它。对此我们不做过多解释,不是本篇的重点。

      3.编译处理方面:

      (1)Web 控件:Web控件需要通过服务器处理后译为HTML控件再发送给浏览器,

所以比较耗费服务器资源,并由于有VIEWSTATE,所以在回送的时候会保持控件状态(也

可以设置不保存)也因此增加了回送信息量。

      (2)Html控件:而Html控件则直接发送到浏览器,不另耗费服务器资源,但无状态

保存!     

       4.获取值方面:

      (1)Web 控件:获得HTML控件的值   需要使用REQUEST的FORM   方法,

      (2)Html控件:WEB控件就可以直接通过属性直接处理!

     (三)最后,根据以上方面的比较,我们可以得到一些经验:

       如果你不需要保存状态,也不需要获取值,那么可以考虑优先使用Html控件,反之,

如果需要对控件进行动态的处理,并且需要保存其状态,那么优先使用Web控件。

       说了这么多,你明白些了吗? 

这篇关于ASP.NET初了解---Html控件和Web控件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1138527

相关文章

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

解决JavaWeb-file.isDirectory()遇到的坑问题

《解决JavaWeb-file.isDirectory()遇到的坑问题》JavaWeb开发中,使用`file.isDirectory()`判断路径是否为文件夹时,需要特别注意:该方法只能判断已存在的文... 目录Jahttp://www.chinasem.cnvaWeb-file.isDirectory()遇

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re

JavaWeb-WebSocket浏览器服务器双向通信方式

《JavaWeb-WebSocket浏览器服务器双向通信方式》文章介绍了WebSocket协议的工作原理和应用场景,包括与HTTP的对比,接着,详细介绍了如何在Java中使用WebSocket,包括配... 目录一、概述二、入门2.1 POM依赖2.2 编写配置类2.3 编写WebSocket服务2.4 浏

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》:本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果,详细内容请阅读本文,希望能对你有所帮助... 过往的实现方法是使用浮动加

css渐变色背景|<gradient示例详解

《css渐变色背景|<gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变,本文介绍css渐变色背景|<gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景,可以看做是一种特殊的背景图片。(是作为背

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》:本文主要介绍了如何使用CSS自定义浏览器滚动条的样式,包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式,并提供了完整的CSS代码示例,通过这些技巧,你可以为你的网站添加个性化的滚动条样式,从而提升用户体验,详细内容请阅读本文,希望能对你有所帮助...

css实现图片旋转功能

《css实现图片旋转功能》:本文主要介绍了四种CSS变换效果:图片旋转90度、水平翻转、垂直翻转,并附带了相应的代码示例,详细内容请阅读本文,希望能对你有所帮助... 一 css实现图片旋转90度.icon{ -moz-transform:rotate(-90deg); -webkit-transfo

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要