ASP.NET前台JS与后台CS函数如何互相调用
在實(shí)際的Web開發(fā)中，我們可能會(huì)常常遇到后臺(tái)調(diào)用前臺(tái)JS代碼或者前臺(tái)JS調(diào)用后臺(tái)代碼的情況。今天就把比較實(shí)用的前后臺(tái)相互調(diào)用的方法總結(jié)出來和大家分享。
<1>后臺(tái)代碼調(diào)用前臺(tái)JS代碼
一、說到后臺(tái)代碼調(diào)用前臺(tái)的JS代碼很多人首先就會(huì)想到使用ClientScript對(duì)象。
ClientScript.RegisterStartupScript()方法，該方法主要是注冊(cè)啟動(dòng)腳本文本，即在后臺(tái)執(zhí)行調(diào)用前臺(tái)JS代碼
該方法有兩個(gè)重載，
1、ClientScript.RegisterStartupScript（Type type,string key ,string script）注冊(cè)啟動(dòng)腳本//分別表示：1、要注冊(cè)的啟動(dòng)腳本的類型（一般直接填this.GetType()即可），2、要注冊(cè)的啟動(dòng)腳本的鍵（相當(dāng)于為執(zhí)行腳本起一個(gè)名字,任意名即可），3、要注冊(cè)的啟動(dòng)腳本文本（一般為"<script>函數(shù)（）</script>")；
示例：
ClientScript.RegisterStartupScript(this.GetType(),"SayHello","<script>SayHello('"+name+"')</script>");//先獲取用戶姓名，然后再調(diào)用前臺(tái)的JS函數(shù)SayHello(name);
2、ClientScript.RegisterStartupScript(Typetype,string key, string script,bool flag);//該函數(shù)和第一參數(shù)的區(qū)別在于將最后一個(gè)參數(shù)設(shè)為"ture"時(shí)，第三個(gè)參數(shù)可以直接寫被調(diào)用的函數(shù)，不用再加"<script></script>",這兩個(gè)方法差別不是很大。
示例：
ClientScript.RegisterStartupScript(this.GetType(),"SayHello1", "SayHello('" + name + "')", true);//跟第一方法的效果一樣，調(diào)用前臺(tái)SayHello(name)函數(shù)，如果最后一個(gè)值設(shè)為false，則仍需添加上"<script></script>"標(biāo)記
這里需要特別注意的是在注冊(cè)啟動(dòng)腳本的時(shí)候，鍵是唯一的，不能重復(fù)，如果有將會(huì)報(bào)錯(cuò)。
?
二、使用ClientScript.RegisterClientScriptBlock()方法，注冊(cè)客戶端腳本塊
該方法有兩個(gè)重載，使用方法幾乎和ClientScript.RegisterClientScriptBlock()的兩個(gè)方法一模一樣。這里只是給出示例，就不再做過多的解釋。
?ClientScript.RegisterClientScriptBlock(this.GetType(),"SayHello2", "ShowPerson('" + age + "')",true);????????ClientScript.RegisterClientScriptBlock(this.GetType(),"SayHello2","<script>SayHello('"+name+"')</script>");
?
在這里主要講一下RegisterClientScriptBlock方法和RegisterStartupScript方法和區(qū)別
RegisterStartupScript，這種方法會(huì)把JS代碼嵌入在頁面的底部、表單的最后(</form>前面)，適用于要在頁面控件加載完成后運(yùn)行的JS代碼
RegisterClientScriptBlock，這種方法會(huì)把JS代碼嵌入在頁面的頂部、表單的最前(<form>后面)，適用于要在控件加載前執(zhí)行的JS代碼
通過html源代碼可見。
?
三、使用Control.Attribute屬性（服務(wù)器控件）
這也是一種比較簡(jiǎn)單好用的方法，可以將該方法和控件的客戶端方法相關(guān)聯(lián)，比如“onblur，onfocus，onmousemove，onmouseover“等，在這里只是把該方法作為Control的一個(gè)屬性來用。
示例：
在Page_Load（）方法里添加如下代碼：
??txtname.Attributes["onblur"] ="show('" + txt.Text + "')";//當(dāng)用戶離開文本框時(shí)，會(huì)提示所輸入的內(nèi)容?（在Page_Load使用該方法，其實(shí)是在編譯成源文件時(shí)在對(duì)應(yīng)的html元素的屬性調(diào)用js函數(shù)，如<inputtype=”text” οnblur=”show()”/>）
還可以通過這種方法來控制前臺(tái)的顯示。其實(shí)現(xiàn)方法和本例的方法都是一樣的，在這里就不做過多的介紹了。
?
四、可以使用Control的一個(gè)屬性，（服務(wù)器控件），OnClientClick
為該屬性賦值OnClientClick="SayHello()";則就會(huì)調(diào)用客戶端的方法，該方法的本質(zhì)就是一個(gè)客戶端的方法。（該屬性只有服務(wù)器控件具有，在編譯成源文件時(shí)，其實(shí)是轉(zhuǎn)換成對(duì)應(yīng)的事件，如OnClientClick會(huì)轉(zhuǎn)換成onclick）
示例：
???????<asp:Button ID="Button1" runat="server"OnClientClick="Get()" Text="OnClientClick方法測(cè)試"/>
? ? ? ? ??
<2>前臺(tái)JS調(diào)用后臺(tái)的方法
一、最簡(jiǎn)單的一種方式，在前臺(tái)的JS函數(shù)中寫下如下代碼：
Var name=<%=SayHello()%>
在Asp.NET?以前的ASP就是通過這樣的方式將cs代碼寫到apsx頁的，在<% %>中就可以寫cs代碼了，效果跟在cs頁寫一樣。
在前臺(tái)頁面<head><head>節(jié)點(diǎn)中添加如下代碼：
<script type="text/javascript>
function Get() {
??????var hello="<%=SayHello() %>";
??????alert(hello);
???????}
???</script>
后臺(tái)cs頁代碼如下：
??????public string SayHello()
???????{
???????????return " Javascript調(diào)用后臺(tái)代碼顯示姓名：?Olive";
???????}
?結(jié)果：
?
二、通過輔助按鈕實(shí)現(xiàn)前臺(tái)JS調(diào)用后臺(tái)代碼（這樣相當(dāng)于添加多了一個(gè)按鈕）
1、先在前臺(tái)添加一個(gè)服務(wù)器端按鈕，雙擊，進(jìn)入后臺(tái).cs頁，寫下將要執(zhí)行的代碼
如下：
protected void Button4_Click(object sender,EventArgs e)?????? {
?????????//在此方法里寫下要執(zhí)行的代碼，此處為簡(jiǎn)單的示例??
???????????Response.Write("<script>alert('O(∩_∩)O哈哈~你好！')</script>");
}
2、將該按鈕的Width屬性設(shè)為0，將Height屬性設(shè)為0，形如
?<asp:Button ID="btnhoutai" runat="server"Text=""?Width="0"Height="0"
??????????? οnclick="Button4_Click"?/>
3、在前臺(tái)添加一個(gè)JS函數(shù)，如下：
?function Show1() {
???????????document.getElementById("btnhoutai").click();
????????}
4、添加html按鈕并將其οnclick="Show1()";
如下：
<input id="btnjs"type="button" value="Js?調(diào)用后臺(tái)C#函數(shù)"?οnclick="Show1()"/>
經(jīng)過以上這四步就可以實(shí)現(xiàn)JS調(diào)用后臺(tái)的代碼了。
?
*本文轉(zhuǎn)自：http://www.cnblogs.com/Olive116/archive/2012/10/16/2725798.html
轉(zhuǎn)載于:https://www.cnblogs.com/xiaohui1990/p/3444521.html
總結(jié)
以上是生活随笔為你收集整理的ASP.NET前台JS与后台CS函数如何互相调用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java Socket Tcp 浏览器和
- 下一篇： android:ellipsize实现跑