开发者社区> 科技小能手> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JAVA Web入门之HTML5及CSS的使用与实战(超详细,附源码)
JAVA Web入门之HTML5及CSS的使用与实战(超详细,附源码)
0 0
【Web前端】 HTML5
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。作为新HTML语言,具有新的元素,属性和行为
0 0
【Web前端】:走进HTML的世界----简单介绍
介绍HTML的入门基础知识:什么是HTML?元素和标签的概念、HTML文档的结构...
0 0
【Web前端】——HTML基础知识总结
学习HTML就是学习各种各样的标签,然后组成一个页面,这个页面可以被浏览器解析,解析完以后可以在浏览器中将页面进行展示。
0 0
HTML5相关面试题:1.H5新特性;2. HTML5 新标签的浏览器兼容问题;3.H5 的离线存储;4.H5缓存和常规缓存有什么差别;5:H5缓存优势;6.Web Worker 和Web作用
●拖放(Drag and drop) API. ●语义化更好的内容标签( header、nav、footer、 aside、 article、 section )。 ●音频、 视频(audio、video) API。 ●画布( Canvas) API。 ●地理( Geolocation) API。 ●本地离线存储( localStorage),即长期存储数据,浏览器关闭后数据不丢失。 ●会话 存储( sessionStorage),即数据在浏览器关闭后自动删除。 ●表单控件包括calendar、date、 time、 email、 url、 search ●新的技术包括webworker、we
0 0
【Web技术】HTML基础入门
文本:相当于记事本里写的文字。 展示信息 超文本:超越了文本仅仅展示信息的功能范畴。泛指:图片、有样式的文字、点击跳转页面的文字 HTML是由标签所组成的语言,能展示超文本效果 HTML是用来写网页的,是设计页面的基础。
0 0
《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML+CSS+JavaScript
《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML+CSS+JavaScript
0 0
(web前端网页制作课作业)使用HTML+CSS制作非物质文化遗产专题网页设计与实现
(web前端网页制作课作业)使用HTML+CSS制作非物质文化遗产专题网页设计与实现
0 0
web前端-HTML图像,表格,列表的使用
(一)🍁HTML图像 通过使用html,可以在文档中显示图像。 🔥1.图像标签img和源属性src 在 HTML 中,图像由 < img >标签定义。src属性填图片的url地址或者本地路径。
0 0
web前端-《初识HTML》(附实例详解)
🍁(一)HTML简介 🔥1.什么是HTML? HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML使用标记标签来描述网页 ———————————————— 版权声明:本文为CSDN博主「苏凉.py」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/weixin_46277553/article/details/124684061
0 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
WEB浏览器中即将发生的安全变化
立即下载
Web应用系统性能优化
立即下载
《零基础HTML入门教程》
立即下载