数据添加的功能

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

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

想到了存成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 。。
                还有很多功能也可能用这个思路去实现。

欢迎大家拍砖

记一次 Newtonsoft.Json 巧妙的用法(C#)的更多相关文章

  1. 记录Newtonsoft.Json的日常用法

    最近在做一个使用基于.net mvc 实现前后台传输Json的实例.网上找了一些资料.发现在开发的时候,许多的数据交互都是以Json格式传输的.其中涉及序列化对象的使用的有DataContractJs ...

  2. Newtonsoft.Json 的高级用法

    Ø  简介 接着前一篇http://www.cnblogs.com/abeam/p/8295765.html,继续研究 Newtonsoft.Json 的一些高级用法.主要包括: 1.   JSON ...

  3. Newtonsoft.Json 的解析用法。

    JsonView是查看和分析json的利器,目录下的Newtonsoft.Json.dll ,我们可以当第三方引用之. >>> //想服务器端发送请求,获取订单信息 myReques ...

  4. Newtonsoft.Json 的基本用法

    Ø  前言 说起 C# 对 JSON 的操作(序列化与反序列化),大家都会想到 JavaScriptSerializer.DataContractJsonSerializer 与 Newtonsoft ...

  5. Newtonsoft.Json高级用法(转)

    手机端应用讲究速度快,体验好.刚好手头上的一个项目服务端接口有性能问题,需要进行优化.在接口多次修改中,实体添加了很多字段用于中间计算或者存储,然后最终用Newtonsoft.Json进行序列化返回数 ...

  6. 【转】 Newtonsoft.Json高级用法

    手机端应用讲究速度快,体验好.刚好手头上的一个项目服务端接口有性能问题,需要进行优化.在接口多次修改中,实体添加了很多字段用于中间计算或者存储,然后最终用Newtonsoft.Json进行序列化返回数 ...

  7. Newtonsoft.Json高级用法 1.忽略某些属性 2.默认值的处理 3.空值的处理 4.支持非公共成员 5.日期处理 6.自定义序列化的字段名称

    手机端应用讲究速度快,体验好.刚好手头上的一个项目服务端接口有性能问题,需要进行优化.在接口多次修改中,实体添加了很多字段用于中间计算或者存储,然后最终用Newtonsoft.Json进行序列化返回数 ...

  8. 转:Newtonsoft.Json高级用法

    原文地址:http://www.cnblogs.com/yanweidie/p/4605212.html 手机端应用讲究速度快,体验好.刚好手头上的一个项目服务端接口有性能问题,需要进行优化.在接口多 ...

  9. Newtonsoft.Json高级用法,json序列号,model反序列化,支持序列化和反序列化DataTable,DataSet,Entity Framework和Entity,字符串

    原文地址:https://www.cnblogs.com/yanweidie/p/4605212.html 手机端应用讲究速度快,体验好.刚好手头上的一个项目服务端接口有性能问题,需要进行优化.在接口 ...

随机推荐

  1. SpringMVC-HelloWorld (XML)

    Spring2.5.6开启了Spring的注解时代,简化了的xml配置,提高了开发效率:但是,对于Spring的初学者,xml配置更容易理解的Spring的Ioc特性,aop特性:本文使用Maven构 ...

  2. PHP文本的读写

    <?php $txtPart="test0.txt"; //export $txtPartContent=fopen($txtPart,"r"); //读 ...

  3. Bug记载1之webpack本地安装

    当我安装前端打包工具webpack时,cmd命令出现了这么一句关键性的提示: npm ERR ! Refusing to install package as a dendency of itself ...

  4. 【webpack】-- 样式加载

    加载css需要用到css-loader和style-loader css-loader将@import 和 url 处理成正规的ES6 import ,如果@import指向的是一个外部资源,css- ...

  5. java操作txt文本(二):删除文本括号内的内容

    想法由来:之前写读书报告时,遇到一些烦人的文献,总喜欢把注释作为括号内容放到正文中,使文章繁琐冗长,所以写了下面这个代码,剔除了括号内的内容. 适用条件:原txt文本中的括号使用正确,即左右括号匹配正 ...

  6. Spring Boot 整合 Mybatis 实现 Druid 多数据源详解

    摘要: 原创出处:www.bysocket.com 泥瓦匠BYSocket 希望转载,保留摘要,谢谢! “清醒时做事,糊涂时跑步,大怒时睡觉,独处时思考” 本文提纲一.多数据源的应用场景二.运行 sp ...

  7. .net core版 文件上传/ 支持批量上传,拖拽以及预览,bootstrap fileinput上传文件

    asp.net mvc请移步 mvc文件上传支持批量上传,拖拽以及预览,文件内容校验 本篇内容主要解决.net core中文件上传的问题  开发环境:ubuntu+vscode 1.导入所需要的包:n ...

  8. keystone无法查看catalog并且用户无法申请令牌的解决方案

    在运行openstack catalog list之后提示: Only an authorized user may issue a new token. #只有授权用户才能申请token opens ...

  9. xlrd的使用详细介绍以及基于Excel数据参数化实例详解

    1.安装xlrd xlrd是python用于读取excel的第三方扩展包,所以在使用xlrd前,需要使用以下命令来安装xlrd.pip install xlrd 在使用这个命令之前先确定自己有没有安装 ...

  10. 【C++】模拟实现auto_ptr

    看了<Effctive C++>,里面提到用对象去管理资源,可以有效防止内存泄漏. 结合auto_ptr特性,稍微思考了一下,实现了一个简单的auto_ptr (因为代码量小,就不分文件了 ...