• 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

  • 相关阅读:
    关于celery踩坑
    关于git的分批提交pull requests流程
    SymGAN—Exploiting Images for Video Recognition: Heterogeneous Feature Augmentation via Symmetric Adversarial Learning学习笔记
    AFN—Larger Norm More Transferable: An Adaptive Feature Norm Approach for Unsupervised Domain Adaptation学习笔记
    Learning to Transfer Examples for Partial Domain Adaptation学习笔记
    Partial Adversarial Domain Adaptation学习笔记
    Partial Transfer Learning with Selective Adversarial Networks学习笔记
    Importance Weighted Adversarial Nets for Partial Domain Adaptation学习笔记
    Exploiting Images for Video Recognition with Hierarchical Generative Adversarial Networks学习笔记
    improved open set domain adaptation with backpropagation 学习笔记
  • 原文地址:https://www.cnblogs.com/SFAN/p/3670303.html
Copyright © 2020-2023  润新知