Asp.net中小技巧—服务器端Web控件与客户端Html控件交互

简介:

Asp.net 基于Web开发中为了增强安全性,性能和良好的用户体验,其中难免会有服务器端和客户端控件进行一定交互,当然对于一些客户端框架Jquery,JS操作,和Ajax无刷新效果等等,较高用户需求下,这样的交互是非常频繁而且是保证良好的用户的最基本前提,下面来看看具体细节:

(1):客户端Html服务器端调用
纯客户端Html元素后台是看不见,添加runat="server" 即可, .CS后台文件中即可操作


 
 
  1. <input id="Contract" name="Contract"  maxlength="100" type="text" /> 
  2. <input id="Contract" name="Contract" runat="server" maxlength="100" type="text" /> 

(2)JS中调用
页面代码:


 
 
  1. <div class="zhuce_b" id="zhuce_b"> 
  2.         <input id="person" name="person"  runat="server" type="checkbox"   onclick="Persion()" /> 
  3.         <a>个人</a> 
  4.         <input id="company" name="company" runat="server" type="checkbox" checked="checked" height="25px" onclick="Company()"/> 
  5.         <a>企业</a> 
  6. </div> 

JS调用:注意针对的ClintID(ClientID 表示由服务器端生成的客户端控件的ID,"经常用于在客户端脚本中访问服务器控件所呈现的 HTML 元素")


 
 
  1. <script language="javascript" type="text/javascript">  
  2.      function Persion()  
  3.      {  
  4.       document.getElementById("<%=company.ClientID%>").checked=false;  
  5.       document.getElementById("<%=content_bottom.ClientID%>").style.display='none';  
  6.         
  7.      }  
  8. </script> 

一般情况下与服务器端的 ID 相同,有时,不能为控件生成唯一的名称,例如,如果Repeater 空间在它的某个模板中包含一个 Label 控件,则将在客户端生成多个该 Lable  HTML 元素为防止命名冲突,ASP.NET 为各个服务器控件生成一个唯一的 ClientID ,ClientID 通过将子控件的父控件的 UniqueID 值与控件的 ID 值连接生成,各个部分之间以下划线 _ 连接

JS中同样也可以通过上述的方式调用服务器端控件,并进行简单的操作,操作流程是一样的
JS调用服务器端事件方法:


 
 
  1. --页面代码    
  2. <asp:LinkButton ID="TestAsyMethod" runat="server" Style="display:none;" 
  3.                   onclick="TestAsyMethod_Click"  >TestCallServer</asp:LinkButton>  
  4.                   <br />  
  5.               <b><a onclick="TestFunction()">测试数据</a></b> 

页面代码中通过定义一个隐藏的LinksButton的Onclick事件,事件中写入你需要处理程序代码,在页面通过Js-TestFunction()调用这个

TestAsyMethod_clicks事件(其实利用类似Ajax中原理中回调机制),JS代码如下:


 
 
  1. --JS调用代码  
  2. <script language="javascript" type="text/javascript">  
  3.  
  4.     function TestFunction() {  
  5.         __doPostBack('<%= TestAsyMethod.UniqueID %>''');  
  6.     }  
  7. </script> 

(3)控件双向交付(服务器端和客户端)
首先在客户端判断用户输入,在提交后台操作 key(关键字)onClintClick事件


 
 
  1. <!--注册操作-->  
  2.   <asp:ImageButton ID="registerBut" runat="server" ImageUrl="../Images/reg.gif" onclick="registerBut_Click" OnClientClick="TestClintEvent()" 
  3.             /> 

onClintClick事件:


 
 
  1. function TestClintEvent()  
  2.   {    
  3.           //判断用户是否阅读条款  
  4.           if(document.getElementById("protocle").checked==false)  
  5.           {  
  6.             alert('请阅读相关注册条款并选中复选框!');  
  7.             document.getElementById("protocle").focus();  
  8.             return false;  
  9.           }  
  10.       return true;  
  11.   } 

在Web页面测试结果如下 详细截图如下: 

后台操作提交到Onclick服务器端事件中(省略)
首先在客户端判断用户的输入情况,如果输入正确提交,注意用到的是OnClentClick事件调用客户端JS事件,返回值是布尔值True或false,如果返回为True直接触发服务器事件OnClick到后台操作,为False时不执行服务器端事件,停滞在客户端.后台对客户端操作主要引用空间:System.Web.UI.HtmlControls.HtmlForm 
System.Web.UI.LiteralControl

(4)JS全选CheckBox最佳方案:

Js全选checkBox很常用 做了一个判断三次表达式解决方案 比骄好用


   
   
  1. <script language="JavaScript">  
  2.   <!--  
  3.      function check()  
  4.      {  
  5.          var inputs = document.getElementsByTagName('input');  
  6.          var inputsLen = inputs.length;  
  7.          for (var i = 0; i < inputsLen ; i++ )  
  8.          {  
  9.              if (inputs[i].type.toLowerCase() == 'checkbox')  
  10.              {  
  11.                  inputs[i].checked == true   
  12.                      ? inputs[i].checked = false 
  13.                      : inputs[i].checked = true;  
  14.              }  
  15.          }  
  16.      }  
  17.   //-->  
  18.   </script> 

