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

数据添加的功能

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



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

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

html代码：

<table class="table">
<tr>
<td>
<p class="title">
<input type="checkbox" class="info-item" data-title="学费" />  学费
</p>
<input class="form-control cek-0" type="text">
</td>
<td>
<p class="title">
<input type="checkbox" class="info-item" data-title="材料费" />  材料费
</p>
<input class="form-control cek-1" type="text">
</td>
<td>
<p class="title">
<input type="checkbox" class="info-item" data-title="项目期间活动费" />  项目期间活动费
</p>
<input class="form-control cek-2" type="text"></td>
</tr>
<tr>
<td>
<p class="title">
<input type="checkbox" class="info-item" data-title="项目期间住宿费" />  项目期间住宿费
</p>
<input class="form-control cek-3" type="text">
</td>
<td>
<p class="title">
<input type="checkbox" class="info-item" data-title="项目期间早餐" />  项目期间早餐
</p>
<input class="form-control cek-4" type="text">
</td>
<td>
<p class="title">
<input type="checkbox" class="info-item" data-title="项目期间午餐" />  项目期间午餐
</p>
<input class="form-control cek-5" type="text"></td>
</tr>
<tr>
<td>
<p class="title">
<input type="checkbox" class="info-item" data-title="项目期间晚餐" />  项目期间晚餐
</p>
<input class="form-control cek-6" type="text">
</td>
<td>
<p class="title">
<input type="checkbox" class="info-item" data-title="项目期间交通费" />  项目期间交通费
</p>
<input class="form-control cek-7" type="text">
</td>
<td>
<p class="title">
<input type="checkbox" class="info-item" data-title="生活与数学指导" />  生活与数学指导
</p>
<input class="form-control cek-8" type="text"></td>
</tr>
<tr>
<td>
<p class="title">
<input type="checkbox" class="info-item" data-title="签证费" />  签证费
</p>
<input class="form-control cek-9" type="text">
</td>
<td>
<p class="title">
<input type="checkbox" class="info-item" data-title="国际往返机票" />  国际往返机票
</p>
<input class="form-control cek-10" type="text">
</td>
<td>
<p class="title">
<input type="checkbox" class="info-item" data-title="当前接送及大巴费用" />  当前接送及大巴费用
</p>
<input class="form-control cek-11" type="text"></td>
</tr>
<tr>
<td>
<p class="title">
<input type="checkbox" class="info-item" data-title="保险费" />  保险费
</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 = 0;
var list = ViewBag.list as List<table_info>;
<table class="table">
<tr>
@if (list != null && list.Count() > 0)
{
foreach (var item in list)
{
string style_s = "";
index++;
if (index % 3 == 0)
{
style_s = "</tr><tr>";
}
<td>
<p class="title">
<input type="checkbox" @(item.prop == true ? "checked" : "") class="info-item" data-title="@item.title" />  @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 。。
还有很多功能也可能用这个思路去实现。

欢迎大家拍砖