Bootbox将后台JSON数据填充到Form表单的实例代码中

时间：2021-08-30 来源：互联网编辑：宝哥软件园浏览：次

前言：

刚刚结束三个月的试用期，意味着我将正式进入社会，成为IT行业的一员。作为一名程序员，他技术和知识都比较薄弱，想要成为一名优秀的程序员，不断学习和探索是必然的。我相信所有的努力都与收获成正比！战斗！

这几天在做公司的实际项目时，需要在Bootstrap表中选择任意一行数据，点击编辑按钮，弹出一个模态框，在表单中编辑这一行数据。获取表格行的数据很方便。具体可以找到Bootstrap表参考文档，具体地址可以在浏览器中通过关键字“Bootstrap table”直接搜索，也可以访问以下地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/.表中的数据是获取的，所以关键是如何将表中的数据转移到模态框中的表单。我们知道表格中的数据是从后台传过来的，所以模态框中的表单数据也可以直接从后台取！嗯，知道了数据从哪里来，我们现在需要解决的问题就是如何确定表单中的哪些数据被传输到表单中。表中的每一条数据都有一个唯一的标识符，可以是一个字段，也可以是多个字段，形成一个唯一的标识符，所以我们把它/它们作为这一行数据的Key，我们把这个Key作为控制器中的一个参数传递给后台，找到这个Key对应的数据，这样也可以找到要传输的数据。那么我们只需要将后台数据传输到前台。当我们想到后台和前台之间的价值传递时，我们需要使用Ajax。本机Ajax相对复杂。这里我们使用jQuery封装的Ajax，使用起来很方便。数据可以传输到前台，那么如何将数据分配给每个标签呢？毕竟数据不智能，不能自己坐。然后还有更有趣的事情。编写一个jQuery方法来判断前台标签的类型，依次将标签中的名称值赋给JSON对象对应的属性名。JSON对象可以被视为键值对的数组。只要获得了键的名称，也可以获得键的值，这样就可以依次呈现前台数据。

后面我用一个小例子来模拟在后台用JSON数据填充Form表单的过程，让大家更好的理解这个过程。以上描述和想法是我个人的认知。写博客也是为了记录自己的学习收获和经历。有错误或偏差，希望得到前辈的指正和指导。

准备：

接下来我们演示的例子会用到ASP.NET MVC、jQuery、Ajax、Bootbox、HTML等相关知识，不懂的需要提前做功课。现在网上有丰富的学习资源，花一点时间就能学到很多东西。ASP.NET MVC相关的知识可以在博客园区很多前辈的博客中学习到。对于Bootbox相关的文档，可以直接去官网查看参考文档。具体地址可以直接在浏览器中搜索关键字“Bootbox”，也可以访问以下地址：http://bootboxjs.com/documentation.html.其他相关知识可以通过在浏览器中搜索关键字“w3school”找到，也可以直接访问以下地址：http://www.w3school.com.cn/

项目介绍：

通过控制器创建一个索引视图，并编写以下HTML代码。在这里，我创建了一个局部视图，它具有相同的效果，而无需创建它并直接将其写在同一页上。我没有在局部视图之外的“DIV”标签中添加“隐藏”属性，以便更直观地显示数据传输过程中的页面变化。正常情况下，我们需要在原页面部分视图中隐藏Form表单，因为使用了Bootbox，点击“Full FORM”按钮时会自动生成一个模态框，其中表单中的所有元素都会被克隆。

h2Jackson个人主页/H2 div class=' control-group ' label class=' control-label ' full FORm/label BTN id=' btnGet ' class=' BTN BTN-success ' full FORm/BTN/div @ html . partial(' _ getFORm ')/div partial view _ getFORm . cshtml

