刚结束公司的三个月试用期，意味着我即将正式步入社会成为广大从事IT行业的一员。作为一个编程小白，无论从技术层面还是知识层面都是比较薄弱的，想要成为一个优秀的程序员不断的学习与探索是不可避免的。我相信一切的付出与收获是成正比的！Fighting！
这几天在做公司的实际项目的时候，需要实现选中Bootstrap table中的任意一行数据点击编辑按钮弹出一个模态框以表单的形式对该行数据进行编辑。获取表格行的数据是比较方便的，具体可以查找Bootstrap table参考文档，具体地址可以直接在浏览器中搜索关键字“Bootstrap table”查找,也可以访问以下地址：。表内的数据是获得了，那关键是怎样将表内数据传递到模态框中的表单呢?我们知道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”查找，也可以访问以下地址：。其他相关的知识可以在浏览器中搜索关键字“w3school”查找，也可以直接访问以下地址：。
项目介绍：
通过控制器创建一个Index视图，写入下列HTML代码，这里我创建了一个分部视图，不创建直接写在同一个页面也是一样的效果。为了更加直观的显示数据传递时的页面变化我就不将分部视图外的“DIV”标签增加“hidden”属性。在正常的情况下，我们需要将原先页面分部视图中的Form表单隐藏掉，因为使用了Bootbox,在点击“Full FORM”按钮时会自动生成一个模态框，里面克隆了表单内的所有元素内容。
<h2>Jackson Personal Homepage</h2> <div> <label>Full FORM</label> <btn>Full FORM</btn> </div> <div> @Html.Partial("_GetForm") </div>
分部视图_GetForm.cshtml
<form> <div> <!-- Name input--> <label>Name</label> <div> <input type="text" placeholder="Input Name Please"> </div> </div> <div> <!-- Age input--> <label>Age</label> <div> <input type="text" placeholder="Input Age Please"> </div> </div> <div> <label>Gender</label> <div> <!-- Multiple Radios --> <label> <input type="radio" value="Man"> Handsome Boy </label> <label> <input type="radio" value="Woman"> Beautiful Girl </label> </div> </div> <div> <!-- Select Basic --> <label>Nationality</label> <div> <select> <option></option> </select> </div> </div> <div> <!-- Textarea --> <label>Specialty</label> <div> <div> <textarea type="text"> </textarea> </div> </div> </div> </form>
我们需要传递一条JSON数据，所以我就在控制器中创建了一个person对象，将这个对象转成JSON格式来模拟，通过GetJson()这个方法传递给前台。