js调用后台方法与后台调用js方法

来源：互联网发布：ruby java 编辑：程序博客网时间：2024/04/29 22:16

2012-06-26 09:01:07| 分类：页面与JavaScript|举报|字号订阅

JS调用后台方法大全
javascript函数中执行C#代码中的函数：
方法一：1、首先建立一个按钮，在后台将调用或处理的内容写入button_click中;
2、在前台写一个js函数，内容为document.getElementById("btn1").click();
3、在前台或后台调用js函数，激发click事件，等于访问后台c#函数；

方法二：1、函数声明为public
后台代码(把public改成protected也可以)
publicstringss()
{
return("a");
}
2、在html里用<%=fucntion()%>可以调用
前台脚本
<script language=javascript>
var a="<%=ss()%>";
alert(a);
</script>
方法三：1、<script language="javascript">

</script>
<input id="Button1"type="button"name="Button1"value="按钮"onclick="javascript:__doPostBack('Button1','')">

方法四：<script language="javascript">
function SubmitKeyClick()
{
if(event.keyCode==13)
{
event.cancelBubble=true;
event.returnValue=false;
document.all.FunName.value="你要调用的函数名"；
document.form[0].submit();
}
}
</script>

<INPUT onkeypress="SubmitKeyClick()"id="aaa"type="text">
<input type="hidden"name="FunName">〈！--用来存储你要调用的函数--〉

在.CS里有：
publicPage_OnLoad()
{
if(!Page.IsPost())
{
stringstrFunName=Request.Form["FunName"]!=null?Request.Form["FunName"]:"";
//根据传回来的值决定调用哪个函数
switch(strFunName)
{
case"enter()":
enter() ; //调用该函数
break;
case"其他":
//调用其他函数
break;
default:
//调用默认函数
break;
}
}
}

