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

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

---

sp.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事件:

 1function  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/获取更多相关信息。 第二个参数设置为零的保留变量. 测试一下：

代码

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

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

代码

 

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

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

作者：chenkai