jquery ajax提交form参数 对应asp.net MVC强类型参数

转载地址:http://blog.163.com/guohuanhuan_cool@126/blog/static/16761423820130222512427/

今天在研究jquery用ajax提交form表单中得数据时，学习到了一种新的提交方式

jquery中的serialize() 方法
该方法通过序列化表单值，创建 URL 编码文本字符串
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中
这样当表单中要提交的参数比较多时，就可以使用该方法进行提交，否则将在ajax中得代码会很长，有可能在编写时出错，也不方便检查
以下是自己写的测试代码

ItemInfo类：
public class ItemInfo
{
public string PartNumber
{
get ;
set ;
}
public string Project
{
get ;
set ;
}
public string Family
{
get ;
set ;
}
public decimal Unit_Price
{
get ;
set ;
}
public int ? Component_Qty
{
get ;
set ;
}
public string Active
{
get ;
set ;
}
public string HaveChild
{
get ;
set ;
}
public DateTime Effective_Date
{
get ;
set ;
}
public DateTime Expire_Date
{
get ;
set ;
}
public string Maintained_By
{
get ;
set ;
}
}

Html代码：

<form id="fm" method="post" novalidate>
<div class="fitem">
<label>PartNumber:</label>
<input name="PartNumber" class="easyui-validatebox" required="true" >
</div>
<div class="fitem">
<label>Project:</label>
<input id="projectID" name="Project" class="easyui-combobox" />
</div>
<div class="fitem">
<label>Family:</label>
<input name="Family"/>
</div>
<div class="fitem">
<label>Unit_Price:</label>
<input name="Unit_Price" data-options="min:0.0,precision:6"/ >
</div>
<div class="fitem">
<label>Component_Qty:</label>
<input name="Component_Qty" data-options="min:0,precision:0" />
</div>
<div class="fitem">
<label>Active:</label>
<input type="checkbox" name="Active" />
</div>
<div class="fitem">
<label>HaveChild:</label>
<input type="checkbox" name="HaveChild" />
</div>
<div class="fitem">
<label>Effective_Date:</label>
<input id="EFF_Date" name="Effective_Date" />
</div>
<div class="fitem">
<label>Expire_Date:</label>
<input id="EX_Date" name="Expire_Date" />
</div>
<div class="fitem">
<label>Maintained_By:</label>
<input name="Maintained_By" readonly/>
</div>
</form>

Form表单中的Name属性是必须和ItemInfo类属性的字段名称一致才可以，这一点十分重要。
Jquery代码

$.ajax({
type: "post",
url:'/ItemInfo/EditItem',//对应于controllerName/ActionName
timeout: 3000,
data: $("#fm").serialize(), // { PartNumber: '22', Project: 'Project', Family: 'Chord' },
error: function () { alert('Failed!'); },
success: function (data, textStatus) {
$('#Planner_ItemInfo').datagrid('loadData', data);
}
});

蓝色部分的data经Json数据处理后对应的字段全部是ItemInfo类中属性的，这样MVC会根据ItemInfo类的属性字符串（如Project字段)去Form表单中获取对应的取值，从而实现类数据的取值。

MVC后台代码：

public class ItemInfoController : Controller

{

public bool EditItem(ItemInfo item)

{
return true;
}

}

//OK