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


相关文章
|
2月前
|
Linux Shell 网络安全
【Shell 命令集合 网络通讯 】Linux 与SMB服务器进行交互 smbclient命令 使用指南
【Shell 命令集合 网络通讯 】Linux 与SMB服务器进行交互 smbclient命令 使用指南
86 1
|
2月前
|
JSON Android开发 数据格式
android与Web服务器交互时的cookie使用-兼谈大众点评数据获得(原创)
android与Web服务器交互时的cookie使用-兼谈大众点评数据获得(原创)
51 2
|
1月前
|
NoSQL 大数据 Redis
分享5款.NET开源免费的Redis客户端组件库
分享5款.NET开源免费的Redis客户端组件库
|
2月前
|
存储 安全 数据安全/隐私保护
Web应用程序的会话管理是一种跟踪和识别特定用户与Web服务器之间交互的技术
【5月更文挑战第12天】Python Web开发中,会话管理用于跟踪用户与服务器交互,如Flask框架提供的内置功能。以下是一个简单示例:安装Flask后,设置应用密钥,通过session读写用户状态。例如,创建一个显示和设置用户名称的Web应用,用户提交的名字将保存在会话中。在生产环境中,应安全存储密钥,如使用环境变量。扩展会话管理可借助第三方库实现更多功能,但可能需更多配置。
236 2
|
2月前
|
JSON 编解码 Go
Golang深入浅出之-HTTP客户端编程:使用net/http包发起请求
【4月更文挑战第25天】Go语言`net/http`包提供HTTP客户端和服务器功能,简化高性能网络应用开发。本文探讨如何发起HTTP请求,常见问题及解决策略。示例展示GET和POST请求的实现。注意响应体关闭、错误处理、内容类型设置、超时管理和并发控制。最佳实践包括重用`http.Client`,使用`context.Context`,处理JSON以及记录错误日志。通过实践这些技巧,提升HTTP编程技能。
43 1
|
2月前
|
Go 开发者
Golang深入浅出之-HTTP客户端编程:使用net/http包发起请求
【4月更文挑战第24天】Go语言的`net/http`包在HTTP客户端编程中扮演重要角色,但使用时需注意几个常见问题:1) 检查HTTP状态码以确保请求成功;2) 记得关闭响应体以防止资源泄漏;3) 设置超时限制,避免长时间等待;4) 根据需求处理重定向。理解这些细节能提升HTTP客户端编程的效率和质量。
35 1
|
2月前
|
JSON JavaScript 前端开发
服务器通信:使用WebSocket与后端实时交互
【4月更文挑战第24天】WebSocket为解决服务器与客户端实时双向通信问题而生,常用于聊天、游戏和实时通知等场景。本文通过4步教你实现WebSocket通信:1) 客户端使用JavaScript创建WebSocket连接;2) 监听`open`、`message`和`close`事件;3) 使用`send`方法发送数据;4) 使用`close`方法关闭连接。服务器端则需处理连接和数据发送,具体实现依后端技术而定。WebSocket为现代Web应用的实时交互提供了强大支持。
|
2月前
|
Java 关系型数据库 应用服务中间件
webgis Web 服务器端开发
webgis Web 服务器端开发
36 1
|
2月前
|
SQL 开发框架 JavaScript
分享33个ASP.NET电子商务源码和40个ASP.NET控件组件源码,总有一款适合您
分享33个ASP.NET电子商务源码和40个ASP.NET控件组件源码,总有一款适合您
55 0
|
2月前
|
SQL 开发框架 前端开发
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
57 0