zoukankan      html  css  js  c++  java
  • JavaScript和ASP.NET之间的传值

    C#代码与javaScript函数的相互调用:

    1.如何在JavaScript访问C#函数?

    javaScript函数中执行C#代码中的函数:

    方法一:页面和页面类相结合

    1、函数声明为public , 后台代码(把public改成protected也可以)

     2、在html里用<%=ss()%>可以调用//是C#中后台的函数名称  

     1          C#后台的函数
     2     public string ss()
     3           {
     4                 return("a");
     5            }
     6 
     7            前台脚本
     8 
     9            <script language=javascript>
    10             var a = "<%=ss()%>";//JavaScript中调用C#后台的函数
    11             alert(a);
    12            </script>     
    View Code

    方法二: JavaScript异步调用定义在ASP.Net页面中的方法   
                1.将该方法声明为公有(public);   
                2.将该方法声明为类方法(C#中的static,VB.NET中的Shared),而不是实例方法;   
                3.将该方法添加【WebMethod】属性   
                4.将页面中ScriptManager控件的EnablePageMethods属性设置为true;   
                5.在客户端使用如下JavaScript语法调用该页面方法   
                    PageMethods.[MethodName](param1,param2,...,callbackFunction);   
                6.为客户端异步调用指定回调函数,在回调函数中接受返回值并进一步处理;   
                7.添加 using System.Web.Services;  

     1 前台JavaScript代码
     2 
     3 <html xmlns="http://www.w3.org/1999/xhtml">
     4 < head runat="server">
     5     <title>无标题页</title>
     6     <script type="text/javascript">
     7     function JsCallCSharp(param1)
     8     {            
     9           PageMethods.sayhell(param1,onSayHelloSucceeded);//sayhell是后台标注了【webMethod】属性的方法 param1是传入该方法的参数,onSayHelloSucceeded是回调函数主要是对后台返回的结果进一步处理
    10     }        
    11     function onSayHelloSucceeded(result)//绑定的回调函数 
    12     { 
    13         alert(result);
    14     } 
    15 
    16     </script>
    17 
    18 </head>
    19 < body>
    20     <form id="form1" runat="server">
    21     <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">//ScriptManager控件管理脚本的,
    22 
    23 注意设置EnablePageMethods="true"此属性
    24     </asp:ScriptManager>
    25     <div>
    26         <input type="button" onclick="JsCallCSharp('hello')" />
    27     </div>
    28     </form>
    29 < /body>
    30 < /html>
    31  后台代码(.cs文件)
    32 using System;
    33 using System.Configuration;
    34 using System.Data;
    35 using System.Linq;
    36 using System.Web;
    37 using System.Web.Security;
    38 using System.Web.UI;
    39 using System.Web.UI.HtmlControls;
    40 using System.Web.UI.WebControls;
    41 using System.Web.UI.WebControls.WebParts;
    42 using System.Xml.Linq;
    43 using System.Web.Services;//添加web服务引用
    44 
    45 public partial class _Default : System.Web.UI.Page
    46 {
    47     protected void Page_Load(object sender, EventArgs e)
    48     {
    49       
    50 
    51     }
    52     [WebMethod]//标示为web服务方法属性
    53     public static  string sayhell(string say)//注意函数的修饰符,只能是静态的
    54     {
    55         return say;
    56     }
    57 }
    View Code

    方法三: JavaScript异步调用定义在Web服务类中的方法

    1.添加一个web服务标示该服务为 允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务

     对应属性为[System.Web.Script.Services.ScriptService]

    2.将该方法声明public并将该方法标示为[webMethod]属性方法  
    3.在页面中ScriptManager控件并添加web服务引用 <Services><asp:ServiceReference Path="~/WebService.asmx" /></Services>   
    4.在客户端使用如下JavaScript语法调用web服务方法

     WebService.HelloWorld("helloWord",function(res)//Webservice是web服务页面名称 HelloWord为web服务页面类中的方法,function为回调JavaScript函数主要是处理返回的结果

     1 页面代码
     2 
     3 <html xmlns="http://www.w3.org/1999/xhtml">
     4 < head runat="server">
     5     <title>无标题页</title>
     6 
     7     <script type="text/javascript">
     8     function JsCallCSharp(param1)
     9     {            
    10           PageMethods.sayhell(param1,onSayHelloSucceeded);
    11     }        
    12     function onSayHelloSucceeded(result)
    13     { 
    14         alert(result);
    15     }  
    16 
    17 //该方法为调用的函数
    18     function JsCallWebService()
    19     {
    20      WebService.HelloWorld("helloWord",function(res)//调用web服务
    21      {
    22          alert(res);
    23      });
    24     }
    25     </script>
    26 
    27 </head>
    28 < body>
    29     <form id="form1" runat="server">
    30     <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" >
    31    <Services><asp:ServiceReference Path="~/WebService.asmx" /></Services>//注意要引用web服务
    32     </asp:ScriptManager>
    33     <div>
    34         <input type="button" onclick="JsCallCSharp('hello')" value="测试C#后台页" />
    35         <input type="button" onclick="JsCallWebService()" value="测试web后台类" />
    36     </div>
    37     </form>
    38 < /body>
    39 < /html>
    40 
    41 web服务后台代码
    42 
    43 using System;
    44 using System.Collections;
    45 using System.Linq;
    46 using System.Web;
    47 using System.Web.Services;
    48 using System.Web.Services.Protocols;
    49 using System.Xml.Linq;
    50 
    51 /// <summary>
    52 ///WebService 的摘要说明
    53 /// </summary>
    54 [WebService(Namespace = "http://tempuri.org/")]
    55 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    56 //若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。 
    57  [System.Web.Script.Services.ScriptService]//注意要添加该标示
    58 public class WebService : System.Web.Services.WebService {
    59 
    60     public WebService () {
    61 
    62         //如果使用设计的组件,请取消注释以下行 
    63         //InitializeComponent(); 
    64     }
    65 
    66     [WebMethod]//方法要标示的属性
    67     public string HelloWorld(string result) {
    68         return result;
    69     }
    70 }
    View Code
      1 方法一:使用<% %>
      2  <script  type="text/javascript">
      3           var s = "<%=ShowBehindInfo("chenliang")%>";  
      4           document.write(s);
      5  </script>
      6 cs后台代码:
      7 protected string ShowBehindInfo(string name)
      8 {
      9     return "姓名:" + name;
     10 }
     11 方法二:使用<% %>
     12   <script   type="text/javascript">
     13      document.write("<%ShowResult();%>");  
     14   </script>
     15 cs后台代码:
     16 protected void ShowResult()
     17 {
     18     Response.Write("我是陈全勇气");
     19 }
     20 方法三:
     21  <style>
     22         .btn
     23         {
     24             display:none;
     25         }
     26   </style>
     27 <asp:Button ID="Button1" runat="server"  CssClass="btn"  Text="Button" OnClick="Button1_Click" />
     28 <div  onclick="invokeCharp()">点击调用aspx.cs的代码</div>
     29 以下js代码将调用后台的cs代码
     30 function invokeCharp()
     31 {
     32     document.getElementById("Button1").click();
     33 }
     34 通过js调用的代码
     35  protected void Button1_Click(object sender, EventArgs e)
     36  {
     37     Response.Write("被js调用的代码");
     38  }
     39 方法四:
     40 <input type="hidden"   name="txtFunName">
     41 <input id="Button2" type="button" value="调用cs函数" onclick="return Button2_onclick()" />
     42 //将调用的信息存入隐藏控件中 在提交表单
     43 function Button2_onclick()
     44 {
     45     document.all.txtFunName.value="show";
     46     document.forms[0].submit();
     47 }
     48 //后台cs代码
     49 protected void Page_Load(object sender, EventArgs e)
     50 {
     51         string strFunName = Request.Form["txtFunName"] != null ? Request.Form["txtFunName"] : "";
     52         //根据传回来的值决定调用哪个函数
     53         switch (strFunName)
     54         {
     55             case "show":
     56                 enter(); //调用该函数
     57                 break;
     58             default:
     59                 //调用默认函数
     60                 break;
     61         }
     62 }
     63 方法五:
     64 使用__doPostBack();
     65 <input id="Button6" type="button" value="调用服务端的button" onclick="Button6_onclick()"  />
     66 <asp:Button ID="btn" runat="server"   Text="Button" OnClick="btn_Click" />  
     67 <asp:CheckBox ID="CheckBox1" AutoPostBack="true" runat="server" />
     68 function Button6_onclick()
     69 {
     70    var res = "chenliang";
     71    __doPostBack('btn','chenlinng');
     72 }
     73 //以上脚本将调用以下事件代码
     74 protected void btn_Click(object sender, EventArgs e)
     75 {
     76     string target = Request.Params["__EVENTTARGET"];
     77     string args = Request.Params["__EVENTARGUMENT"];
     78     Response.Write(target + "<Br>" + args);
     79 }
     80 __doPostBack解释:
     81 是一个纯粹并且是非常简单的javascript函数
     82 如以上代码,如果ASPX页面有包含asp:LinkButton或者带有AutoPostBack属性且其值为true的服务器控件时
     83 ASP.NET会自动为页面生成下面的脚本
     84 实际上调用__doPostBack函数
     85 也就是将触发回发的控件(第一个参数)及相关参数(第二个参数)付给两个页面的隐藏控件
     86 然后提交表单;
     87 <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
     88 <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
     89 function __doPostBack(eventTarget, eventArgument)
     90 {
     91    if (!theForm.onsubmit || (theForm.onsubmit() != false))
     92    {
     93       theForm.__EVENTTARGET.value = eventTarget;
     94       theForm.__EVENTARGUMENT.value = eventArgument;
     95       theForm.submit();
     96    }    
     97 }  
     98 而在后台事件代码中可以
     99 通过Request.Form[“__EVENTTARGET”]获取到触发页面PostBack的事件源(控件的ID)
    100 但Button和ImageButton触发的PostBack无法通过这种方式获取到它们的ID
    在javascript访问C#函数

    2.如何在JavaScript访问C#变量?

    方法一:1、通过页面上隐藏域访问<input id="xx" type="hidden" runat="server">

    方法二:1、如后台定义了PUBLIC STRING N;前台js中引用该变量的格式为'<%=n%>'或"+<%=n%>+"

    方法三:1、或者你可以在服务器端变量赋值后在页面注册一段脚本

                 "<script language='javascript'>var temp=" + tmp + "</script>"

                 tmp是后台变量,然后js中可以直接访问temp获得值。

     1 1.如何在javascript访问C#变量
     2 方法一:使用<%=%>
     3  <input id="Button3" type="button" value="js调用c#变量" onclick="return Button3_onclick()" />
     4 function Button3_onclick()
     5 {         
     6     alert('我的名字:''<%=name %>');
     7 }
     8 cs代码中的定义:protected string name = "chenlaing";
     9 方法二:使用Hidden隐藏控件
    10   <input id="Hidden1" runat="server" type="hidden" />
    11 在cs代码中给该隐藏控件赋值:  Hidden1.Value = "陈亮";
    12 function Button3_onclick()
    13 {         
    14     alert(document.getElementById("Hidden1").value);
    15 }
    16 方法三:在cs代码中注册js脚本
    17 string tmp = "陈全用";
    18 ClientScript.RegisterClientScriptBlock(this.GetType(), null"<script language='javascript'>var temp='" + tmp + "'</script>");
    19 function Button3_onclick()
    20 {         
    21      alert(temp);
    22 }   
    View Code

    3.如何在C#中访问JavaScript的已有变量?

    问题3 .如何在C#中访问JavaScript的已有变量?

    方法一:1、前台使用服务器文本控件隐藏域,将js变量值写入其中;后台直接通过控件id访问和调用 (request["id"])

    方法二:可以用cookie或session存储变量值,后台直接使用

    4.如何在C#中访问JavaScript函数?

    问题4 C#代码执行JavaScript函数和调用JavaScript函数

    方法一: .尽量少用Response.Write(< script>< /script>);这种方法,它会影响CSS导致页面效果偏差

    方法二:C#中使用ScriptManager.RegisterStartupScript(this, this.GetType(), "edit", "CSharpCallJs('"+param1+"','"+param2+"')",

     1 示例:
     2 
     3 脚本函数
     4 
     5 function CSharpCallJs(param1,param2)   
     6         {   
     7             alert(param1 + param2);   
     8         }  
     9 
    10 页面后台代码
    11 
    12 ScriptManager.RegisterStartupScript(this, this.GetType(), "edit", "CSharpCallJs('" + param1 + "','" + param2 + "');", true);//关键代码调用页面脚本函数的代码
    13 
    14 方法三:C#中使用 Page.RegisterStartupScript("ggg","<script>CSharpCallJs“(”+param1+“,"+param2+“);"</script>");
    15 
    16 方法四:C#中使用Literal类(类似label类)
    17 
    18 示例代码
    19 
    20 private void Button2_Click(object sender, System.EventArgs e)
    21 
    22 {
    23 
    24 string str;
    25 
    26 str="<script language='javascript'>";
    27 
    28 str+="selectRange()";
    29 
    30 str+="</script>";
    31 
    32 //Literal1.Visible=true;
    33 
    34 Literal1.Text=str;
    35 
    36
    View Code
  • 相关阅读:
    poj 2560Freckles (krusual)
    ACRush 楼天成回忆录
    大腕版ACMICPC比赛
    POJ刷题
    DataGrid中添加DropdownList时的数据绑定
    【转帖】SQL Server各种日期计算方法(收藏)
    安全配置Win2000服务器
    C#写的一个代码生成器
    .Net 常用加密算法类
    实习之最
  • 原文地址:https://www.cnblogs.com/zhao987/p/13334675.html
Copyright © 2011-2022 走看看