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月前
|
存储 开发框架 NoSQL
ASP.NET WEB——项目中Cookie与Session的用法
ASP.NET WEB——项目中Cookie与Session的用法
36 0
|
2月前
|
开发框架 前端开发 .NET
ASP.NET WEB——项目创建与文件上传操作
ASP.NET WEB——项目创建与文件上传操作
46 0
|
2月前
|
SQL 开发框架 .NET
ASP.NET WEB+EntityFramework数据持久化——考核练习库——1、用户管理系统(考点:查询列表、增加、删除)
ASP.NET WEB+EntityFramework数据持久化——考核练习库——1、用户管理系统(考点:查询列表、增加、删除)
67 0
|
2月前
|
SQL 开发框架 前端开发
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
34 0
|
2月前
|
SQL 开发框架 .NET
ASP.NET Web——GridView完整增删改查示例(全篇幅包含sql脚本)大二结业考试必备技能
ASP.NET Web——GridView完整增删改查示例(全篇幅包含sql脚本)大二结业考试必备技能
33 0
|
3月前
|
PHP Windows
php扩展com_dndnet(PHP与.NET框架进行交互)
php扩展com_dndnet(PHP与.NET框架进行交互)
php扩展com_dndnet(PHP与.NET框架进行交互)
|
3月前
Flutter笔记:使用Flutter构建响应式PC客户端/Web页面-案例
Flutter笔记:使用Flutter构建响应式PC客户端/Web页面-案例
58 0
|
3月前
|
前端开发 JavaScript 关系型数据库
.NET开源、强大的Web报表统计系统
.NET开源、强大的Web报表统计系统
|
3月前
|
Ubuntu 网络协议 Linux
EVE-NG初次启动及WEB客户端访问
本章从虚拟机Eve模拟器启动、模拟器的启动配置、浏览器访问三个步骤讲解EVE-NG的首次启动。 1.启动模拟器 打开虚拟机环境,启动安装好的EVE-NG虚拟机,进入如下界面。
|
1月前
|
Ubuntu JavaScript 关系型数据库
在阿里云Ubuntu 20.04服务器中搭建一个 Ghost 博客
在阿里云Ubuntu 20.04服务器上部署Ghost博客的步骤包括创建新用户、安装Nginx、MySQL和Node.js 18.x。首先,通过`adduser`命令创建非root用户,然后安装Nginx和MySQL。接着,设置Node.js环境,下载Nodesource GPG密钥并安装Node.js 18.x。之后,使用`npm`安装Ghost-CLI,创建Ghost安装目录并进行安装。配置过程中需提供博客URL、数据库连接信息等。最后,测试访问前台首页和后台管理页面。确保DNS设置正确,并根据提示完成Ghost博客的配置。
在阿里云Ubuntu 20.04服务器中搭建一个 Ghost 博客