ASP.NET進階（3）：調用Javascript

文章目錄

• 調用Javascript

昨天有同學在群裡問MVC怎麼讓後台調用前台的js方法，我給他講了半天他還是沒能理解，我很暈。 

調用Javascript不管是論壇還是QQ群裡，很多同學都會問一個問題，就是他的背景程式怎麼調用前台JS的方法。問這個問題其實不奇怪，奇怪的是很多同學沒想到的一點就是B/S到底是怎麼工作的？知道工作方式我們還能不會“調用”嗎？B/S：Browser / Server，即“瀏覽器/服務端”模式的應用程式。Browser就是瀏覽器，瀏覽器開啟網頁後網頁是在哪？用戶端！緩衝裡！Javascritpt是用戶端啟動並執行，而背景程式是伺服器啟動並執行，伺服器怎麼能調用到用戶端的代碼呢？伺服器的責任是什嗎？是負責的是頁面的產生！ 既然可以是產生頁面，我可以產生的程式碼裡有對某個JS的方法的調用。例如：<script>
function alertme(){

    alert("hello");

}
</script>

 

我想調用這個alertme，如果我產生的html代碼裡有 <script>alertme();</script>就可以了吧？怎麼才能有？ 輸出啊！ASP.NET裡也提供了幾種不同的輸出方式，RegisterClientScriptBlock 、RegisterStartupScript、 RegisterClientScriptInclude、RegisterClientScriptResource等，平時我們用Reponse.Write("")即可。那麼這麼多RegisterClientScript我該用哪個呢？
首先我們要清楚這些RegisterClientScript是幹什麼的，自然就知道怎麼用了。開啟MSDN（我們要習慣查看MSDN）看看每個的詳細介紹。 protected void Page_Load(object sender, EventArgs e)
{
    Page.ClientScript.RegisterStartupScript(GetType(), "alert", "<script type=text/javascript> document.write('RegisterStartupScript'); </script>");
    Page.ClientScript.RegisterClientScriptBlock(GetType(), "alert", "<script type=text/javascript> document.write('RegisterClientScriptBlock'); </script>");
    Page.ClientScript.RegisterClientScriptInclude(GetType(), "alert", "scripts/jquery-1.4.1.js");
    Page.ClientScript.RegisterClientScriptResource(GetType(), "jquery");
}

 

 看看產生的HTML：

代碼

<!--這是Block-->
<script type=text/javascript> document.write('RegisterClientScriptBlock'); </script> 

<!--這是Include-->
<script src="scripts/jquery-1.4.1.js" type="text/javascript"></script> 

<!--這是Source-->
<script src="/WebResource.axd?d=eSqmgi-l6CZy070cbDdcTJ63DvWE5qxNSXwJOSqYZW81&amp;t=634196210013506462" type="text/javascript"></script> 
    <div> 
    
    </div> 

<!--這是Startup--> 
<script type=text/javascript> document.write('RegisterStartupScript'); </script></form> 

 

可以看到Startup在form的底部，而block在form的開始部位，include和block一樣，而source就很奇怪，是webresource。
從函數名字我們就可以理解他們的含義：

Startup 開始、啟動，一般放一些調用語句或DOM處理代碼，所以至少要在控制項輸出後才輸出這些代碼最為穩妥。
Block 代碼塊，一般是放置function代碼，以備其他地方調用。 當然 其實可以放任意代碼，前提是你要知道js的運行規則。

include其實就是串連外部js檔案，比如我的scripts目錄下有個jquery-1.4.1.js。

resouce資源的意思，他一般用於自訂控制項開發，比如我們開發一個控制項的時候需要用到某些js檔案，但我們的控制項最終會是一個dll，那js放哪呢？ 做過WinForm的同學都知道resource是什麼，他就是dll所需要的資源檔，包含一些表徵圖、語言套件、靜態檔案等。 而且這些資源都會有一個name，所以RegisterResource是用於自訂控制項開發的。

 

再提醒一次，當點擊了按鈕控制項後，頁面提交了！開啟的是Post後的頁面，只是這次輸出的Html和提交之前相比多了你所輸出的JS代碼！你知道怎麼能讓頁面點擊提交後不造成重新整理嗎？要想讓輸出的JS調用有效，要遵守JS的運行規則。

Javascript的規則是什嗎？ javascript語言是一個萬物皆對象的語言。你代碼裡的任何東西都是對象，一個變數，一個方法。方法可以調用前或後聲明，而變數則必須使用前聲明（不然就是undefined）。按照代碼的書寫順序執行（包含嵌套順序）。 

如果調用方法，則頁面需要有方法的聲明或引用。如果是處理DOM，則需要在DOM節點後輸出或window.onload或document.ready(jQuery)裡輸出，否則document.getElementById()往往就是undefinded了。

Reponse.End是一個很特殊的方法，他會讓IIS停止輸出。所以如果你的提交後的頁面用了Response.End()，那就得確定你的JS方法所使用的資源是否有輸出。 

 

現在大家明白如何“調用”了，並且明白了JS輸出的順序問題，OK，大功告成！ 問題又來鳥！ 你知道如何用js調用後台.cs的方法嗎？ 這裡留著大家想，後面的章節會介紹這個問題。