Bootbox将后台JSON数据填充形式表单的实例代码

  

  

刚结束公司的三个月试用期,意味着我即将正式步入社会成为广大从事它行业的一员。作为一个编程小白,无论从技术层面还是知识层面都是比较薄弱的,想要成为一个优秀的程序员不断的学习与探索是不可避免的。我相信一切的付出与收获是成正比的!战斗!

  

这几天在做公司的实际项目的时候,需要实现选表中中引导的任意一行数据点击编辑按钮弹出一个模态框以表单的形式对该行数据进行编辑。获取表格行的数据是比较方便的,具体可以查找引导表参考文档,具体地址可以直接在浏览器中搜索关键字“引导表”查找,也可以访问以下地址:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/1砟诘氖菔腔竦玫牧?那关键是怎样将表内数据传递到模态框中的表单呢& # 63;我们知道表内的数据是从后台传过来的,那模态框内表单数据不是也可以从后台直接拿!好了知道数据要从哪里来了,那现在我们需要解决的问题是怎样确定是表格中的哪条数据传到表单。表格中的每条数据都是有唯一标识的,可能是一个字段也可能是多个字段组成一个唯一的标识,我们就把它/它们当做是这行数据的钥匙,我们在控制器中将这个关键作为参数传到后台查找这个关键对应的数据,这样要传递的数据也找到了。那就只剩将后台数据传输到前台了,想到后台与前台的传值那我们就需要用到Ajax了,原生的Ajax是比较复杂的,这里我们就使用jQuery封装好的Ajax,使用比较方便。数据是能传递到前台了,那数据怎样赋值给每个标签呢,毕竟数据不是智能的,不能自己对号入座。接下来就是比较好玩的东西了,自己写一个jQuery方法判断前台标签的类型依次将标签中名称的值赋值JSON对象对应的属性名字. JSON对象可以看做是一个键值对数组,只要获得键的名字,该键的值也能获得,这样前台的数据也能依次呈现出来。

  

后面我用一个小例子来模拟后台JSON数据填充形式表单的过程,方便大家能更好的了解这个过程。以上描述与想法都是本人个人认知,写博客也是为了记录自己的学习收获与心,得存在错误或者偏差希望能得到各位前辈纠正和指导。

  

  

接下来我们演示的例子将会用到ASP。净MVC, jQuery Ajax, Bootbox、HTML等相关的知识,还不懂的小伙伴需要提前做一下功课。现在网上的学习资源很丰富,稍微花点时间还是能学到很多东西asp。净MVC相关的知识可以在博客园中很多前辈的博客中学习.Bootbox相关的可以直接去官方网站查看参考文档,具体地址可以直接在浏览器中搜索关键字“Bootbox”查找,也可以访问以下地址:http://bootboxjs.com/documentation.html。其他相关的知识可以在浏览器中搜索关键字“w3school”查找,也可以直接访问以下地址:http://www.w3school.com.cn/?/p>   

  

通过控制器创建一个指数视图,写入下列HTML代码,这里我创建了一个分部视图,不创建直接写在同一个页面也是一样的效果。为了更加直观的显示数据传递时的页面变化我就不将分部视图外的" DIV "标签增加“隐藏”属性。在正常的情况下,我们需要将原先页面分部视图中的形式表单隐藏掉,因为使用了Bootbox,在点击“完整形式”按钮时会自动生成一个模态框,里面克隆了表单内的所有元素内容。

        & lt; h3>杰克逊个人Homepage   & lt; div类=翱刂谱椤北?   & lt;标签类=" control-label "祝辞FORM   & lt; btn id=癰tnGet”class=癰tn btn-success”在完全FORM   & lt;/div>   & lt; div>   @Html.Partial (“_GetForm”)   & lt;/div>      

分部视图_GetForm.cshtml

  

,

        & lt;形式类=" form-horizontal " id=癑sonForm”比;   & lt; div类=翱刂谱椤北?   & lt; !——名称输入比;   & lt;标签类=" control-label "祝辞Name   & lt; div类="控制"比;   & lt;输入类型=拔谋尽闭嘉环?笆淙朊致稹钡拿?懊帧北?   & lt;/div>   & lt;/div>   & lt; div类=翱刂谱椤北?   & lt; !——年龄输入比;   & lt;标签类=" control-label "祝辞Age   & lt; div类="控制"比;   & lt;输入类型=拔谋尽闭嘉环?扒胧淙胧贝钡拿?澳炅洹北?   & lt;/div>   & lt;/div>   & lt; div类=翱刂谱椤北?   & lt;标签类=" control-label "祝辞Gender   & lt; div类="控制"比;   & lt; !——多个收音机比;   & lt;标签类=肮悴ァ北?   & lt;输入类型=肮悴ァ奔壑?" https://www.yisu.com/zixun/Man " name="性别"比;   帅哥   & lt;/label>   & lt;标签类=肮悴ァ北?   & lt;输入类型=肮悴ァ奔壑?" https://www.yisu.com/zixun/Woman " name="性别"比;   美丽的女孩   & lt;/label>   & lt;/div>   & lt;/div>   & lt; div类=翱刂谱椤北?   & lt; !——选择基本的祝辞   & lt;标签类=" control-label "祝辞Nationality

Bootbox将后台JSON数据填充形式表单的实例代码