(5)Asp.net检测是否获得网络连接:

在GIS中我们调用的是Google的API函数来加载谷歌库中指定图片 而前提是就必须获得网络连接 ,调用.net中API系统轻松判断当前网络连接状态:使用一个简单的InternetGetConnectedState API函数,结果是返回一个boolean类型的变量,这个函数有两个参数第一个是带有out关键字的整型数,也就是说在调用函数后,变量应该包含一个描述连接状态(使用调制解调器、使用代理、离线模式)的整型数。你可以到http://www.msdn.com/获取更多相关信息。 第二个参数设置为零的保留变量. 测试一下:


   
   
  1. using System.Runtime.InteropServices;//调用系统API函数NameSpace  
  2.    
  3.  protected void Page_Load(object sender, EventArgs e)  
  4.          {  
  5.              if (!IsPostBack)  
  6.              {  
  7.                  if (!NewWorkIsConnection())  
  8.                  {  
  9.                     // Response.Write("没有连接到网络!");  
  10.                      ShowMessageBox("没有连接到网络");  
  11.                  }  
  12.                  else 
  13.                  {  
  14.                     // Response.Write("已连接到网络!");  
  15.                      ShowMessageBox("已连接到网络");  
  16.                  }  
  17.              }  
  18.          }  
  19.    
  20.          //检测网络连接是否连接到Internet 导入DLL  
  21.          [DllImport("wininet.dll")]  
  22.          private extern static bool InternetGetConnectedState(out int connectionDescription, int reservedValue);  
  23.    
  24.          // Use DllImport to import the Win32 MessageBox function. 调用系统Win32的Messagebox  
  25.          [DllImport("user32.dll", CharSet = CharSet.Auto)]  
  26.          public static extern int MessageBox(IntPtr hWnd, String text, String caption, uint type);  
  27.    
  28.    
  29.          //定义一个检测方法测试是否连接上网络  
  30.          public bool NewWorkIsConnection()  
  31.          {  
  32.              int connectionDescription = 0;  
  33.              return InternetGetConnectedState(out connectionDescription, 0);  
  34.          }  
  35.    
  36.          public void ShowMessageBox(string getmessage)  
  37.          {  
  38.              MessageBox(new IntPtr(0), getmessage, "调用系统API来显示提示框", 4);  
  39.              //0-只有确定按钮 1-有确定和取消 按钮 2-有中止 重置 忽略三个按钮   
  40.               //3-具有三个 是 否 取消 按钮  4-只有是 和否 两个按钮  
  41.              //注意弹出的提示框为一个单独应用程序 只是基于页面触发  
  42.    
  43.          } 

(6)Asp.net中调用CMD获取网络连接状态:

上面通过简单的调用系统API函数来获取当前网络连接状态, 但连接不上并没有提示任何详细信息,这对提示用户信息看到是相当不友好的,程序可以同类似执行CMD中ping主机来获得详细连接时目标主机的详细信息,写了一个测试方法如下:调用时只需要输入固定域名即可返回网络连接的详细结果-


   
   
  1. using System.Diagnostics;//命名空间提供特定的类,使您能够与系统进程、事件日志和性能计数器进行交互  
  2.    
  3.          /// <summary>  
  4.          /// 检测当前网络连接调用CMD命名 -输入域名HosterNewWorkIp 例如:谷歌-www.google.cn 即可  
  5.           /// Author:chenkai Date:2010年1月30日10:59:52  
  6.          /// </summary>  
  7.          public string CheckNewWorkIsConnection(string HosterNewWorkIp)  
  8.          {  
  9.              //新建一个Process进程  
  10.              Process p = new Process();//Process类提供对本地和远程进程的访问并使您能够启动和停止本地系统进程操作  
  11.              //设定必要属性  
  12.              p.StartInfo.FileName = "cmd.exe";  
  13.              p.StartInfo.UseShellExecute = false;  
  14.              p.StartInfo.RedirectStandardInput = true;//介于CMD输入  
  15.               p.StartInfo.RedirectStandardOutput = true;//基于CMD输出  
  16.               p.StartInfo.RedirectStandardError = true;//  
  17.              p.StartInfo.CreateNoWindow = true;//是否创建窗口  
  18.    
  19.              string pingrst;  
  20.              p.Start();//开始执行Process  
  21.    
  22.              p.StandardInput.WriteLine("ping -n 1 " + HosterNewWorkIp);  
  23.              p.StandardInput.WriteLine("exit");  
  24.              string strRst = p.StandardOutput.ReadToEnd();  
  25.    
  26.              //获取ping返回的状态值  
  27.              if (strRst.IndexOf("(0% loss)") != -1)  
  28.                  pingrst = "连接";  
  29.              else if (strRst.IndexOf("Destination host unreachable.") != -1)  
  30.                  pingrst = "无法到达目的主机";  
  31.              else if (strRst.IndexOf("Request timed out.") != -1)  
  32.                  pingrst = "超时";  
  33.              else if (strRst.IndexOf("Unknown host") != -1)  
  34.                  pingrst = "无法解析主机";  
  35.              else 
  36.                  pingrst = strRst;  
  37.    
  38.              p.Close();//Prcess 最后注意关闭  
  39.    
  40.              return pingrst;//返回ping后结果  
  41.          } 

