人无信不立/2008-04-26 22:30

MonoRail学习笔记十六:AJax在MonoRail中的使用

AJax几乎成了web2.0的一个代表,Java和Asp.net中都提供了一些AJax操作的控件。在MonoRail中也同样提供了AJax操作的共通类:AJaxHelper
AJaxHelper可以指定当文本框输入变化时调用后台代码、可以监控一个Form,当Form内控件值变化时调用后台代码、可以在点击一个按钮时调用后台代码,也可以在页面加载时就调用后台代码。当然这些调用都是采用AJax,即无刷新方式的,调用后可以自动更新页面中的一块区域的内容。
使用AJaxHelper后,几乎只要处理自己的业务逻辑就可以了,和AJax有关的代码都封装好了。下面就来看看这几种方式的使用方法:
以下的Controller类都是从SmartDispatcherController继承的
一、监控文本框
Controller代码:

        public void index()
        
{
        }


        
public void InferAddress(String zip)
        
{
            RenderText(
"Address " + zip);
        }

其中String zip的zip变量名需要和vm页面中的控件名相同

vm代码:

 1<html>
 2<head>
 3$AjaxHelper.GetJavascriptFunctions()
 4</head>
 5
 6<body>
 7<form id="theform">
 8  请输入邮政号码:<br>
 9  <input type="text" name="zip" id="zip"> 
10  <br>
11  <div id="address">
12  </div>
13</form>
14
15$AjaxHelper.ObserveField("%{field='zip', frequency='2', url='inferaddress.rails', update='address', with='Form.serialize(theform)'}")
16
17</body>
18</html>
19

第三行是注册AJax的脚本,第十五行就是监听zip控件,当输入变化时自动调用inferaddress.rails,将返回的文本更新到dir id="address"的区域中

二、监控Form
vm:

<html>
<head>
$AjaxHelper.GetJavascriptFunctions()
</head>

<body>
<form id="myform">
  姓名: 
<input type="text" name="name" id="name"> <br>
  地址: 
<input type="text" name="addressf" id="addressf"> 
  
  
<br>
  
<div id="message">
  
</div>
</form>

$AjaxHelper.ObserveForm("myform", 2, "FormTest.rails", "message", null)
</body>
</html>
controller
        public void FormTest(string value, string addressf)
        
{
            RenderText(value 
+ "::" + addressf);
        }

这里的定义有点奇怪,好像是一个BUG,也可能是1.0 RC3还在开发阶段所致
对Form中的第一个控件:"姓名",在controller必须定义成"value"名才能取得值,而且取得的值也有问题(会在前面加上控件名称),看下面的执行结果:


三、响应按钮事件
vm:

<html>
<head>
$AjaxHelper.GetJavascriptFunctions()
</head>

<body>
  
<div id="userlist">
  
</div>
  
$AjaxHelper.BuildFormRemoteTag("UserList.rails", "%{update='userlist'}" )
<table>  
    
<tr>
        
<td>姓名:</td>
        
<td><input type="text" name="name"></td>
    
</tr>
    
<tr>
        
<td>邮件:</td>
        
<td><input type="text" name="email"></td>
    
</tr>
    
<tr>
        
<td colspan="2" align="center">
        
<input type="submit" value="增加">
        
</td>
    
</tr>
</table>  
</form>
</body>
</html>

controller:

        public void UserList(String name, String email)
        
{
            IList list 
= Session["userlist"as IList;
            
if (list == null)
            
{
                list 
= new ArrayList();
            }

            list.Add(name 
+ "        " + email + "<br>");
            Session[
"userlist"= list;

            System.Text.StringBuilder userList 
= new System.Text.StringBuilder();
            
for (int i = 0; i < list.Count; i++)
            
{
                userList.Append(list[i] 
as string);
            }

            RenderText(userList.ToString());

        }

这样每次点增加按钮时,就可以不用刷新页面,直接就能把增加的信息显示在指定的位置了,当然你可以执行一些复杂的操作

四、直接调用后台代码
Controller

        public void User()
        
{
            RenderText(
"user :" + Session["name"as string);
        }


vm:
$AjaxHelper.GetJavascriptFunctions()
  
<div id="user">
  
</div>
  
<script language=javascript>
    
new Ajax.Updater('user', '/myajax/User.rails', {}); 
  
</script>
可以在页面加载时就调用指定的User.rails命令,更新user区域
posted @ 2007-11-05 18:16 永春 阅读(2318) 评论(10)  编辑 收藏 所属分类: MonoRail

  回复  引用  查看    
#1楼 2007-11-06 09:03 | 亚历山大同志      
其实反而高搞麻烦了,直接用jQuery在页面上写Js也不见得就很困难
  回复  引用  查看    
#2楼 [楼主]2007-11-06 09:32 | GSpring      
@亚历山大同志
-_-,其实都一样,jQuery和AJaxHelper都是一种工具,只要熟悉了,会用了就可以了
  回复  引用  查看    
#3楼 2007-11-06 11:42 | Klesh Wong      
@GSpring
jQuery还是比较具有通用性的,Helper用得多界面和MonoRail的粘合性就越大.那么,界面移植起来就比较麻烦了.当然,界面会不会被移植,则要看你的需要了.
  回复  引用  查看    
#4楼 2007-11-06 11:44 | Klesh Wong      
@GSpring
还有,客户端方面使用客户端framework,对应服务端开发平台转变的情况也是比较好的.即使服务器改用php开发,原来的客户端开发技术一样可以应用,但是Helper就不行啦.
  回复  引用  查看    
#5楼 [楼主]2007-11-06 13:27 | GSpring      
@Klesh Wong
说的有道理。
  回复  引用    
#6楼 2008-01-22 23:51 | yizhenfeng [未注册用户]
菜鸟问个问题: jQuery 是个什么东西 和ajax有啥联系?
  回复  引用  查看    
#7楼 [楼主]2008-01-23 09:07 | 永春      
@yizhenfeng
jQuery相当于一个Javascript的类库,里面提供了很多方法
ajax本质上也是通过调用Javascript来实现的
  回复  引用    
#8楼 2008-01-23 12:51 | yizhenfeng [未注册用户]
◎永春
谢谢 我去下载下来学习下
  回复  引用    
#9楼 2008-04-29 12:17 | 撒旦 [未注册用户]
sfsdgeyrhnhj

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  博客园首页

  新闻频道

  社区

  小组

  博问

  网摘

  闪存

  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
成果网帮您增加网站收入


相关链接:

历史上的今天:
2006-11-05 我的未来在哪里??