-
JS調用后台方法大全
-
-
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);