在本地CMD测试结果 截图如下 仅供对比参考:


本文转自chenkaiunion 51CTO博客,原文链接:http://blog.51cto.com/chenkai/765345


相关文章
|
3月前
|
存储 Web App开发 移动开发
HTML5 Web 存储详解
HTML5 Web存储提供了两种客户端数据存储机制:**Local Storage**和**Session Storage**。Local Storage用于长期存储数据,即使关闭浏览器数据也依然存在,适用于保存用户偏好设置等信息。Session Storage则在标签或窗口关闭时清除数据,适合存储临时信息。两者均提供了简单的API进行数据的存取操作,但需要注意的是,Web存储并非加密存储,不应存放敏感信息。现代浏览器普遍支持Web存储,合理利用这两种存储方式可提升Web应用的用户体验。
|
3月前
|
存储 移动开发 大数据
HTML5 Web IndexedDB 数据库详解
IndexedDB 是一种高效的浏览器存储方案,允许在本地存储大量结构化数据,支持索引和事务,适用于需要离线和大数据处理的应用。它由数据库、对象仓库等组成,通过键值对存储数据,确保数据一致性和完整性。本介绍展示了如何创建、读取、更新和删除数据,以及事务和错误处理的最佳实践。
|
2月前
|
开发框架 .NET C#
在 ASP.NET Core 中创建 gRPC 客户端和服务器
本文介绍了如何使用 gRPC 框架搭建一个简单的“Hello World”示例。首先创建了一个名为 GrpcDemo 的解决方案,其中包含一个 gRPC 服务端项目 GrpcServer 和一个客户端项目 GrpcClient。服务端通过定义 `greeter.proto` 文件中的服务和消息类型,实现了一个简单的问候服务 `GreeterService`。客户端则通过 gRPC 客户端库连接到服务端并调用其 `SayHello` 方法,展示了 gRPC 在 C# 中的基本使用方法。
50 5
在 ASP.NET Core 中创建 gRPC 客户端和服务器
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
52 6
|
2月前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
45 5
|
3月前
|
存储 移动开发 数据库
HTML5 Web IndexedDB 数据库常用数据存储类型
IndexedDB 支持多种数据存储类型,满足复杂数据结构的存储需求。它包括基本数据类型(如 Number、String、Boolean、Date)、对象(简单和嵌套对象)、数组、Blob(用于二进制数据如图像和视频)、ArrayBuffer 和 Typed Arrays(处理二进制数据)、结构化克隆(支持 Map 和 Set 等复杂对象),以及 JSON 数据。尽管不直接支持非序列化数据(如函数和 DOM 节点),但可以通过转换实现存储。开发者应根据具体需求选择合适的数据类型,以优化性能和使用体验。
|
3月前
|
移动开发 JavaScript 前端开发
HTML5 Web Workers详解
HTML5 Web Workers 允许在后台线程中运行 JavaScript,实现复杂计算而不影响用户界面,提升应用性能。其主要特性包括并行处理、异步通信、独立作用域及多数据类型支持。通过创建和使用 Worker 文件,如 `worker.js`,可执行后台任务,并与主线程通过消息传递机制通信。适用于数据处理、图像处理、复杂计算及网络请求并行等场景。需要注意的是,Web Workers 在浏览器兼容性、安全性限制、调试及资源消耗方面需特别关注。合理利用 Web Workers 可显著增强 Web 应用的流畅度和响应速度。
|
3月前
|
SQL 存储 移动开发
HTML5 Web SQL 数据库详解
Web SQL 数据库是 HTML5 中的一种本地存储技术,允许在浏览器中使用 SQL 语言操作本地数据,支持离线访问和事务处理,适用于缓存数据和小型应用。然而,其存储容量有限且仅部分现代浏览器支持,标准已不再积极维护,未来可能被 IndexedDB 和 localStorage 等技术取代。使用时需谨慎考虑兼容性和发展前景。
|
3月前
|
存储 移动开发 缓存
HTML5 Web 存储详解
HTML5 Web 存储包括 `localStorage` 和 `sessionStorage`,前者提供持久存储且无过期时间,后者仅在会话期间有效。两者均支持键值对形式存储数据,容量约为 5-10 MB。`localStorage` 适用于用户偏好设置、登录状态保持及离线应用缓存;`sessionStorage` 则用于临时数据如表单输入。数据以字符串形式存储,可通过 `JSON` 方法处理对象。由于数据存储于本地,不适合存放敏感信息。示例代码展示了如何使用按钮将输入框内容保存至 `localStorage` 并进行清除操作。
|
3月前
|
移动开发 前端开发 JavaScript
HTML与现代Web开发的不同技术
【10月更文挑战第11天】HTML与现代Web开发的不同技术
42 0