老狗——ASP.NET中後臺*.cs與前臺JS腳本之間互相調用

老狗——ASP.NET中後臺*.cs與前臺JS腳本之間互相調用

<type=“text/javascript”> <type=“text/javascript”>

一、asp.net的後臺代碼*.cs文件中調用javascript腳本中已經定義好的腳本函數

基本包括一下幾種辦法：

① 用Response.Write() 方法寫入腳本：

比如在單擊按鈕後，先操作數據庫，完了後顯示已經完成，可以在最後想調用的地方寫上：

Response.Write("<script type= 'text/javascript' language='javascript' >alert(); ></script>" );

這個方法有個缺陷就是不能調用腳本文件中的自定義的函數，只能調用內部函數，具體調用自定義的函數只能在Response.Write寫上函數定義，比如：

Response.Write ("<script type='text/javascript'>function fun(){...}</script>" );

② 用ClientScript 類動態添加腳本：

用法如下：在想調用某個javascript腳本函數的地方添加代碼，注意要保證MyFun已經在腳本文件中定義過了。

ClientScript.RegisterStartupScript (
ClientScript.GetType (), 
"myscript ",
 "<script type="text/javascript">MyFun();</script> "
 );

例子：

	StringBuilder sb = new StringBuilder(); 
        sb.Append("<script language='javascript'>"); 
        sb.Append("Button2_onclick('" + serverPath + "')"); 
        sb.Append("</script>"); 
    ClientScript.RegisterStartupScript(this.GetType(), "LoadPicScript", sb.ToString());

這個方法比Response.Write更方便一些，可以直接調用腳本文件中的自定義函數。

③ 普通的添加控件的Attributes 屬性：

對於普通按鈕就是: Button1.Attributes.Add ("onclick " ,"MyFun(); " );
只能在Onload中或類似於onload的初始化過程中添加纔有效。而且是先執行腳本函數，無法改變執行順序。
注意，以上所有方法中，後臺代碼都不能有轉化當前頁的代碼，比如Redirect等，要把轉頁代碼放在腳本里面。

④ 定義Literal控件

用法如下：

    Literal lit=new Literal();
    lit.text="<script>alert();</script>";
    this.page.Controls.Add(lit);

⑤ OnClientClick (vs2003不支持這個方法)

<asp:Button ID="Button1" runat="server" Text="Button" 
OnClientClick="client_click()" OnClick="Button1_Click" />

client_click() 就是javascript的一個方法。

二、前臺JS執行或調用後臺的方法函數,常用AJAX,下面給一個不用AJAX的方法：

1. 這裏以Table中的行刪除爲例，如果table中的標籤內容是從後臺取出後在render到前臺的話，行中的刪除按鈕可以寫成JS觸發方式：

   view plaincopy to clipboardprint?
<a href ='javascript:onRowdataDelete(id, groupname, groupid);' >刪除</a>   
<a href ='javascript:onRowdataDelete(id, groupname, groupid);' >刪除</a> 

2. 所調用的前臺js函數爲：

    view plaincopy to clipboardprint?
function onRowdataDelete(rowid, gname, gid) {   
        if (confirm("-----------------------------------------\r\n 用戶組ID:\"" + gid + "\"\r\n 用戶組名稱:\"" + gname + "\"\r\n-----------------------------------------\r\n------- 確認要將以上用戶組刪除嗎? -------" )) {  

            document.getElementById("delid" ).value = rowid;   
            document.getElementById("delgid" ).value = gid;   
            document.getElementById("del_btn" ).click ();   
        }   
        else {          
        }   
    } 
function onRowdataDelete(rowid, gname, gid) {
        if (confirm("-----------------------------------------\r\n 用戶組ID:\"" + gid + "\"\r\n 用戶組名稱:\"" + gname + "\"\r\n-----------------------------------------\r\n------- 確認要將以上用戶組刪除嗎? -------" )) {
            document.getElementById("delid" ).value = rowid;
            document.getElementById("delgid" ).value = gid;
            document.getElementById("del_btn" ).click ();
        }
        else {       
        }
    }

3. 前臺*.aspx 中增加如下隱藏定義：

    view plaincopy to clipboardprint?
< asp:HiddenField ID ="delid" runat ="server" /> 
< asp:HiddenField ID ="delgid" runat ="server" /> 
< asp:Button ID ="del_btn" style ="display : none ;" runat ="server" OnClick ="delbtn_click" />  

< asp:HiddenField ID ="delid" runat ="server" />
< asp:HiddenField ID ="delgid" runat ="server" />
< asp:Button ID ="del_btn" style ="display : none ;" runat ="server" OnClick ="delbtn_click" />

4. 後臺*.cs 中相應的onclick 事件:

       view plaincopy to clipboardprint?
protected void delbtn_click(object sender, EventArgs e){   
       //可以直接獲取刪除行的相關參數：delid.Value, delgid.Value   
       //在此執行你的業務邏輯，比如這裏是刪除的方法函數   
    }   
protected void delbtn_click(object sender, EventArgs e){
       //可以直接獲取刪除行的相關參數：delid.Value, delgid.Value
       //在此執行你的業務邏輯，比如這裏是刪除的方法函數
    } 

5. 簡要註解：

在刪除的js方法被激發後會先執行confirm，確認後會將傳入的幾個參數分別賦給*.aspx前臺頁面中的相應隱藏值，便於後臺取值。最後出發*.aspx頁面中隱藏的button單擊事件，進而開始調用其後臺的單擊事件，執行後臺的方法函數。
（注意*.aspx中Button在隱藏是不能使用visible=false，這樣會使得 getElementById時無法找到此控件 ）

---