记一次 Newtonsoft.Json 巧妙的用法（C#）

数据添加的功能

有一个表格提交数据如下：

是否选择和文本值。分开保存到数据库太麻烦。取得时候也麻烦

想到了存成json数据。一个字段就可以了。

html代码：

  <table class="table">
                                                <tr>
                                                    <td>
                                                        <p class="title">
                                                            <input type="checkbox" class="info-item" data-title="学费" />&nbsp;&nbsp;学费
                                                        </p>
                                                        <input class="form-control cek-0" type="text">
                                                    </td>
                                                    <td>
                                                        <p class="title">
                                                            <input type="checkbox" class="info-item" data-title="材料费" />&nbsp;&nbsp;材料费
                                                        </p>
                                                        <input class="form-control cek-1" type="text">
                                                    </td>
                                                    <td>
                                                        <p class="title">
                                                            <input type="checkbox" class="info-item" data-title="项目期间活动费" />&nbsp;&nbsp;项目期间活动费
                                                        </p>
                                                        <input class="form-control cek-2" type="text"></td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <p class="title">
                                                            <input type="checkbox" class="info-item" data-title="项目期间住宿费" />&nbsp;&nbsp;项目期间住宿费
                                                        </p>
                                                        <input class="form-control cek-3" type="text">
                                                    </td>
                                                    <td>
                                                        <p class="title">
                                                            <input type="checkbox" class="info-item" data-title="项目期间早餐" />&nbsp;&nbsp;项目期间早餐
                                                        </p>
                                                        <input class="form-control cek-4" type="text">
                                                    </td>
                                                    <td>
                                                        <p class="title">
                                                            <input type="checkbox" class="info-item" data-title="项目期间午餐" />&nbsp;&nbsp;项目期间午餐
                                                        </p>
                                                        <input class="form-control cek-5" type="text"></td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <p class="title">
                                                            <input type="checkbox" class="info-item" data-title="项目期间晚餐" />&nbsp;&nbsp;项目期间晚餐
                                                        </p>
                                                        <input class="form-control cek-6" type="text">
                                                    </td>
                                                    <td>
                                                        <p class="title">
                                                            <input type="checkbox" class="info-item" data-title="项目期间交通费" />&nbsp;&nbsp;项目期间交通费
                                                        </p>
                                                        <input class="form-control cek-7" type="text">
                                                    </td>
                                                    <td>
                                                        <p class="title">
                                                            <input type="checkbox" class="info-item" data-title="生活与数学指导" />&nbsp;&nbsp;生活与数学指导
                                                        </p>
                                                        <input class="form-control cek-8" type="text"></td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <p class="title">
                                                            <input type="checkbox" class="info-item" data-title="签证费" />&nbsp;&nbsp;签证费
                                                        </p>
                                                        <input class="form-control cek-9" type="text">
                                                    </td>
                                                    <td>
                                                        <p class="title">
                                                            <input type="checkbox" class="info-item" data-title="国际往返机票" />&nbsp;&nbsp;国际往返机票
                                                        </p>
                                                        <input class="form-control cek-10" type="text">
                                                    </td>
                                                    <td>
                                                        <p class="title">
                                                            <input type="checkbox" class="info-item" data-title="当前接送及大巴费用" />&nbsp;&nbsp;当前接送及大巴费用
                                                        </p>
                                                        <input class="form-control cek-11" type="text"></td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <p class="title">
                                                            <input type="checkbox" class="info-item" data-title="保险费" />&nbsp;&nbsp;保险费
                                                        </p>
                                                        <input class="form-control cek-12" type="text">
                                                    </td>
                                                    <td></td>
                                                    <td></td>
                                                </tr>
                                            </table>

全选：

            //全选反选
            $("#sel-all-info").click(function () {
                var _checked = $(this).prop('checked');
                $('.info-item').prop('checked', _checked);
            });

取值：

               var datalist = [];
                $('.info-item').each(function (k, v) {
                    datalist.push({ "index": k, "prop": $(v).prop('checked'), "val": $(".cek-" + k).val(), "title": $(v).data("title") });
                });
                console.log(JSON.stringify(datalist));

结果：

这样。添加的时候。json值就可以一起保存到数据库里

我们再看一下怎么取值：

在控制器里：

            List<table_info> list = new List<table_info>();
            list = JsonConvert.DeserializeObject<List<table_info>>(model.ItemIntro);
            ViewBag.list = list;

在view视图里.我们把 ViewBag.list 数据转换成 List<table_info>

  int index = ;
                                            var list = ViewBag.list as List<table_info>;
                                            <table class="table">
                                                <tr>
                                                    @if (list != null && list.Count() > )
                                                    {
                                                        foreach (var item in list)
                                                        {
                                                            string style_s = "";
                                                            index++;
                                                            if (index %  == )
                                                            {
                                                                style_s = "</tr><tr>";
                                                            }
                                                        <td>
                                                            <p class="title">
                                                                <input type="checkbox" @(item.prop == true ? "checked" : "") class="info-item" data-title="@item.title" />&nbsp;&nbsp;@item.title
                                                            </p>
                                                            <input class="form-control cek-@(index - 1)" type="text" value="@item.val">
                                                        </td>
                                                        @Html.Raw(style_s)
                                                        }
                                                    }

                                                </tr>

                                            </table>

最后，我们来看一下循环出来的界面:

主要用到了。Newtonsoft.Json的反序列化，先把数据存成json保存到数据库。修改的时候。反序列化为list model ，在视图里foreach 。。
                还有很多功能也可能用这个思路去实现。

欢迎大家拍砖