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

時間 2019-12-05

標籤 mvc mvvm knockout viewmodel 提交完整過程包含序列 json 字典模型綁定欄目 JavaScript 简体版

原文原文鏈接

//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();

            }
        });

後臺數據加載寫法；javascript

        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()" 不知道爲何會被自動調用java

因此只能用 data-bind="attr:{onclick:fu()}"這種方式來綁定；ajax

<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 以前要先經過 json

var d = ko.toJS(BaseInfo);
var c = JSON.stringify(d);異步

這兩步對數據作處理；如下是完整代碼post

 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";
        }