学步园

昨天有同学在群里问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的方法吗？ 这里留着大家想，后面的章节会介绍这个问题。