zoukankan      html  css  js  c++  java
  • ASP.NET的后台代码和前台JS代码相互调用

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

    <1>后台代码调用前台JS代码

    一、说到后台代码调用前台的JS代码很多人首先就会想到使用 ClientScript.RegisterStartupScript()方法,该方法主要是注册启动脚本文本,即在后台执行调用前台JS代码

    该方法有两个重载,

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

    示例:

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

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

    示例:

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

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

    二、使用ClientScript.RegisterClientScriptBlock()方法,

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

     ClientScript.RegisterClientScriptBlock(this.GetType(), "SayHello2", "ShowPerson('" + age + "')", true);         ClientScript.RegisterClientScriptBlock(this.GetType(),"SayHello2","<script>SayHello('"+name+"')</script>");

    在这里主要讲一下RegisterClientScriptBlock方法和RegisterStartupScript方法和区别

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

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

    三、使用Control.Attribute属性

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

    示例:

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

      txtname.Attributes["onblur"] = "show('" + txt.Text + "')";//当用户离开文本框时,会提示所输入的内容

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

    四、可以使用Control的一个属性,OnClientClick 

    为该属性赋值OnClientClick="SayHello()";则就会调用客户端的方法,该方法的本质就是一个客户端的方法。

    示例:

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

               

     

    <2>前台JS调用后台的方法

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

    Var name=<%=SayHello()%>

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

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

    <script type="text/javascript>

    function Get() { 

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

           alert(hello);

            }

        </script>

    后台cs页代码如下:

           public string SayHello()

            {

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

            }

     结果:

     

    二、通过辅助按钮实现前台JS调用后台代码

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

    如下:

    protected void Button4_Click(object sender, EventArgs e)       {

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

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

    }

    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调用后台的代码了。

     

    这一篇的总结就到这里吧,这里主要是把比较实用的前后台相互调用的方法总结下,希望可以对大家有所帮助,也希望大家多多指点!

  • 相关阅读:
    编译原理-第二章 一个简单的语法指导编译器-2.4 语法制导翻译
    编译原理-第二章 一个简单的语法指导编译器-2.3 语法定义
    编译原理-第二章 一个简单的语法指导编译器-2.2 词法分析
    LeetCode 1347. Minimum Number of Steps to Make Two Strings Anagram
    LeetCode 1348. Tweet Counts Per Frequency
    1349. Maximum Students Taking Exam(DP,状态压缩)
    LeetCode 1345. Jump Game IV(BFS)
    LeetCode 212. Word Search II
    LeetCode 188. Best Time to Buy and Sell Stock IV (动态规划)
    LeetCode 187. Repeated DNA Sequences(位运算,hash)
  • 原文地址:https://www.cnblogs.com/Olive116/p/2725798.html
Copyright © 2011-2022 走看看