- 我想所有处理表单程序的同仁都会觉得很无聊,显示数据的时候要将业务对象一一绑定到表单,处理提交表单的时候要将包含在表单中的字段一个个再绑定到业务对象。这个过程很繁琐,而且修改的时候也不愉快。
以前表单的处理程序基本上都延着这样的套路(这里以C#为例,其它语言大致相同):
textBoxPersonName.Text = person.Name;
textBoxPersonBirthday.Text = person.Birthday.ToString("yyyy-MM-dd");
int index = 0;
for(int i=0; i<dtBirthplac.Rows.Count; i++){
if(dtBirthplac.Rows[i]["Code"].ToString() == person.Birthplac){
index = i;
break;
}
}
dropdownListPersonBirthplace.SelectedIndex = index;
……
或者直接在模板上处理的代码如下(这里以Velocity为例,其模板语言它大致相同):
<input id="PersonName" name="PersonName" value="$!person.Name" />
<input id="Birthday" name="Birthday" value="$!person.Birthday.ToString("yyyy-MM-dd")" />
#foreach($r in $dtBirthplac.Rows)
#if($r.Code == $person.Birthplac)
<option value="$r.Code" selected="selected">$r.Desc</option>
#else
<option value="$r.Code">$r.Desc</option>
#end
#end
提交表单的时候同样繁琐,很多时候会涉及到类型转换,属性比较多的时候更是无法忍受,代码如下:
person.Name = request["Name"];
person.Birthplace = int.Parse(request["Birthplace"]);
…… - 现在
如果可以将对象的双向绑定自动化好了(即可以从对象转化为表单,将表单直接转化为对象)。Javascript中对象是韧性的(flexibility),用代码可以随时修改对象的成员。在客户端用js可以很容易实现字段的绑定。客户端部分可以采用同一的Javascritp来处理。如:
var person = {
Name: 'lisq',
Birthday:'100'
}
<form id="formPerson">
<input name="Name" />
<input name="Birthplace" />
</form>
<script>
for(p in person){
$(p).value = person[p]
}
</script>
提交表单也从传统的form.submit()转变为,先将表单转为json格式(参考json的js的实现 Prototype的Form对象),然后再提交表单,综合ajax应用,代码如下:
<script>
var p = formPerson.serialize(true)
var paras = 'O=' + p.toJSONString()
request(url, paras, function(){
alert('保存成功!')
})
</script>
服务器端得到的字段只有O,而不是从前的Name,Birthplace,O是经过转化的字符串{Name: 'lisq',Birthday:'100'},服务器端做一个Json到C#Object的转化,Person p = JSON.Serialize(request["O"], typeof(Person))(参考json的C#实现),如果数据访问层有较好的实现再添加一行代码就可以做到p.Save()(参考NHibernate)。如此这般甚好!!!
当然这样的双向绑定中会出现很多细节,尤其是服务器端的json反向解析,由json格式的字符串回到服务器需要根据不同的平台语言做具体的实现。不过不管怎么样,这也是一种尝试吧,希望能对以后表单程序的开发有所启发。