[HttpPost] public JsonResult GetJson() { Person person = new Person() { Name = "Jackson", Age = 24, Gender = "Man", Nationality = "China", Specialty = "Attentive And Patient" }; return Json(person); }
前台调用GetJson()方法，需要使用Ajax，所以我们在前台写一个按钮的点击事件触发这个方法，将数据传递过来，然后将数据传入自己写的Jquery方法，根据元素的类型判断依次为其赋对应的值，之后执行Bootbox的dialog方法，将表单及数据通过模态框方式显示。
<script> $("#btnGet").click(function () { $.ajax({ url: "GetJson", type: "post", dataType: "json", success: function (data) { $("#JsonForm").populateForm(data); bootbox.dialog({ title: "This is Form ：)", message: $("#JsonForm").clone(), buttons: { confirm: { label: 'Submit', className: 'btn-success' }, cancel: { label: 'Quit', className: 'btn-danger' } }, }); } }) }) </script>
接下来是最关键的部分，是这个功能得以实现的核心，上述的代码中有一句“$("#JsonForm”).populateForm(data);”这里的populateForm()就是自己定义的一个Jquery方法，代码是参考了某位前辈的代码，只是做出稍微修改。如果分析的复杂一点完全可以封装成一个通用的Jquery方法以满足不同的条件复用。以下代码写在一个名字为"GetJsonForm.js"的javascript文件中。
$.fn.populateForm = function (data) { return this.each(function () { var formElem, name; if (data === null) { this.reset(); return; } for (var i = 0; i < this.length; i++) { formElem = this.elements[i]; name = formElem.name; switch (formElem.type) { case "radio": if (data[name] === "") { formElem.checked = false; } else if (formElem.value === data[name]) { formElem.checked = true; } break; case "select-one": formElem[0].value = data[name]; if (data[name] === null) { formElem[0].text = "--"; } else { formElem[0].text = data[name]; } break; case "button": break; default: if (data[name] === null) { formElem.value = "--"; } else { formElem.value = data[name]; } } } }); };
确保GetJsonForm.js以及Bootbox依赖的文件正确被引用（这里Bootbox引用的是“bootbox.min.js”,可以在起官网下载）。
以上项目就完成了...
总结分析：
需要着重分析一下"GetJsonForm.js"里的代码，从分析的过程中我们能更加详细的知道其实现原理，便于之后的扩展与完善，封装成一个满足各种条件的方法。当前项目取得是一个单一的JSON对象，但是很多情况下JSON数据可能会更加复杂，而且我们这里只试验了对表单中其中几种常用类型的标签赋值，功能是不完善的。其中select标签的赋值方式也不是很完善，只能满足于与该项目相似的项目，完善还是需要花更多的时间。
以上是我在做项目时的获得的所有心得，可能不是很完善也存在很多错误，欢迎各位纠正。
ps:在做项目的时候遇到一个问题，就是Bootbox文档里dialog方法中的"message"可以传html，当代码为：
$("JsonForm”).html();
时模态框加载页面但是只有select标签下的option值被赋值了，其他值就是不显示，将代码改为：
$("JsonForm”).clone();
时就全部显示正常了,这个问题仍然想不通...
百度云盘：链接：https://pan.baidu.com/s/1eL1ftDhN2_Hx9H99XmWlhQ 密码：iuss
感兴趣的小伙伴可以自行下载（IDE：visual studio 2017）
执行的结果
【代码为”$("JsonForm”).clone();”时的结果】
【代码为”$("JsonForm”).html();”时的结果】
总结
以上所述是小编给大家介绍的Bootbox将后台JSON数据填充Form表单的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: