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


Posted in Javascript onSeptember 10, 2018

序言:

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

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

项目介绍:

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

<h2>Jackson Personal Homepage</h2>
<div class="control-group">
 <label class="control-label">Full FORM</label>
 <btn id="btnGet" class="btn btn-success">Full FORM</btn>
</div>
<div>
 @Html.Partial("_GetForm")
</div>

分部视图_GetForm.cshtml

 

<form class="form-horizontal" id="JsonForm">
 <div class="control-group">
 <!-- Name input-->
 <label class="control-label">Name</label>
 <div class="controls">
  <input type="text" placeholder="Input Name Please" name="Name">
 </div>
 </div>
 <div class="control-group">
 <!-- Age input-->
 <label class="control-label">Age</label>
 <div class="controls">
  <input type="text" placeholder="Input Age Please" name="Age">
 </div>
 </div>
 <div class="control-group">
 <label class="control-label">Gender</label>
 <div class="controls">
  <!-- Multiple Radios -->
  <label class="radio">
  <input type="radio" value="Man" name="Gender">
  Handsome Boy
  </label>
  <label class="radio">
  <input type="radio" value="Woman" name="Gender">
  Beautiful Girl
  </label>
 </div>
 </div>
 <div class="control-group">
 <!-- Select Basic -->
 <label class="control-label">Nationality</label>
 <div class="controls">
  <select name="Nationality">
  <option></option>
  </select>
 </div>
 </div>
 <div class="control-group">
 <!-- Textarea -->
 <label class="control-label">Specialty</label>
 <div class="controls">
  <div class="textarea">
  <textarea type="text" name="Specialty"> </textarea>
  </div>
 </div>
 </div>
</form>

我们需要传递一条JSON数据,所以我就在控制器中创建了一个person对象,将这个对象转成JSON格式来模拟,通过GetJson()这个方法传递给前台。

[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)

执行的结果

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

【代码为”$("JsonForm”).clone();”时的结果】

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

【代码为”$("JsonForm”).html();”时的结果】

总结

以上所述是小编给大家介绍的Bootbox将后台JSON数据填充Form表单的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
学习Node.js模块机制
Oct 17 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
Angular2进阶之如何避免Dom误区
Apr 02 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 #Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 #Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 #Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 #Javascript
原生JS实现前端本地文件上传
Sep 08 #Javascript
JS实现可视化文件上传
Sep 08 #Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 #Javascript
You might like
drupal 代码实现URL重写
2011/05/04 PHP
功能强大的php文件上传类
2016/08/29 PHP
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012/02/27 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
Python实现最大子序和的方法示例
2019/07/05 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
电子商务专业自我鉴定
2013/12/18 职场文书
企业节能减排实施方案
2014/03/19 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
宿舍卫生管理制度
2015/08/05 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python