ASP.NET前台JS與后台CS函數如何互相調用


摘要:
在實際的Web開發中,我們可能會常常遇到后台調用前台JS代碼或者前台JS調用后台代碼的情況。今天就把比較實用的前后台相互調用的方法總結出來和大家分享。

在實際的Web開發中,我們可能會常常遇到后台調用前台JS代碼或者前台JS調用后台代碼的情況。今天就把比較實用的前后台相互調用的方法總結出來和大家分享。

===============后台代碼調用前台JS代碼===============

一、說到后台代碼調用前台的JS代碼很多人首先就會想到使用Clients cript對象。

Clientscript.RegisterStartups cript()方法該方法主要是注冊啟動腳本文本,即在后台執行調用前台JS代碼

該方法有兩個重載,

1Clientscript.RegisterStartups criptType type,string key ,string s cript注冊啟動腳本//分別表示:1、要注冊的啟動腳本的類型(一般直接填this.GetType()即可),2、要注冊的啟動腳本的鍵(相當於為執行腳本起一個名字,任意名即可),3、要注冊的啟動腳本文本(一般為"<s cript>函數()</s cript>")

示例:

Clientscript.RegisterStartups cript(this.GetType(),"SayHello","<s cript>SayHello('"+name+"')</s cript>");//先獲取用戶姓名,然后再調用前台的JS函數SayHello(name);

2Clientscript.RegisterStartups cript(Typetype,string key, string s cript,bool flag);//該函數和第一參數的區別在於將最后一個參數設為"ture"時,第三個參數可以直接寫被調用的函數,不用再加"<s cript></s cript>",這兩個方法差別不是很大。

示例:

Clientscript.RegisterStartups cript(this.GetType(),"SayHello1", "SayHello('" + name + "')", true);//跟第一方法的效果一樣,調用前台SayHello(name)函數,如果最后一個值設為false,則仍需添加上"<s cript></s cript>"標記

這里需要特別注意的是在注冊啟動腳本的時候,鍵是唯一的,不能重復,如果有將會報錯。

二、使用Clientscript.RegisterClients criptBlock()方法,注冊客戶端腳本塊

該方法有兩個重載,使用方法幾乎和Clientscript.RegisterClients criptBlock()的兩個方法一模一樣。這里只是給出示例,就不再做過多的解釋。

Clientscript.RegisterClients criptBlock(this.GetType(),"SayHello2", "ShowPerson('" + age + "')",true);       Clientscript.RegisterClients criptBlock(this.GetType(),"SayHello2","<s cript>SayHello('"+name+"')</s cript>");

在這里主要講一下RegisterClients criptBlock方法和RegisterStartups cript方法和區別

RegisterStartups cript,這種方法會把JS代碼嵌入在頁面的底部、表單的最后 (</form>前面)適用於要在頁面控件加載完成后運行的JS代碼

RegisterClients criptBlock,這種方法會把JS代碼嵌入在頁面的頂部、表單的最前 (<form>后面)適用於要在控件加載前執行的JS代碼

通過html源代碼可見。

三、使用Control.Attribute屬性(服務器控件

這也是一種比較簡單好用的方法,可以將該方法和控件的客戶端方法相關聯,比如“onbluronfocusonmousemoveonmouseover“等,在這里只是把該方法作為Control的一個屬性來用。

示例:

Page_Load()方法里添加如下代碼:

txtname.Attributes["onblur"] ="show('" + txt.Text + "')";//當用戶離開文本框時,會提示所輸入的內容 (在Page_Load使用該方法,其實是在編譯成源文件時在對應的html元素的屬性調用js函數,如<inputtype=”text” onblur=”show()”/>)

還可以通過這種方法來控制前台的顯示。其實現方法和本例的方法都是一樣的,在這里就不做過多的介紹了。

四、可以使用Control的一個屬性,(服務器控件),OnClientClick

為該屬性賦值OnClientClick="SayHello()";則就會調用客戶端的方法,該方法的本質就是一個客戶端的方法。(該屬性只有服務器控件具有,在編譯成源文件時,其實是轉換成對應的事件,如OnClientClick會轉換成onclick)

示例:

      <asp:Button ID="Button1" runat="server"OnClientClick="Get()" Text="OnClientClick方法測試"/>

===============前台JS調用后台方法=================

一、最簡單的一種方式,在前台的JS函數中寫下如下代碼:

Var name=<%=SayHello()%>

Asp.NET 以前的ASP就是通過這樣的方式將cs代碼寫到apsx頁的,在<% %>中就可以寫cs代碼了,效果跟在cs頁寫一樣。

在前台頁面<head><head>節點中添加如下代碼:

<s cript type="text/javas cript>

function Get() {

     var hello="<%=SayHello() %>";

     alert(hello);

      }

  </s cript>

后台cs頁代碼如下:

     public string SayHello()

      {

          return " Javas cript調用后台代碼顯示姓名: Olive";

      }

結果:

 

二、通過輔助按鈕實現前台JS調用后台代碼(這樣相當於添加多了一個按鈕

1、先在前台添加一個服務器端按鈕,雙擊,進入后台.cs頁,寫下將要執行的代碼

如下:

protected void Button4_Click(object sender,EventArgs e)       {

        //在此方法里寫下要執行的代碼,此處為簡單的示例  

          Response.Write("<s cript>alert('O(_)O哈哈~你好!')</s cript>");

}

2、將該按鈕的Width屬性設為0,將Height屬性設為0,形如

<asp:Button ID="btnhoutai" runat="server"Text="" Width="0"Height="0"

          onclick="Button4_Click" />

3、在前台添加一個JS函數,如下:

function Show1() {

          document.getElementById("btnhoutai").click();

       }

4、添加html按鈕並將其onclick="Show1()";

如下:

<input id="btnjs"type="button" value="Js 調用后台C#函數" onclick="Show1()"/>

經過以上這四步就可以實現JS調用后台的代碼了。

 

from:http://www.bdqn.cn/news/201307/10227.shtml


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM