MVC MVVM Knockout viewmodel 提交 完整过程，包含序列化 JSON 和 字典模型绑定_.NET_编程开发_程序员俱乐部

//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(1970, 1, 1);
            dt = dt.AddMilliseconds(long.Parse(m.Groups[1].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[0].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 "1";
        }

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

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

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