zoukankan      html  css  js  c++  java
  • ASP.NET前台JS与后台CS函数如何互相调用

    摘要:
    在实际的Web开发中,我们可能会常常遇到后台调用前台JS代码或者前台JS调用后台代码的情况。今天就把比较实用的前后台相互调用的方法总结出来和大家分享。

    在实际的Web开发中,我们可能会常常遇到后台调用前台JS代码或者前台JS调用后台代码的情况。今天就把比较实用的前后台相互调用的方法总结出来和大家分享。

    ===============后台代码调用前台JS代码===============

    一、说到后台代码调用前台的JS代码很多人首先就会想到使用Clients cript对象。

    Clientscript.RegisterStartups cript()方法该方法主要是注册启动脚本文本,即在后台执行调用前台JS代码

    该方法有两个重载,

    1Clientscript.RegisterStartups criptType type,string key ,string s cript注册启动脚本//分别表示:1、要注册的启动脚本的类型(一般直接填this.GetType()即可),2、要注册的启动脚本的键(相当于为执行脚本起一个名字,任意名即可),3、要注册的启动脚本文本(一般为"<s cript>函数()</s cript>")

    示例:

    Clientscript.RegisterStartups cript(this.GetType(),"SayHello","<s cript>SayHello('"+name+"')</s cript>");//先获取用户姓名,然后再调用前台的JS函数SayHello(name);

    2Clientscript.RegisterStartups cript(Typetype,string key, string s cript,bool flag);//该函数和第一参数的区别在于将最后一个参数设为"ture"时,第三个参数可以直接写被调用的函数,不用再加"<s cript></s cript>",这两个方法差别不是很大。

    示例:

    Clientscript.RegisterStartups cript(this.GetType(),"SayHello1", "SayHello('" + name + "')", true);//跟第一方法的效果一样,调用前台SayHello(name)函数,如果最后一个值设为false,则仍需添加上"<s cript></s cript>"标记

    这里需要特别注意的是在注册启动脚本的时候,键是唯一的,不能重复,如果有将会报错。

    二、使用Clientscript.RegisterClients criptBlock()方法,注册客户端脚本块

    该方法有两个重载,使用方法几乎和Clientscript.RegisterClients criptBlock()的两个方法一模一样。这里只是给出示例,就不再做过多的解释。

    Clientscript.RegisterClients criptBlock(this.GetType(),"SayHello2", "ShowPerson('" + age + "')",true);       Clientscript.RegisterClients criptBlock(this.GetType(),"SayHello2","<s cript>SayHello('"+name+"')</s cript>");

    在这里主要讲一下RegisterClients criptBlock方法和RegisterStartups cript方法和区别

    RegisterStartups cript,这种方法会把JS代码嵌入在页面的底部、表单的最后 (</form>前面)适用于要在页面控件加载完成后运行的JS代码

    RegisterClients criptBlock,这种方法会把JS代码嵌入在页面的顶部、表单的最前 (<form>后面)适用于要在控件加载前执行的JS代码

    通过html源代码可见。

    三、使用Control.Attribute属性(服务器控件

    这也是一种比较简单好用的方法,可以将该方法和控件的客户端方法相关联,比如“onbluronfocusonmousemoveonmouseover“等,在这里只是把该方法作为Control的一个属性来用。

    示例:

    Page_Load()方法里添加如下代码:

    txtname.Attributes["onblur"] ="show('" + txt.Text + "')";//当用户离开文本框时,会提示所输入的内容 (在Page_Load使用该方法,其实是在编译成源文件时在对应的html元素的属性调用js函数,如<inputtype=”text” onblur=”show()”/>)

    还可以通过这种方法来控制前台的显示。其实现方法和本例的方法都是一样的,在这里就不做过多的介绍了。

    四、可以使用Control的一个属性,(服务器控件),OnClientClick

    为该属性赋值OnClientClick="SayHello()";则就会调用客户端的方法,该方法的本质就是一个客户端的方法。(该属性只有服务器控件具有,在编译成源文件时,其实是转换成对应的事件,如OnClientClick会转换成onclick)

    示例:

          <asp:Button ID="Button1" runat="server"OnClientClick="Get()" Text="OnClientClick方法测试"/>

    ===============前台JS调用后台方法=================

    一、最简单的一种方式,在前台的JS函数中写下如下代码:

    Var name=<%=SayHello()%>

    Asp.NET 以前的ASP就是通过这样的方式将cs代码写到apsx页的,在<% %>中就可以写cs代码了,效果跟在cs页写一样。

    在前台页面<head><head>节点中添加如下代码:

    <s cript type="text/javas cript>

    function Get() {

         var hello="<%=SayHello() %>";

         alert(hello);

          }

      </s cript>

    后台cs页代码如下:

         public string SayHello()

          {

              return " Javas cript调用后台代码显示姓名: Olive";

          }

    结果:

     

    二、通过辅助按钮实现前台JS调用后台代码(这样相当于添加多了一个按钮

    1、先在前台添加一个服务器端按钮,双击,进入后台.cs页,写下将要执行的代码

    如下:

    protected void Button4_Click(object sender,EventArgs e)       {

            //在此方法里写下要执行的代码,此处为简单的示例  

              Response.Write("<s cript>alert('O(_)O哈哈~你好!')</s cript>");

    }

    2、将该按钮的Width属性设为0,将Height属性设为0,形如

    <asp:Button ID="btnhoutai" runat="server"Text="" Width="0"Height="0"

              onclick="Button4_Click" />

    3、在前台添加一个JS函数,如下:

    function Show1() {

              document.getElementById("btnhoutai").click();

           }

    4、添加html按钮并将其onclick="Show1()";

    如下:

    <input id="btnjs"type="button" value="Js 调用后台C#函数" onclick="Show1()"/>

    经过以上这四步就可以实现JS调用后台的代码了。

     

    from:http://www.bdqn.cn/news/201307/10227.shtml

  • 相关阅读:
    C++中如何使用大整数__int 128
    全排列问题
    读书札记:瑞士法郎的因素
    读书札记:影响欧元的因素
    金融市场:最全的外汇平台资料大全(包括开户金额、点差、特色!)
    读书札记:澳大利亚元因素
    情感日记:祭衣文
    情感日记:第一次亲密的接触
    读书札记:美元影响的因素
    读书札记:外汇市场
  • 原文地址:https://www.cnblogs.com/SFAN/p/3670303.html
Copyright © 2011-2022 走看看