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区域