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

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > .NET > MVC MVVM Knockout viewmodel 提交 完整过程,包含序列化 JSON 和 字典模型绑定

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

 2014/6/14 17:27:36  shanheblog  程序员俱乐部  我要评论(0)
  • 摘要://JSON通用操作------------------------------------------------------------------------------usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Web;usingSystem.Runtime.Serialization;usingSystem.Runtime.Serialization.Json;usingSystem
  • 标签:MVC view 过程 JSON JS 序列化
//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,崔园清;

 

 
发表评论
用户名: 匿名