//JSON 通用操作------------------------------------------------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Runtime.Serialization;
using System.Runtime.Serialization.Json;
using System.IO;
using System.Text;
using System.Text.RegularExpressions;
namespace DotNet.Common
{
/// <summary>
/// JSON序列化和反序列化辅助类
/// </summary>
public class JsonHelper
{
private static bool? _isEncrypt;
public static bool IsEncrypt
{
get
{
bool result = false;
if (_isEncrypt == null)
{
if (System.Configuration.ConfigurationManager.AppSettings["ConStringEncrypt"] == "true")
{
result = true;
}
}
else
{
result = (bool)JsonHelper._isEncrypt;
}
return result;
}
set { JsonHelper._isEncrypt = value; }
} /// <summary>
/// JSON序列化
/// </summary>
public static string JsonSerializer<T>(T t)
{
DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(T));
MemoryStream ms = new MemoryStream();
ser.WriteObject(ms, t);
string jsonString = Encoding.UTF8.GetString(ms.ToArray());
ms.Close();
//替换Json的Date字符串
string p = @"\\/Date\((\d+)\+\d+\)\\/";
MatchEvaluator matchEvaluator = new MatchEvaluator(ConvertJsonDateToDateString);
Regex reg = new Regex(p);
Regex reg1 = new Regex(@"\\/Date\((-\d+)\+\d+\)\\/");
jsonString = reg.Replace(jsonString, matchEvaluator);
jsonString = reg1.Replace(jsonString, matchEvaluator);
if (IsEncrypt)
{
return DotNet.Common.DEncrypt.DESEncrypt.Encrypt(jsonString);
}
else
{
return jsonString;
} } /// <summary>
/// JSON反序列化
/// </summary>
///
public static T JsonDeserialize<T>(string jsonString)
{
if (IsEncrypt)
{
jsonString = DotNet.Common.DEncrypt.DESEncrypt.Decrypt(jsonString);
}
//将"yyyy-MM-dd HH:mm:ss"格式的字符串转为"\/Date(1294499956278+0800)\/"格式
string p = @"\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}";
MatchEvaluator matchEvaluator = new MatchEvaluator(ConvertDateStringToJsonDate);
Regex reg = new Regex(p);
jsonString = reg.Replace(jsonString, matchEvaluator);
DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(T));
MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(jsonString));
T obj = (T)ser.ReadObject(ms);
return obj;
} /// <summary>
/// 将Json序列化的时间由/Date(1294499956278+0800)转为字符串
/// </summary>
private static string ConvertJsonDateToDateString(Match m)
{
string result = string.Empty;
DateTime dt = new DateTime(, , );
dt = dt.AddMilliseconds(long.Parse(m.Groups[].Value));
dt = dt.ToLocalTime();
result = dt.ToString("yyyy-MM-dd HH:mm:ss");
return result;
} /// <summary>
/// 将时间字符串转为Json时间
/// </summary>
private static string ConvertDateStringToJsonDate(Match m)
{
string result = string.Empty;
DateTime dt = DateTime.Parse(m.Groups[].Value);
dt = dt.ToUniversalTime();
TimeSpan ts = dt - DateTime.Parse("1970-01-01");
result = string.Format("\\/Date({0}+0800)\\/", ts.TotalMilliseconds);
return result;
}
}
}
//--------------------------------------------------
//自定义帮助类
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web; namespace DotNet.Common.Json
{
public class SerializeHelper : IDataSerialize
{
public string Serializer<T>(T t)
{
return JsonHelper.JsonSerializer<T>(t);
} public T Deserialize<T>(string jsonString)
{
return JsonHelper.JsonDeserialize<T>(jsonString);
}
}
}
//页面JS代码，定义 knockout viewmodel 和一些 自定义方法
//Json对象转字符串的方法
function json2str(obj) {
var S = [];
for (var i in obj) {
obj[i] = typeof obj[i] == 'string' ? '"' + obj[i] + '"' : (typeof obj[i] == 'object' ? json2str(obj[i]) : obj[i]);
S.push(i + ':' + obj[i]);
}
return '{' + S.join(',') + '}';
} function KeyValuePair() {
this.Key = ko.observable();
this.Value = ko.observable();
}
//企业基本信息viewmodel
var BaseInfo = {
//{ {a:1},{b:2} }
企业名称: ko.observable(""),
企业简介: ko.observable(""),
自定义属性: ko.observableArray([new KeyValuePair()]),
联系电话: ko.observableArray([]),
企业logo: ko.observable()
};
//营业执照ViewModel
var YingYeZhiZhaoVM = {
名称: ko.observable(),
企业类型: ko.observable(),
住所: ko.observable(),
经营范围: ko.observable(),
注册号: ko.observable(),
注册资本: ko.observable(),
法定代表人: ko.observable(),
发证时间: ko.observable(),
登记机关: ko.observable(),
营业执照照片: ko.observable()
} function DelMobile(obj) {
BaseInfo.联系电话.remove(obj);
}
function AddMobile(obj) {
var tel = /^(((1[0-9]{1})|(1[0-9]{1}))+\d{9})$/;
if (!tel.test(obj)) {
alert("手机号格式不正确！");
return;
}
var canPush = true; $(BaseInfo.联系电话()).each(function (index, item) {
if (item == obj.trim()) { canPush = false; alert("联系电话已存在！"); }
}); if (canPush) {
BaseInfo.联系电话.push(obj);
$('#addMobile').val('');
}
}
//自定义属性 在后台定义的是 字典<string,string> 对于字典对象的操作这么写；
function SetKeyValue(key, value) {
var canPush = true; if (key == "" || value == '') {
alert("属性名或属性值不能为空！");
return;
} $(BaseInfo.自定义属性()).each(function (index, item) {
if (item.Key() == key.trim()) { canPush = false; alert("属性名已存在！"); }
});
if (canPush) {
BaseInfo.自定义属性.push(new KeyValuePair().Key(key).Value(value));
$("#new_Key").val("");
$("#new_Value").val("");
}
}
function RemoveKeyValue(key) {
$(BaseInfo.自定义属性()).each(function (index, item) {
if (item.Key() == key) {
BaseInfo.自定义属性.splice(index, 1);
}
});
}
异步加载数据-------------------------------------------------也就是给 viewmodel 赋值；
//加载信息
function LoadData() {
ModalDialog.open({ 遮罩: true, 等待: true });
$.ajax({
url: '@Url.Action("EnterpriseInfoData")',
type: 'post',
data: {},
dataType: 'json',
success: function (result) {
var model = [];
$(result.vm企业基本信息.自定义属性).each(function (i, item) {
var obj = new KeyValuePair();
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(); }
});
后台数据加载写法；
public string EnterpriseInfoData()
{ var v_企业 = _用户企业信息.Get企业信息(CookieHelper.GetCookieValue("EnterpriseId"));
var result = new DotNet.Common.Json.SerializeHelper().Serializer<VM.企业页面信息>(v_企业);
return result;
// return Json(v_企业);
}
viewmodel 定义好了 ，数据也准备好了。下面是模型绑定的处理；
以下 只展示 字典的绑定 绑定的写法 比较特殊。 knockout 在 他的 foreach 里 用 data-bind="click:fn()" 不知道为什么 会被自动调用
所以 只能用 data-bind="attr:{onclick:fu()}"这种方式来绑定；
<td>自定义属性：</td>
<td>
<div id="Custom_Attr" data-bind="foreach:{data:BaseInfo.自定义属性,as:'item'}">
<div class="input-group">
<input type="text" data-bind="value:item.Key" disabled class="col-md-5" placeholder="自定义属性名"><div style="float:left">：</div>
<input type="text" data-bind="value:item.Value" disabled class="col-md-6" placeholder="自定义属性值">
<span class="input-group-addon">
<a href="javascript:void(0)" data-bind="attr:{onclick:'RemoveKeyValue(\''+item.Key()+'\''+')'}"><i class="fa fa-minus"></i></a>
</span>
</div>
</div>
<div class="input-group">
<input type="text" class="col-md-5" id="new_Key" placeholder="自定义属性名"><div style="float:left">：</div>
<input type="text" class="col-md-6" id="new_Value" placeholder="自定义属性值">
<span class="input-group-addon">
<a href="javascript:void(0)" data-bind="attr:{onclick:'SetKeyValue($(\'#new_Key\').val(),$(\'#new_Value\').val())'}"><i class="fa fa-plus"></i></a>
</span>
</div>
</td>
最后一步 数据提交 。以post 为例。 post 之前 要先 通过
var d = ko.toJS(BaseInfo);
var c = JSON.stringify(d);
这两步对 数据做处理；以下是完整 代码
function savebaseinfo() {
if (!$("#baseinfoForm").valid()) {
return;
}
var d = ko.toJS(BaseInfo);
var c = 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 然后是后台接收代码
public string SaveBaseInfo(string companyInfo)
{
VM.企业基本信息 model = DotNet.Common.JsonHelper.JsonDeserialize<VM.企业基本信息>(companyInfo);
_用户企业信息.Save企业信息(CookieHelper.GetCookieValue("EnterpriseId"), model);
return "";
}
后台接收的代码比较特殊 要 通过转换类 转成 需要的 类；
以上就是 knockout 完整 数据绑定 和 处理 字典类型绑定的 完整方法。
哈尔滨 山河软件，2014-06-14 13:53:31，崔园清；