publicvoidenter()
{
//……比如计算某值
}
JS调用后台带参数的方法
对于前台调用后台的方法，我们想到最多的就是用AJAX，这个是毋庸置疑的，我就不再这里多说了。我今天主要想说的是用JS调用后台的方法。
对于后台往前台传值，用这种<%= nameValue%> 方法，我们是在熟悉不过了，由此，我们是否可以用同样的办法达到传值方法返回值的效果呢？
我在这个项目中最先想到的就是尝试这种(因为这个项目用到了VML，用AJAX以前是不行，不过，后来测试还是没有问题，不过，需要把xmlns=http://www.w3.org/1999/xhtml给保留住)方法,结果是可行的。但是由于需要前台在调用后台的方法时，需要先给其传参数，这个遇到
了一些麻烦，去网上看了一些解决方案，都是把字符串作为参数传递，而更多的网友是想知道如何传递变量的，呵呵，偶也是其中一个，因为这个变量
的值是不确定的嘛！后台，得到一名叫“刚刚”的网友帮助，问题解决。现在把方法告知大家，以免在开发的过程中走同样的弯路。
后台方法：
protected string CsharpVoid(string strCC)
{
strCC = "你好！" + strCC;
return strCC;
}前台JS
function Init()
{
   var v = "中国";
   var s = '<%=CsharpVoid("'+v+'") %>';
   alert(s);
}
这样就OK了

简单介绍下它的用法：  一.AjaxPro的使用   1.在项目中添加引用，浏览找到AjaxPro.2.dll文件  2.在Web.config中的system.web里面写入以下代码 </configuration> <system.web>   <httpHandlers>         <add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>       </httpHandlers> </system.web> <//configuration>  3.在加载事件中，加入   AjaxPro.Utility.RegisterTypeForAjax(typeof(类名));  4.写的方法都要用  [AjaxPro.AjaxMethod]开头，然后在写方法  5.调用时必须写清楚  命名空间名.类名.方法，例:WebUI._Default.getData();  6.调用可分两中方法(同步调用，异步调用)   //在后台写的无参方法 [AjaxPro.AjaxMethod] public string getStr() {         return  "hello my friends"; } //在后台写的有参方法  [AjaxPro.AjaxMethod] public string getString(string str) {      return str + "Say: hello my friends"; }  a.同步调用  (1).拖入html控件button  (2).双击,自动显示在.aspx的脚本中  (3).在里面写入你要输入的内容  例: //------------------同步调用无参-----------   function Button1_onclick()    {          var res=WebUI._Default.getStr();          alert(res.value);   }     //------------------同步调用有参------------ function Button2_onclick() //TextBox1为服务器控件 {     var str=document.getElementById("<%=TextBox1.ClientID%>").value;     var res=WebUI._Default.getStr(str);     alert(res.value); }   b.异步调用  (1).拖入html控件button  (2).双击,自动显示在.aspx的脚本中  (3).在里面写入你要输入的内容  例： //-----------------异步调用无参----------------- function Button3_onclick() {     WebUI._Default.getStr(getStrCallBack); } function getStrCallBack(res) {     alert(res.value); } //-----------------异步调用有参----------------- function Button4_onclick() {     var str=document.getElementById("<%=TextBox1.ClientID %>").value;     WebUI._Default.getString(str,getStringCallBack); } function getStringCallBack(res) {     alert(res.value); }  7.调用对象  //对象 [AjaxPro.AjaxMethod] public Class getClass() {        Class cla = new Class();        cla.C_Id = 100;        cla.C_Name = "34班";        cla.Count = 20;        return cla; } //------------------同步调用对象----------- function Button5_onclick() {     var res=WebUI._Default.getClass().value;     alert("班级编号："+res.C_Id+"名称："+res.C_Name+"人数："+res.Count); } //------------------异步调用对象----------- function Button6_onclick() {     WebUI._Default.getClass(getClassCallBack); } function getClassCallBack(clas) {     var res=clas.value;     alert("班级编号："+res.C_Id+"名称："+res.C_Name+"人数："+res.Count); }   8.数据集的使用  //方法         [AjaxPro.AjaxMethod]         public DataSet getInfo()         {             return WebUI.GetDataSet.getList();         }  //--------------------异步调用数据集-------------- function Button8_onclick() {     WebUI._Default.getInfo(getDataSetCallBack); } function getDataSetCallBack(res) {     var dataset=res.value;     var strHtml="";     strHtml +='<table  style ="border-collapse:collapse ; border-color:Gray ;"  border="1px">';     strHtml +='        <tr>';     strHtml +='            <td>学生编号</td>';     strHtml +='            <td>名称</td>';     strHtml +='            <td>年龄</td>';     strHtml +='        </tr>';          for(var i=0;i<dataset.Tables[0].Rows.length;i++)     {         strHtml +='        <tr>';         strHtml +='            <td>'+ dataset.Tables[0].Rows[i].stu_id +'</td>';         strHtml +='            <td>'+ dataset.Tables[0].Rows[i].stu_name +'</td>';         strHtml +='            <td>'+ dataset.Tables[0].Rows[i].stu_age +'</td>';         strHtml +='        </tr>';     }     strHtml +='    </table>';     thedata.innerHTML=strHtml;//thedata是一个<div id="thedata"></div>中的thedata }     9.验证码的使用  //----------------------验证码的使用(必须采用同步调用)----------------------  //验证码的使用 [AjaxPro.AjaxMethod] public bool ValidCodeData(string code) {      return (HttpContext.Current.Session["CheckCode"].ToString()==code); }  function Button9_onclick() {     var code=document.getElementById("<%=TextBox2.ClientID %>").value;     var bool=WebUI._Default.ValidCodeData(code).value;     if(bool==true)     {         alert("ok");     }else     {         alert("no");     } } 二，直接调用： javascript中：<%=后台方法%>  function says()     {         alert("<%=Say()%>");     }     function del()     {          alert("<%=DeleteByID(8)%>");//DeleteByID(8)后台方法名     }   三，采用ICallbackEventHandler回调   //必须声明System.Web.UI.ICallbackEventHandler接口 public partial class _Default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler {     //定义一个回调的返回值     private string Result;     //定义两个变量，用来接收页面传过来到操作数     private string Num1;     private string Num2;     protected void Page_Load(object sender, EventArgs e)     {               }      /// <summary>     /// 该方法是回调执行的方法，根据参数在这个方法中处理回调的内容,该方法没有返回值     /// </summary>     /// <param name="eventArgument">此参数是从客户端传过来的</param>     public void RaiseCallbackEvent(string eventArgument)     {         //eventArgumeng 为javascript从客户端传递的参数，本例传过来三个参数用“/”分割将每个参数取出存入数组         string[] PagParams = eventArgument.Split('/');          Num1 = PagParams[1];          Num2 = PagParams[2];         //根据第一个参数（所选的操作符），调用不同的执行函数         switch (PagParams[0])         {             case "0":                  Result = add(); break;             case "1":                  Result = sub(); break;             case "2":                  Result = multi(); break;             case "3":                  Result = division(); break;          }      }          /// <summary>     /// 该方法是返回回调的结果给客户端     /// </summary>     /// <returns></returns>     public string GetCallbackResult()     {         return Result;      }      //一下四个函数是通过RaiseCallbackEvent方法，调用的回调要执行操作的函数     private string add()     {         double addResult = double.Parse(Num1) + double.Parse(Num2);         return addResult.ToString();      }      private string sub()     {         double addResult = double.Parse(Num1) - double.Parse(Num2);         return addResult.ToString();      }      private string multi()     {         double addResult = double.Parse(Num1) * double.Parse(Num2);         return addResult.ToString();      }      private string division()     {         double addresult = double.Parse(Num1) / double.Parse(Num2);         return addresult.ToString();      } }
我的实现，前台一个textbox，一个普通button，单击按钮，将textbox中的值插入数据库
 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  <input id="Button1" type="button" value="点击我" onclick="test();" />
   function test()
    {
       var names=document.getElementById("TextBox1").value;
       var result= _Default.insert(names).value;
       alert(result);
    }
后台 #region
    [AjaxPro.AjaxMethod]

    public static string insert(string name)
    {

        string flag = "提交失败";
        SqlConnection conn = DbOpen.DbaseConfigConnect();
        SqlCommand command = new SqlCommand();
        command.Connection = conn;
        string str = "update WBLXDJB set WXR='" + name + "' where BXBH='DIA201'";
        command.CommandText = str;
        if (command.ExecuteNonQuery() == 1)
            flag = "提交成功";
        return flag;

    }
    #endregion
 protected void Page_Load(object sender, EventArgs e)
    {
        AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
}
记得引用AjaxPro.2.dll
web.config
<httpHandlers>
    <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
        </httpHandlers>

C#前台js调用后台代码

前台js

<script type="text/javascript" language="javascript">

　　function Ceshi()

　　　　var a = "<%=Getstr()%>";

　　　　alert(a);

</script>

<input type="button" value="http://www.2cto.com/kf/201104/js调用后台代码" />

后台代码

public string Getstr()

　　string aa = "你们好啊！";

　　return aa;

C#后台调用前台js代码

前台js

<script type="text/javascript" language="javascript">

　　function Ceshi()

　　　　var a = "你们好啊！"

　　　　alert(a);

</script>

<asp:Button ID="Button1" runat="server" Text="后台调用js"

onclick="Button1_Click" />

后台代码

protected void Button1_Click(object sender, EventArgs e)     {
　　　　//如果有UpdatePanel就用如下代码调用前台js
　　　　ScriptManager.RegisterStartupScript(UpdatePanel1, 
this.Page.GetType(), "", "Ceshi();", true);
　　　　//如果没有就如下代码
　　　　this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), "", "Ceshi();", true);

0 0

js调用后台方法与后台调用js方法

JS调用后台带参数的方法