用jQuery.form实现批量输入控件的提交

页面表单代码如下：

<form id="form1" action="/AjaxDemo/BatchAddCustomer.cspx" method="post">
    <p><b>批量新增客户资料</b></p>
    <table border="0">
    <tr><td>Name</td><td>Age</td><td>Address</td><td>Tel</td><td>Email</td></tr>
    <tr><td><input type="text" name="Name" class="Name" value="A" /></td>
        <td><input type="text" name="Age" class="Age" value="20" /></td>
        <td><input type="text" name="Address" class="Address" value="武汉" /></td>
        <td><input type="text" name="Tel" class="Tel" value="12345678" /></td>
        <td><input type="text" name="Email" class="Email" value="test1@163.com" /></td></tr>
    <tr><td><input type="text" name="Name" class="Name" value="B" /></td>
        <td><input type="text" name="Age" class="Age" value="20" /></td>
        <td><input type="text" name="Address" class="Address" value="上海" /></td>
        <td><input type="text" name="Tel" class="Tel" value="22222222" /></td>
        <td><input type="text" name="Email" class="Email" value="" /></td></tr>
    <tr><td><input type="text" name="Name" class="Name" value="C" /></td>
        <td><input type="text" name="Age" class="Age" value="20" /></td>
        <td><input type="text" name="Address" class="Address" value="武汉" /></td>
        <td><input type="text" name="Tel" class="Tel" value="" /></td>
        <td><input type="text" name="Email" class="Email" value="test3@163.com" /></td></tr>
    <tr><td><input type="text" name="Name" class="Name" value="" /></td>
        <td><input type="text" name="Age" class="Age" value="" /></td>
        <td><input type="text" name="Address" class="Address" value="" /></td>
        <td><input type="text" name="Tel" class="Tel" value="" /></td>
        <td><input type="text" name="Email" class="Email" value="" /></td></tr>
    <tr><td><input type="text" name="Name" class="Name" value="D" /></td>
        <td><input type="text" name="Age" class="Age" value="" /></td>
        <td><input type="text" name="Address" class="Address" value="" /></td>
        <td><input type="text" name="Tel" class="Tel" value="12345678" /></td>
        <td><input type="text" name="Email" class="Email" value="" /></td></tr>
    </table>
    <p>说明：每行数据只有当Name，Age，Tel有效时，整行数据才有效。</p>
    <input type="submit" name="batchAddCustomer" value="保存客户资料" />
</form>

JavaScript：

<script type="text/javascript">

$(function(){

$("#form1").ajaxForm({

success:function(result){

$("#output").val(result);

}

});

});

服务端代码如下：

public class BatchSubmitCustomer
{
    public string[] Name { get; set; }
    public string[] Age { get; set; }
    public string[] Address { get; set; }
    public string[] Tel { get; set; }
    public string[] Email { get; set; }
}

[Action]
public string BatchAddCustomer(BatchSubmitCustomer input)
{
    List<Customer> list = new List<Customer>();
    for( int i = 0; i < input.Name.Length; i++ ) {
        if( input.Name[i].Length > 0 && TryToInt(input.Age[i]) > 0 && input.Tel[i].Length > 0 ) {
            Customer c = new Customer {
                Name = input.Name[i],
                Age = TryToInt(input.Age[i]),
                Address = input.Address[i],
                Tel = input.Tel[i],
                Email = input.Email[i]
            };
            list.Add(c);
        }
    }

    return XmlHelper.XmlSerialize(list, Encoding.UTF8);
}

// 还可以采用下面的方法来处理表单数据
[Action]
public string BatchAddCustomer2(string[] name, string[] age, string[] address, string[] tel, string[] email)
{
    return BatchAddCustomer(new BatchSubmitCustomer {
        Name = name,
        Address = address,
        Age = age,
        Email = email,
        Tel = tel
    });
}