MVC MVVM Knockout viewmodel 提交 完整过程，包含序列化 JSON 和 字典模型绑定

//JSON通用操作------------------------------------------------------------------------------
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Runtime.Serialization;
usingSystem.Runtime.Serialization.Json;
usingSystem.IO;
usingSystem.Text;
usingSystem.Text.RegularExpressions;
namespaceDotNet.Common
{
///<summary>
///JSON序列化和反序列化辅助类
///</summary>
publicclassJsonHelper
{
privatestaticbool?_isEncrypt;
publicstaticboolIsEncrypt
{
get
{
boolresult=false;
if(_isEncrypt==null)
{
if(System.Configuration.ConfigurationManager.AppSettings["ConStringEncrypt"]=="true")
{
result=true;
}
}
else
{
result=(bool)JsonHelper._isEncrypt;
}
returnresult;
}
set{JsonHelper._isEncrypt=value;}
}

///<summary>
///JSON序列化
///</summary>
publicstaticstringJsonSerializer<T>(Tt)
{
DataContractJsonSerializerser=newDataContractJsonSerializer(typeof(T));
MemoryStreamms=newMemoryStream();
ser.WriteObject(ms,t);
stringjsonString=Encoding.UTF8.GetString(ms.ToArray());
ms.Close();
//替换Json的Date字符串
stringp=@"\\/Date\((\d+)\+\d+\)\\/";
MatchEvaluatormatchEvaluator=newMatchEvaluator(ConvertJsonDateToDateString);
Regexreg=newRegex(p);
Regexreg1=newRegex(@"\\/Date\((-\d+)\+\d+\)\\/");
jsonString=reg.Replace(jsonString,matchEvaluator);
jsonString=reg1.Replace(jsonString,matchEvaluator);
if(IsEncrypt)
{
returnDotNet.Common.DEncrypt.DESEncrypt.Encrypt(jsonString);
}
else
{
returnjsonString;
}

}

///<summary>
///JSON反序列化
///</summary>
///
publicstaticTJsonDeserialize<T>(stringjsonString)
{
if(IsEncrypt)
{
jsonString=DotNet.Common.DEncrypt.DESEncrypt.Decrypt(jsonString);
}
//将"yyyy-MM-ddHH:mm:ss"格式的字符串转为"\/Date(1294499956278+0800)\/"格式
stringp=@"\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}";
MatchEvaluatormatchEvaluator=newMatchEvaluator(ConvertDateStringToJsonDate);
Regexreg=newRegex(p);
jsonString=reg.Replace(jsonString,matchEvaluator);
DataContractJsonSerializerser=newDataContractJsonSerializer(typeof(T));
MemoryStreamms=newMemoryStream(Encoding.UTF8.GetBytes(jsonString));
Tobj=(T)ser.ReadObject(ms);
returnobj;
}

///<summary>
///将Json序列化的时间由/Date(1294499956278+0800)转为字符串
///</summary>
privatestaticstringConvertJsonDateToDateString(Matchm)
{
stringresult=string.Empty;
DateTimedt=newDateTime(1970,1,1);
dt=dt.AddMilliseconds(long.Parse(m.Groups[1].Value));
dt=dt.ToLocalTime();
result=dt.ToString("yyyy-MM-ddHH:mm:ss");
returnresult;
}

///<summary>
///将时间字符串转为Json时间
///</summary>
privatestaticstringConvertDateStringToJsonDate(Matchm)
{
stringresult=string.Empty;
DateTimedt=DateTime.Parse(m.Groups[0].Value);
dt=dt.ToUniversalTime();
TimeSpants=dt-DateTime.Parse("1970-01-01");
result=string.Format("\\/Date({0}+0800)\\/",ts.TotalMilliseconds);
returnresult;
}
}
}
//--------------------------------------------------

//自定义帮助类
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;

