AJax几乎成了web2.0的一个代表,Java和Asp.net中都提供了一些AJax操作的控件。在MonoRail中也同样提供了AJax操作的共通类:AJaxHelper
AJaxHelper可以指定当文本框输入变化时调用后台代码、可以监控一个Form,当Form内控件值变化时调用后台代码、可以在点击一个按钮时调用后台代码,也可以在页面加载时就调用后台代码。当然这些调用都是采用AJax,即无刷新方式的,调用后可以自动更新页面中的一块区域的内容。
使用AJaxHelper后,几乎只要处理自己的业务逻辑就可以了,和AJax有关的代码都封装好了。下面就来看看这几种方式的使用方法:
AJax几乎成了web2.0的一个代表,Java和Asp.net中都提供了一些AJax操作的控件。在MonoRail中也同样提供了AJax操作的共通类:AJaxHelper
AJaxHelper可以指定当文本框输入变化时调用后台代码、可以监控一个Form,当Form内控件值变化时调用后台代码、可以在点击一个按钮时调用后台代码,也可以在页面加载时就调用后台代码。当然这些调用都是采用AJax,即无刷新方式的,调用后可以自动更新页面中的一块区域的内容。
使用AJaxHelper后,几乎只要处理自己的业务逻辑就可以了,和AJax有关的代码都封装好了。下面就来看看这几种方式的使用方法:
以下的Controller类都是从SmartDispatcherController继承的
一、监控文本框
Controller代码:
public void index()
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}
![](/Images/OutliningIndicators/None.gif)
public void InferAddress(String zip)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
RenderText("Address " + zip);
}
其中String zip的zip变量名需要和vm页面中的控件名相同
vm代码:
1
<html>
2
<head>
3
$AjaxHelper.GetJavascriptFunctions()
4
</head>
5![](/Images/OutliningIndicators/None.gif)
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![](/Images/OutliningIndicators/None.gif)
15
$AjaxHelper.ObserveField("%{field='zip', frequency='2', url='inferaddress.rails', update='address', with='Form.serialize(theform)'}")
16![](/Images/OutliningIndicators/None.gif)
17
</body>
18
</html>
19![](/Images/OutliningIndicators/None.gif)
第三行是注册AJax的脚本,第十五行就是监听zip控件,当输入变化时自动调用inferaddress.rails,将返回的文本更新到dir id="address"的区域中
二、监控Form
vm:
<html>
<head>
$AjaxHelper.GetJavascriptFunctions()
</head>
![](/Images/OutliningIndicators/None.gif)
<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>
![](/Images/OutliningIndicators/None.gif)
$AjaxHelper.ObserveForm("myform", 2, "FormTest.rails", "message", null)
</body>
</html>
![](/Images/OutliningIndicators/None.gif)
controller
public void FormTest(string value, string addressf)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
RenderText(value + "::" + addressf);
}
这里的定义有点奇怪,好像是一个BUG,也可能是1.0 RC3还在开发阶段所致
对Form中的第一个控件:"姓名",在controller必须定义成"value"名才能取得值,而且取得的值也有问题(会在前面加上控件名称),看下面的执行结果:
![](/images/cnblogs_com/firstyi/ajaxhelper1.jpg)
三、响应按钮事件
vm:
<html>
<head>
$AjaxHelper.GetJavascriptFunctions()
</head>
![](/Images/OutliningIndicators/None.gif)
<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>
![](/Images/OutliningIndicators/None.gif)
controller:
public void UserList(String name, String email)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
IList list = Session["userlist"] as IList;
if (list == null)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
list = new ArrayList();
}
list.Add(name + " " + email + "<br>");
Session["userlist"] = list;
![](/Images/OutliningIndicators/InBlock.gif)
System.Text.StringBuilder userList = new System.Text.StringBuilder();
for (int i = 0; i < list.Count; i++)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
userList.Append(list[i] as string);
}
RenderText(userList.ToString());
![](/Images/OutliningIndicators/InBlock.gif)
}
这样每次点增加按钮时,就可以不用刷新页面,直接就能把增加的信息显示在指定的位置了,当然你可以执行一些复杂的操作
四、直接调用后台代码
Controller
public void User()
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
RenderText("user :" + Session["name"] as string);
}
![](/Images/OutliningIndicators/None.gif)
vm:
$AjaxHelper.GetJavascriptFunctions()
<div id="user">
</div>
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script language=javascript>![](https://www.cnblogs.com/Images/dot.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
new Ajax.Updater('user', '/myajax/User.rails',
{});
</script>
可以在页面加载时就调用指定的User.rails命令,更新user区域