---

数据绑定和表单标签

---

• 数据绑定

　　数据绑定是将用户输入绑定到领域模型的一种特性，在Spring MVC的controller和view数据传递中，基于HTTP请求的特性，所有HTTP请求参数的类型均为字符串，如果模型领域需要绑定的类型为double或int，则需要手动进行类型转换，而有了数据绑定后，就不需要手动将HTTP请求中的String类型转换为模型需要的类型了，数据绑定的另一个好处是，当输入验证失败时，会重新生成一个HTML表单，无需重新填写输入字段。

• 表单标签库

　　表单标签库中包含了可以用在JSP页面中渲染HTML元素的标签。为了使用这些标签，必须在JSP页面开头处声明taglib指令。

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

　　表单标签库中有input、password、hidden、textarea、checkbox、checkboxes、radiobutton、radiobuttons、select、option、options、errors。表单标签有acceptCharset、commandName、cssClass、cssStyle、htmlEscape、modelAttribute等属性。

1. input标签：input标签渲染<input type="text"/>元素，这个标签最重要的是path属性，该字段将输入绑定到form backing object的一个属性。如下所示，这个input标签被绑定到了user对象的userName属性上
   •              
               
             
                
                 用户名:            
                         
         
               
              
2. password标签：渲染<input type="password"/>元素，password标签与input标签相似，只不过它有一个showPassword属性。
3. textare标签：渲染一个HTML的textarea元素。textarea基本上就是支持多行输入的input元素。
4. checkbox标签：渲染<input type="checkbox"/>元素，同样是通过path属性实现数据绑定，同时checkboxes渲染多个checkbox元素。
5. radiobutton标签渲染<input type="radio"/>元素，radiobuttons渲染多个radio元素。
6. select标签：渲染一个HTML的select元素，被渲染元素的选项可能来自赋予其items属性的Collection、Map、Array，或者来自一个嵌套的option或options标签。

• 数据绑定范例

　　如上分别介绍了数据绑定的定义和优势，以及一些表单标签，为了让大家能进一步了解上面的内容，范例中实现了用户类属性和JSP中表单的绑定，同时在JSP中分别展示了input、password、textarea、checkbox、select标签。

　　我们首先看一下User类，类中包含User的属性，以及对属性字段的get和set方法：

public class User {    private String userName;  //用户名    private String password;  //密码    private Integer sex;      //性别    private boolean marriage; //是否结婚    private ArrayList
      
        hobby;        //兴趣爱好    private ArrayList
       
         contacts;//人脉    private String carrer;   //职业    private String houseRegister;   //户籍    private String remark;   //个人描述    public String getRemark() {        return remark;    }    public void setRemark(String remark) {        this.remark = remark;    }    public String getHouseRegister() {        return houseRegister;    }    public void setHouseRegister(String houseRegister) {        this.houseRegister = houseRegister;    }    public String getCarrer() {        return carrer;    }    public void setCarrer(String carrer) {        this.carrer = carrer;    }    public String getUserName() {        return userName;    }    public void setUserName(String userName) {        this.userName = userName;    }    public String getPassword() {        return password;    }    public void setPassword(String password) {        this.password = password;    }    public Integer getSex() {        return sex;    }    public void setSex(Integer sex) {        this.sex = sex;    }    public boolean isMarriage() {        return marriage;    }    public void setMarriage(boolean marriage) {        this.marriage = marriage;    }    public ArrayList
        
          getHobby() {        return hobby;    }    public void setHobby(ArrayList
         
           hobby) {        this.hobby = hobby;    }    public ArrayList
          
            getContacts() {        return contacts;    }    public void setContacts(ArrayList
           
             contacts) { this.contacts = contacts; }}
           
          
         
        
       
      

　　我们的Controller类中定义映射请求的方法，其中包括处理userInput请求的inputUser方法，以及userSave请求的addUser方法，其中在addUser方法中用到了重定向。其中通过@Autowired注释在ProductController对象中主动注入UserService对象，实现对user对象的保存和查询等操作；通过model的addAttribute方法将User类对象、HashMap类型的hobbys对象、String[]类型的carrers对象传递给View（JSP），代码如下:

@Controllerpublic class ProductController {    private static final Log logger = LogFactory.getLog(ProductController.class);        @Autowired    private UserService userService;        @RequestMapping(value="/userInput")    public String inputUser(Model model){        HashMap
     
       hobbys = new HashMap
      
       ();        hobbys.put(1, "篮球");        hobbys.put(2, "羽毛球");        hobbys.put(3, "台球");        hobbys.put(4, "游泳");        model.addAttribute("user", new User());        model.addAttribute("hobbys", hobbys);        model.addAttribute("carrers",new String[]{"教师","学生","医生","IT民工","其它"});        return "UserAdd";    }    @RequestMapping(value="/userSave")    public String addUser(@ModelAttribute User user){        userService.addUser(user);        return "redirect:/userList";    }    @RequestMapping(value="/userList")    public String listUsers(Model model){        List
       
         users = userService.getUsers();        model.addAttribute("users", users);        return "UserList";    }}
       
      
     

　　同时，为了避免中文乱码的问题，需要在web.xml文件中增加编码过滤器，同时JSP页面编码设置为UTF-8，form表单的提交方式必须为post，我们先看web.xml文件的配置信息：

     
       
            
       
        springmvc
             
       
        org.springframework.web.servlet.DispatcherServlet
             
                 
        
         contextConfigLocation
                  
        
         /WEB-INF/config/springmvc-config.xml
              
             
       
        1
         
        
            
       
        springmvc
             
       
        /
         
        
        
                
       
        characterEncodingFilter
                 
       
        org.springframework.web.filter.CharacterEncodingFilter
                 
                     
        
         encoding
                      
        
         UTF-8
                  
                 
                     
        
         forceEncoding
                      
        
         true
                  
             
            
                
       
        characterEncodingFilter
                 
       
        /*
             
        
     

　　UserAddJSP文件格式如下，其中将Map类型的hobbys绑定到了checkboxes上，将String[]类型的carrer绑定到了select上，实现了通过option标签对select添加选项，同时method方法需指定为post来避免中文乱码的问题。

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
     
     
          
       
        
        
Add a User
        
        
            用户名:            
                 
        
        
            密码:            
                 
        
        
            婚姻:            
                 
        
        
            爱好:            
                 
        
        
            人脉:            
         张三            
         李四            
         王五            
         赵六        
        
        
            职业:            
                          
          请选择职业                
                      
                 
        
        
            户籍:            
                         
          请选择户籍                
          北京                
          上海                
          广州                
          深圳                
          其它            
                 
        
        
            个人描述:            
                 
        
        
                                
    
       
      
     

　　UserList.JSP文件实现对保存的user信息的遍历展示。

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
      
      
    
       
User List
    
       ">Add User    
                   
       
       
                
         
                      
用户名
                      
密码
                      
性别
                      
婚姻
                      
兴趣爱好
                      
人脉
                      
职业
                      
户籍
                      
个人描述
                 
                 
                          
${user.userName }
                          
${user.password }
                          
${user.sex }
                          
${user.marriage }
                          
${user.hobby }
                          
${user.contacts }
                          
${user.carrer }
                          
${user.houseRegister }
                          
${user.remark }
                     
                    
       
      

　　因为该工程是在上一篇工程中增加的，因此其他的配置文件与上一篇工程中相同，这里不再做过多的赘述，希望读者见谅。

　　运行该程序在浏览器中输入http://localhost:8081/SpringMVC/userInput可以看到左图，填写表单完成，点击Add User按钮，即可看到右图的输出信息，不知道读者是否发现输出信息中存在问题，兴趣爱好为[1]，户籍也为1，输出的为表单中选择的索引位置，还有好像保单中忘了指定User的性别了，导致输入性别列为空。这些问题是由于本文的疏忽造成的，有兴趣的读者可以对这篇博客做更加完善的改正，谢谢阅读！