//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,崔园清;

 

MVC MVVM Knockout viewmodel 提交 完整过程,包含序列化 JSON 和 字典模型绑定的更多相关文章

  1. MVC MVVM Knockout 常遇问题总结

    1.模板绑定(使用插件jquery.tmpl) var ViewModel={Product:ko.observable()} <div data-bind="template:{na ...

  2. ASP.NET没有魔法——ASP.NET MVC 模型绑定解析(下篇)

    上一篇<ASP.NET没有魔法——ASP.NET MVC 模型绑定解析(上篇)>文章介绍了ASP.NET MVC模型绑定的相关组件和概念,本章将介绍Controller在执行时是如何通过这 ...

  3. [转]ASP.NET MVC 4 (九) 模型绑定

    本文转自:http://www.cnblogs.com/duanshuiliu/p/3706701.html 模型绑定指的是MVC从浏览器发送的HTTP请求中为我们创建.NET对象,在HTTP请求和C ...

  4. ASP.NET MVC 4 (九) 模型绑定

    模型绑定指的是MVC从浏览器发送的HTTP请求中为我们创建.NET对象,在HTTP请求和C#间起着桥梁的作用.模型绑定的一个最简单的例子是带参数的控制器action方法,比如我们注册这样的路径映射: ...

  5. ASP.NET MVC 模型绑定

    模型绑定指的是MVC从浏览器发送的HTTP请求中为我们创建.NET对象,在HTTP请求和C#间起着桥梁的作用.模型绑定的一个最简单的例子是带参数的控制器action方法,比如我们注册这样的路径映射: ...

  6. 【ASP.NET Core】MVC 控制器的模型绑定(宏观篇)

    欢迎来到老周的水文演播中心. 咱们都知道,MVC的控制器也可以用来实现 Web API 的(它们原本就是一个玩意儿),区别嘛也就是一个有 View 而另一个没有 View.于是,在依赖注入的服务容器中 ...

  7. 转载——Asp.Net MVC+EF+三层架构的完整搭建过程

    转载http://www.cnblogs.com/zzqvq/p/5816091.html Asp.Net MVC+EF+三层架构的完整搭建过程 架构图: 使用的数据库: 一张公司的员工信息表,测试数 ...

  8. MVC & MVVM

    什么是MVC,什么是MVVM? 面向过程 --> 面向对象 --> MVC --> MV* 面向过程: 开发人员按照需求逻辑顺序开发代码逻辑,主要思维模式在于如何实现.先细节,后整体 ...

  9. StartSSL免费SSL证书申请和账户注册完整过程

    StartSSL算是比较早提供免费SSL证书的第三方提供商,我们可以免费申请且免费续期使用到有需要HTTPS网址的用户.关于网站使用SSL证书主要还是因为谷歌在向导说明中提到如果一个网站使用到SSL证 ...

随机推荐

  1. SQL语句在OLAP的妙用(多维分析与指标计算)

    ================================================================================ BI传统实现原理: 1.涉及维度管理( ...

  2. JAVA·多线程:创建线程的两种方式

    1.–扩展java.lang.Thread类 package multiThread; public class Thread02extThread { public static void main ...

  3. Jsp:useBean标签的使用

    1.<jsp:useBean id="为Bean起的别名(随意起)" class="Bean的目录,从包名开始写" scope="page | ...

  4. 【caffe-windows】 caffe-master 之 mnist 超详细

    本教程尽量详细,大多步骤都有图,如果运行出错,请先对照自己的文件是否和图上的一样,包括标点啊,空格啊,斜杠,反斜杠啊之类的小细节. 第一步:   官网下载mnist数据 http://yann.lec ...

  5. 实时阴影渲染(一):PSSM平行分割阴影图

    PSSM(Parallel Split Shadow Map)平行分割阴影图,是一种根据距离远近采用多个深度纹理渲染阴影的方法 适合用于室外大场景中的平行光比如太阳形成的阴影 本系列需要读者了解基本的 ...

  6. im4java开发向导

    0.搜索ImageMagick下载安装 1.Setting up the Environment    引入im4java到classpath    设置图片处理引擎的command searchpa ...

  7. iOS调试 LLDB

      LLDB是个开源的内置于XCode的具有REPL(read-eval-print-loop)特征的Debugger,其可以安装C++或者Python插件.   常用调试命令:   1.print命 ...

  8. SVN与TortoiseSVN实战:冲突详解(一)

    硬广:<SVN与TortoiseSVN实战>系列已经写了三篇,第一篇<SVN与TortoiseSVN实战:从入门到精通>,第二篇<SVN与TortoiseSVN实战:标签 ...

  9. python urllib urllib2

    区别 1) urllib2可以接受一个Request类的实例来设置URL请求的headers,urllib仅可以接受URL.这意味着,用urllib时不可以伪装User Agent字符串等. 2) u ...

  10. 使用扩展方法(this 扩展类型)

    namespace ConsoleApp_UseExtendWays{ class Program { static void Main(string[] args) { Student s = ne ...