子非鱼,安知鱼之乐?

我的程序人生,累并快乐着。
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Asp.net里面使用怎样的模板并使用Ajax?

Posted on 2006-09-03 13:23  Jason Cui  阅读(1005)  评论(1编辑  收藏  举报

研究了很多成熟的系统,大部分都是使用用户控件ascx文件的形式来做模板。但是我总觉得这样对于美工来说过于复杂了。在当前的一个项目中,我们的美工对于asp.net基本上一窍不通的,所以如果还以这种方式来做的话,只能是他做出HTML模板,然后我把模板拆成一块块的ascx。而且,这些ascx没有办法预览,设计期看起来非常的不直观。

想来想去还是觉得PHP的模板技术是最合适的,于是决定放弃一些asp.net的技术,整合一下PHP的模板方式。使用简单的HTML里面加标记,然后用纯正的C#语言读取html模板文件,用计算出来的字符串替换这些固定的标记,然后用response.write写到客户端。虽然原始一些,但是却可以很好的解决前面那些问题,我不需要再重复一次美工的工作了。不过还有个缺点,就是需要循环的部分就要单独拿出来做一个单独的文件,可能会导致文件数量比较多。不过相对来说,这不是大问题,大不了拆分模板目录。

结果又遇到了另一个问题。现在做项目,Ajax是必备的了。但是看了很多项目的介绍,好像asp.net上的实现方式都要依赖于asp.net的服务器控件。为了这个问题,今天想了一天,未果。晚上回到家里,仔细研究了一下Ajax.net(好像现在改名AjaxPro了),发现它的实现方式跟PHP里面的Ajax是蛮想像的。试用了一下,一切OK,完全可以在独立的html文件里面使用。简单介绍一下使用方式。

下载后台库:http://www.schwarz-interactive.de/?在Web项目中引用dll文件(分1.1和2.0两个dll文件),然后在默认的asp.net页的Page_Load事件中加上:

Ajax.Utility.RegisterTypeForAjax(typeof(Index));

注意typeof里面的类名,这里应该是包含你要去后台调用的函数的类,如果跟这个页面不在同一个命名空间,可以使用typeof(命名空间.类名)的方式。运行这个页面,查看结果页面的源代码,会发现在页面上被加入了四行Script引用。把这四行复制下来。像这样:

<script type="text/javascript" src="/TestClassicAjax/ajaxpro/prototype.ashx"></script>
<script type="text/javascript" src="/TestClassicAjax/ajaxpro/core.ashx"></script>
<script type="text/javascript" src="/TestClassicAjax/ajaxpro/converter.ashx"></script>
<script type="text/javascript" src="/TestClassicAjax/ajaxpro/AjaxFunctionClasses.UserFunctions, AjaxFunctionClasses.ashx"></script>

把这四行添加到你的HTML模板文件的Head段。这里的最后一行是因为我的类放在了这个单独的类库里面,所以显示的是命名空间.类名,命名空间的方式。你可以试试在浏览器里访问一下这个Src地址,会出现文件找不到的错误,因为ajaxpro这个目录其实是不存在的。这个后面再解释。

有了这四行,你的这个标准网页就具有了调用后台函数并获取返回结果的能力了。接下来在你的项目中实现这个要调用的类。类本身没有什么特别的,但是对于要调用的函数名,要加上[AjaxPro.AjaxMethod]属性。这样才能通过反射找到并执行它。然后你就可以在页面中加入Javascript函数来调用你的函数了。(这一点还是不如PHP里面好用,PHP里基本上都可以自动生成Js函数的。)

我们在页面里放两个JS函数。

<script language="javascript">
function CheckUser()
{
AjaxFunctionClasses.UserFunctions.IsUserExist(
"", CheckUser_callback);? // asynchronous call
}
function CheckUser_callback(res)
{
alert(res.value);
}
</script>

我的后台函数名字是IsUserExist,通过完全限定名来引用它。该函数接受一个参数作为要检查的用户名,返回的结果是该用户是否存在。这个实现就不用说了。CheckUser函数通过Ajax调用,将一个回调函数传给你的后台函数,当你的后台函数执行完毕以后,所有的返回结果存入在res里,传递给这个回调函数。这一切都是ajaxpro.dll为你做的。现在你就可以在页面的OnClick等事件里调用CheckUser函数了。返回的结果现在是使用对话框显示的,当然你也可以把它显示在你的TextBox或者Div里面了。

现在执行一下你的页面,结果是错误的。因为前面要被引用的那些src还不存在。那么它们在什么地方呢?我们只需要在web.config里面加上一个handler,让所有的对ajaxpro目录进行的访问全部交给ajaxpro.dll来处理,那么这个库就会返回所有需要的js引用了。在System.web段添加:

<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/>
</httpHandlers>

再试一下你的页面,OK了吧。现在的index.aspx只需要最顶上那一行对后台类的引用代码,其它的都可以删掉,然后在它的源代码里面读取HTML模板并写到Response里就可以了。当然,你只需要在要使用Ajax功能的页面里添加这些引用和相关的JS代码。(自己写JS代码也蛮累的。对于一些常用的替换文本框的值和div的值的代码你需要收藏一些了)。

最后,这种简单的模板方式还有一个很大的好处,所有的页面都是在完全生成字符串以后返回给用户的,这样就可以极其方便的做到把生成的字符串写入静态网页文件。通过定期检查文件的日期,做到每隔15分钟更新一次,如果不到更新的时间,就不需要重复的查询数据库了。