namespaceDotNet.Common.Json
{
publicclassSerializeHelper:IDataSerialize
{
publicstringSerializer<T>(Tt)
{
returnJsonHelper.JsonSerializer<T>(t);
}

publicTDeserialize<T>(stringjsonString)
{
returnJsonHelper.JsonDeserialize<T>(jsonString);
}
}
}

//页面JS代码，定义knockoutviewmodel和一些自定义方法
//Json对象转字符串的方法
functionjson2str(obj){
varS=[];
for(variinobj){
obj[i]=typeofobj[i]=='string'?'"'+obj[i]+'"':(typeofobj[i]=='object'?json2str(obj[i]):obj[i]);
S.push(i+':'+obj[i]);
}
return'{'+S.join(',')+'}';
}

functionKeyValuePair(){
this.Key=ko.observable();
this.Value=ko.observable();
}
//企业基本信息viewmodel
varBaseInfo={
//{{a:1},{b:2}}
企业名称:ko.observable(""),
企业简介:ko.observable(""),
自定义属性:ko.observableArray([newKeyValuePair()]),
联系电话:ko.observableArray([]),
企业logo:ko.observable()
};
//营业执照ViewModel
varYingYeZhiZhaoVM={
名称:ko.observable(),
企业类型:ko.observable(),
住所:ko.observable(),
经营范围:ko.observable(),
注册号:ko.observable(),
注册资本:ko.observable(),
法定代表人:ko.observable(),
发证时间:ko.observable(),
登记机关:ko.observable(),
营业执照照片:ko.observable()
}

functionDelMobile(obj){
BaseInfo.联系电话.remove(obj);
}
functionAddMobile(obj){
vartel=/^(((1[0-9]{1})|(1[0-9]{1}))+\d{9})$/;
if(!tel.test(obj)){
alert("手机号格式不正确！");
return;
}
varcanPush=true;

$(BaseInfo.联系电话()).each(function(index,item){
if(item==obj.trim()){canPush=false;alert("联系电话已存在！");}
});

if(canPush){
BaseInfo.联系电话.push(obj);
$('#addMobile').val('');
}
}
　　//自定义属性在后台定义的是字典<string,string>对于字典对象的操作这么写；
functionSetKeyValue(key,value){
varcanPush=true;

if(key==""||value==''){
alert("属性名或属性值不能为空！");
return;
}

$(BaseInfo.自定义属性()).each(function(index,item){
if(item.Key()==key.trim()){canPush=false;alert("属性名已存在！");}
});
if(canPush){
BaseInfo.自定义属性.push(newKeyValuePair().Key(key).Value(value));
$("#new_Key").val("");
$("#new_Value").val("");
}
}
functionRemoveKeyValue(key){
$(BaseInfo.自定义属性()).each(function(index,item){
if(item.Key()==key){
BaseInfo.自定义属性.splice(index,1);
}
});
}

异步加载数据-------------------------------------------------也就是给viewmodel赋值；

