ASP.NET进阶（3）：调用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的方法吗？ 这里留着大家想，后面的章节会介绍这个问题。