ASP.NET前台JS与后台CS函数如何互相调用
在實際的Web開發中,我們可能會常常遇到后臺調用前臺JS代碼或者前臺JS調用后臺代碼的情況。今天就把比較實用的前后臺相互調用的方法總結出來和大家分享。
<1>后臺代碼調用前臺JS代碼
一、說到后臺代碼調用前臺的JS代碼很多人首先就會想到使用ClientScript對象。
ClientScript.RegisterStartupScript()方法,該方法主要是注冊啟動腳本文本,即在后臺執行調用前臺JS代碼
該方法有兩個重載,
1、ClientScript.RegisterStartupScript(Type type,string key ,string script)注冊啟動腳本//分別表示:1、要注冊的啟動腳本的類型(一般直接填this.GetType()即可),2、要注冊的啟動腳本的鍵(相當于為執行腳本起一個名字,任意名即可),3、要注冊的啟動腳本文本(一般為"<script>函數()</script>");
示例:
ClientScript.RegisterStartupScript(this.GetType(),"SayHello","<script>SayHello('"+name+"')</script>");//先獲取用戶姓名,然后再調用前臺的JS函數SayHello(name);
2、ClientScript.RegisterStartupScript(Typetype,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代碼
通過html源代碼可見。
?
三、使用Control.Attribute屬性(服務器控件)
這也是一種比較簡單好用的方法,可以將該方法和控件的客戶端方法相關聯,比如“onblur,onfocus,onmousemove,onmouseover“等,在這里只是把該方法作為Control的一個屬性來用。
示例:
在Page_Load()方法里添加如下代碼:
??txtname.Attributes["onblur"] ="show('" + txt.Text + "')";//當用戶離開文本框時,會提示所輸入的內容?(在Page_Load使用該方法,其實是在編譯成源文件時在對應的html元素的屬性調用js函數,如<inputtype=”text” οnblur=”show()”/>)
還可以通過這種方法來控制前臺的顯示。其實現方法和本例的方法都是一樣的,在這里就不做過多的介紹了。
?
四、可以使用Control的一個屬性,(服務器控件),OnClientClick
為該屬性賦值OnClientClick="SayHello()";則就會調用客戶端的方法,該方法的本質就是一個客戶端的方法。(該屬性只有服務器控件具有,在編譯成源文件時,其實是轉換成對應的事件,如OnClientClick會轉換成onclick)
示例:
???????<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"
??????????? οnclick="Button4_Click"?/>
3、在前臺添加一個JS函數,如下:
?function Show1() {
???????????document.getElementById("btnhoutai").click();
????????}
4、添加html按鈕并將其οnclick="Show1()";
如下:
<input id="btnjs"type="button" value="Js?調用后臺C#函數"?οnclick="Show1()"/>
經過以上這四步就可以實現JS調用后臺的代碼了。
?
*本文轉自:http://www.cnblogs.com/Olive116/archive/2012/10/16/2725798.html
轉載于:https://www.cnblogs.com/xiaohui1990/p/3444521.html
總結
以上是生活随笔為你收集整理的ASP.NET前台JS与后台CS函数如何互相调用的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: java Socket Tcp 浏览器和
- 下一篇: 分页控件-ASP.NET(AspNetP