//加载信息
functionLoadData(){
ModalDialog.open({遮罩:true,等待:true});
$.ajax({
url:'@Url.Action("EnterpriseInfoData")',
type:'post',
data:{},
dataType:'json',
success:function(result){
varmodel=[];
$(result.vm企业基本信息.自定义属性).each(function(i,item){
varobj=newKeyValuePair();
obj.Key(item.Key);
obj.Value(item.Value);
model.push(obj);
});
if(result!=null){
BaseInfo.自定义属性(model);
BaseInfo.企业名称(result.vm企业基本信息.企业名称);
BaseInfo.联系电话(result.vm企业基本信息.联系电话);
BaseInfo.企业简介(result.vm企业基本信息.企业简介);
BaseInfo.企业logo(result.vm企业基本信息.企业logo);
if(result.vm企业基本信息.企业logo!=null&&result.vm企业基本信息.企业logo!=''){
$("#oldimg").show();
}
YingYeZhiZhaoVM.名称(result.vm营业执照.名称);
YingYeZhiZhaoVM.企业类型(result.vm营业执照.企业类型);
YingYeZhiZhaoVM.住所(result.vm营业执照.住所);
YingYeZhiZhaoVM.经营范围(result.vm营业执照.经营范围);
YingYeZhiZhaoVM.注册号(result.vm营业执照.注册号);
YingYeZhiZhaoVM.注册资本(result.vm营业执照.注册资本);
YingYeZhiZhaoVM.法定代表人(result.vm营业执照.法定代表人);
YingYeZhiZhaoVM.发证时间(result.vm营业执照.发证时间);
YingYeZhiZhaoVM.登记机关(result.vm营业执照.登记机关);
YingYeZhiZhaoVM.营业执照照片(result.vm营业执照.营业执照照片);
ModalDialog.close();
}
},
error:function(){
ModalDialog.close();

}
});

后台数据加载写法；

publicstringEnterpriseInfoData()
{

varv_企业=_用户企业信息.Get企业信息(CookieHelper.GetCookieValue("EnterpriseId"));
varresult=newDotNet.Common.Json.SerializeHelper().Serializer<VM.企业页面信息>(v_企业);
returnresult;
//returnJson(v_企业);
}

viewmodel定义好了，数据也准备好了。下面是模型绑定的处理；

以下只展示字典的绑定绑定的写法比较特殊。knockout在他的foreach里用data-bind="click:fn()"不知道为什么会被自动调用

所以只能用data-bind="attr:{onclick:fu()}"这种方式来绑定；

<td>自定义属性：</td>
<td>
<divid="Custom_Attr"data-bind="foreach:{data:BaseInfo.自定义属性,as:'item'}">
<divclass="input-group">
<inputtype="text"data-bind="value:item.Key"disabledclass="col-md-5"placeholder="自定义属性名"><divstyle="float:left">：</div>
<inputtype="text"data-bind="value:item.Value"disabledclass="col-md-6"placeholder="自定义属性值">
<spanclass="input-group-addon">
<ahref="javascript:void(0)"data-bind="attr:{onclick:'RemoveKeyValue(\''+item.Key()+'\''+')'}"><iclass="fafa-minus"></i></a>
</span>
</div>
</div>
<divclass="input-group">
<inputtype="text"class="col-md-5"id="new_Key"placeholder="自定义属性名"><divstyle="float:left">：</div>
<inputtype="text"class="col-md-6"id="new_Value"placeholder="自定义属性值">
<spanclass="input-group-addon">
<ahref="javascript:void(0)"data-bind="attr:{onclick:'SetKeyValue($(\'#new_Key\').val(),$(\'#new_Value\').val())'}"><iclass="fafa-plus"></i></a>
</span>
</div>
</td>

最后一步数据提交。以post为例。post之前要先通过

vard=ko.toJS(BaseInfo);
varc=JSON.stringify(d);

这两步对数据做处理；以下是完整代码

functionsavebaseinfo(){
if(!$("#baseinfoForm").valid()){
return;
}
vard=ko.toJS(BaseInfo);
varc=JSON.stringify(d);
ModalDialog.open({遮罩:true,等待:true});
$.ajax({
url:encodeURI("@Url.Action("SaveBaseInfo","EnterprisesManagement")"),
type:"post",//Post提交
data:{companyInfo:c},
traditional:true,
success:function(data){
if(data=="1"){
alert("保存成功！");
}
ModalDialog.close();
},
error:function(XMLHttpRequest,textStatus,errorThrown){
ModalDialog.close();
}
});
}

companyInfo:c//c是序列化后的jsonstring

然后是后台接收代码

publicstringSaveBaseInfo(stringcompanyInfo)
{
VM.企业基本信息model=DotNet.Common.JsonHelper.JsonDeserialize<VM.企业基本信息>(companyInfo);
_用户企业信息.Save企业信息(CookieHelper.GetCookieValue("EnterpriseId"),model);
return"1";
}

后台接收的代码比较特殊要通过转换类转成需要的类；

以上就是knockout完整数据绑定和处理字典类型绑定的完整方法。

哈尔滨山河软件，2014-06-1413:53:31，崔园清；