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

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

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

1
2 < input  id ="Contract"  name ="Contract"   maxlength ="100"  type ="text"   />
3

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

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

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

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

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

后台操作提交到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,  " 调用系统ＡＰＩ来显示提示框 " ,  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          }

 

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

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