form class=' form-horizontal ' id=' JsonForm ' div class=' control-group '！-名称输入-标签类='控件-标签'名称/标签差异类='控件'输入类型='文本'占位符='输入名称请'名称='名称/div /div类='控件-组！-年龄输入-标签类='控件-标签'年龄/标签差异类='控件'输入类型='文本'占位符='输入年龄请'名称='年龄/div /div类='控件-组'标签类='控件-标签'性别/标签差异类='控件！-多个收音机-标签类='收音机'输入类型='收音机'值='男人'名称='性别'帅哥/标签标签类='收音机'输入类型='收音机'值='女人'名称='性别'漂亮女孩/标签/div /div类='对照组！-选择基本-标签类='控件-标签'国籍/标签差异类='控件'选择名称='国籍'选项/选项/选择/div /div类='控件-组！-Textarea-label class=' control-label ' specific/label div class=' controls ' div class=' Textarea ' Textarea type=' text ' name=' specific '/Textarea/div/div/form我们需要传递一条数据数据，所以我就在控制器中创建了一个人对象，将这个对象转成数据格式来模拟，通过GetJson()这个方法传递给前台。

[https]公共JSON结果GetJson(){ Person Person=new Person()}姓名='杰克逊'，年龄=24岁，性别='男人'，国籍='中国'，特长='细心且耐心' };返回Json(人);}前台调用GetJson()方法，需要使用Ajax，所以我们在前台写一个按钮的点击事件触发这个方法，将数据传递过来，然后将数据传入自己写的框架方法，根据元素的类型判断依次为其赋对应的值，之后执行启动盒的对话方法，将表单及数据通过模态框方式显示。

脚本$('#btnGet ').单击(函数(){ $).ajax({ url: 'GetJson '，type: 'post '，dataType: 'json '，success:函数(数据){ $('#JsonForm ').populateForm(数据);bootbox.dialog({ title: '这是表单：)'，message: $('#JsonForm ').clone()，按钮s : {确认： {标签: ' Submit '，类名： 'btn-success' }，取消： {标签: 'Quit '，类名3: ' BTN-危险' } }，})；} })})/脚本接下来是最关键的部分，是这个功能得以实现的核心，上述的代码中有一句" $('#JsonForm ").populateForm(数据);"这里的populateForm()就是自己定义的一个框架方法，代码是参考了某位前辈的代码，只是做出稍微修改。如果分析的复杂一点完全可以封装成一个通用的框架方法以满足不同的条件复用。以下代码写在一个名字为' GetJsonForm.js '的爪哇岛描述语言文件中。

$ .fn。填充表单=函数(数据){返回这个。每个(函数(){ var formElem，nameif(data===null){ this。reset()；返回；} for(var I=0；我这个长度；I){ formElem=这个。元素[I]；name=formelem . name switch(formelem。type){ case ' radio ' : if(data[name]===' '){ formelem。选中=假；} else if(formelem。value===data[name]){ formelem。选中=真；} elem[0]的breakcase ' select-one ' :value=data[name]；如果(数据[名称]====null){ formElem[0].text='-'；} else { formElem[0].text=data[name]；} break case ' button ' : break default : if(data[name]===null){ form elem。value='-'；} else { formelem。value=data[name]；} } } });};确保GetJsonForm.js以及启动盒依赖的文件正确被引用（这里启动盒引用的是“bootbox.min.js”，可以在起官网下载)。

以上项目就完成了.

总结分析：

需要对‘getjsonform . js’中的代码进行分析。从分析过程中，我们可以更详细地了解它的实现原理，便于后期的扩展和改进，并封装成一个满足各种条件的方法。目前项目获取的是单个JSON对象，但很多情况下JSON数据可能比较复杂，我们只尝试给表单中几种常见类型的标签赋值，功能不完善。其中，select tag的赋值方式并不完善，只能满足于类似本项目的项目，完善起来还需要更多的时间。

这些都是我做项目的经验，可能不完美，错误很多。请改正。

ps:在做项目的时候遇到了一个问题，就是Bootbox文档中的dialog方法中的‘message’可以传递html，当代码为：

$(“JsonForm”)。html()；

当模式框加载页面，但只分配了select标记下的选项值，而不显示其他值时，请将代码更改为：

$(“JsonForm”)。clone()；

当一切都显示正常时，这个问题还是想不通.

百度云盘：链接：https://pan.baidu.com/s/1eL1ftDhN2_Hx9H99XmWlhQ密码：iuss

感兴趣的伙伴可以自行下载(IDE:visual studio 2017)

执行的结果