js调用后台方法

 
http://netcode.cnblogs.com/archive/2011/05/19/js-csharp.html
简单介绍下它的用法: 一.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>
posted on 2012-11-15 09:56  ilawrence  阅读(197)  评论(0编辑  收藏  举报