ASP.NET 前臺Javascript調用後臺代碼 / 後臺調用前臺Javascript

1：ASP.NET 前臺Javascript調用後臺代碼

1.1:前臺Javascript

1 <script>
2     function CallCs() {
3         var str = "<%=GetStr()%>";
4         alert(str);
5     }
6 </script>
7 
8 <input type="button" name="btnClick" value="js調用後臺代碼" onclick="CallCs();" />

1.2：後臺cs代碼

1 public string GetStr()
2 {
3     string str = "Hello World";
4     return str;
5 }

1.3：源代碼執行順序：

1.3.1：加載後臺Page_Load方法(執行完畢Page_Load中的方法)：

1.3.2：跳轉到前臺執行<%=FunctionName();%>：(執行綁定後臺代碼的操做)

1.3.3：執行前臺js綁定的後臺方法

1.3.4：繼續執行前臺js方法，並把後臺方法GetStr()返回值賦值給str(此時CallCs方法並未被調用，因此不會執行alert()方法)

1.3.5：執行前臺Js其餘代碼(此時js所調用的後臺代碼已經執行完畢)，等待調用CallCs方法

1.3.6：點擊前臺Button(name="btnClick"),則會調用CallCs js代碼

Ps：經過輔助按鈕實現前臺JS調用後臺代碼

一、先在前臺添加一個服務器端按鈕，雙擊，進入後臺.cs頁，寫下將要執行的代碼以下：

1 protected void Button4_Click(object sender, EventArgs e) {
2 
3 //在此方法裏寫下要執行的代碼，此處爲簡單的示例
4 
5 Response.Write("<script>alert('O(∩_∩)O哈哈~你好！')</script>");
6 
7 }

二、將該按鈕的Width屬性設爲0，將Height屬性設爲0，形如

1 <asp:Button ID="btnhoutai" runat="server" Text="" Width="0" Height="0" onclick="Button4_Click" />

三、在前臺添加一個JS函數，以下：

function Show1() {
  document.getElementById("btnhoutai").click();
}

四、添加html按鈕並將其onclick="Show1()"; 以下：

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

通過以上這四步就能夠實現JS調用後臺的代碼了。

2：ASP.NET 後臺調用前臺Javascript 

2.1.1:前臺Javascript (ASP.NET button 不在UpdatePanel中)

1 <script>
2    //ASP.NET button 不在UpdatePanel中
3     function CsCall() {
4         var str = "Hello World CsCall!";
5         alert(str);
6     }
7 </script>
8 
9 <asp:Button Text="後臺調用js" runat="server" ID="BtnCsCall" OnClick="BtnCsCall_Click" />

2.1.2：後臺cs代碼

1  protected void BtnCsCall_Click(object sender, EventArgs e)
2  {
3      ////使用這種則直接調用前臺js方法，不會再全部代碼以後添加CsCall Js(由最後一個參數 bool addScriptTags決定)
4      //this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), "", "<script>CsCall();</script>", false);
5 
6      //使用這種方法則會在前臺全部代碼以後添加<script>CsCall();</script>(由最後一個參數 bool addScriptTags決定)
7      this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), "", "CsCall();", true);
8  }

2.1.3：源代碼執行順序：

2.1.3.1：加載後臺Page_Load方法(執行完畢Page_Load中的方法)：

2.1.3.2：執行前臺Js非方法中的代碼

2.1.3.3：點擊前臺服務器button控件(ID="BtnCsCall"),先回調Page_Load方法(可使用Page.IsPostBack判斷是否回調)

2.1.3.4：回調完Page_Load方法，則執行BtnCsCall_Click方法

2.1.3.5：執行完BtnCsCall_Click後臺方法，則繼續執行前臺非方法中的代碼

2.1.3.6：而後執行前臺全部代碼以後的<script>CsCall();</script>代碼 [由後臺方法動態添加]，最後調用CsCall js方法

2.2.1:前臺Javascript (ASP.NET button 在UpdatePanel中)

1 <script>
2     //ASP.NET button在UpdatePanel中
3     function CsCall() {
4         var str = "Hello World CsCall!";
5         alert(str);
6     }
7 </script>

1 <form id="form1" runat="server">
2     <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
3     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
4         <ContentTemplate>
5             <asp:Button Text="UpdatePanelButtonCsCallJs" runat="server" ID="btnUpdatePanelButton" OnClick="btnUpdatePanelButton_Click" />
6         </ContentTemplate>
7     </asp:UpdatePanel>
8 </form>

2.2.2：後臺cs代碼

1  protected void btnUpdatePanelButton_Click(object sender, EventArgs e)
2  {
3      //如有UpdatePanel就用以下代碼調用前臺js
4      ScriptManager.RegisterStartupScript(UpdatePanel1, this.Page.GetType(), "", "CsCall();", true);
5  }

<1>後臺代碼調用前臺JS代碼

1、說到後臺代碼調用前臺的JS代碼不少人首先就會想到使用 ClientScript.RegisterStartupScript()方法

該方法主要是註冊啓動腳本文本，即在後臺執行調用前臺JS代碼

該方法有兩個重載，

一、ClientScript.RegisterStartupScript（Type type,string key ,string script）//分別表示：一、要註冊的啓動腳本的類型（通常直接填this.GetType()便可），二、要註冊的啓動腳本的鍵（至關於爲執行腳本起一個名字,任意名便可），三、要註冊的啓動腳本文本（通常爲"<script>函數（）</script>")；示例：

 1 this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), "", "<script>CsCall();</script>"); 

二、ClientScript.RegisterStartupScript(Type type,string key, string script,bool flag);//該函數和第一參數的區別在於將最後一個參數設爲"ture"時，第三個參數能夠直接寫被調用的函數，不用再加"<script></script>",這兩個方法差異不是很大。示例：

1 //使用這種方法則會在前臺全部代碼以後添加<script>CsCall();</script>(由最後一個參數 bool addScriptTags決定)
2 this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), "", "CsCall();", true);

這裏須要特別注意的是在註冊啓動腳本的時候，鍵是惟一的，不能重複，若是有將會報錯。

2、使用ClientScript.RegisterClientScriptBlock()方法

該方法有兩個重載，使用方法幾乎和ClientScript.RegisterStartupScript()的兩個方法如出一轍。這裏只是給出示例，就再也不作過多的解釋。

1 this.Page.ClientScript.RegisterClientScriptBlock(this.Page.GetType(), "", "<script>CsCall();</script>");
2 this.Page.ClientScript.RegisterClientScriptBlock(this.Page.GetType(), "", "CsCall();", true);

在這裏主要講一下RegisterClientScriptBlock方法和RegisterStartupScript方法和區別

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

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

3、使用Control.Attribute屬性

這也是一種比較簡單好用的方法，能夠將該方法和控件的客戶端方法相關聯，好比「onblur，onfocus，onmousemove，onmouseover「等，在這裏只是把該方法做爲Control的一個屬性來用。

示例：

在Page_Load（）方法裏添加以下代碼：

txtname.Attributes["onblur"] = "show('" + txt.Text + "')";//當用戶離開文本框時，會提示所輸入的內容

還能夠經過這種方法來控制前臺的顯示。其實現方法和本例的方法都是同樣的，在這裏就不作過多的介紹了。

4、可使用Control的一個屬性，OnClientClick

爲該屬性賦值OnClientClick="SayHello()";則就會調用客戶端的方法，該方法的本質就是一個客戶端的方法。

示例：

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

 ASP.NET測試源代碼：連接：http://pan.baidu.com/s/1bnZzQ03  密碼：zm1f