Bootbox將后臺(tái)JSON數(shù)據(jù)填充Form表單的實(shí)例代碼

序言：

剛結(jié)束公司的三個(gè)月試用期，意味著我即將正式步入社會(huì)成為廣大從事IT行業(yè)的一員。作為一個(gè)編程小白，無(wú)論從技術(shù)層面還是知識(shí)層面都是比較薄弱的，想要成為一個(gè)優(yōu)秀的程序員不斷的學(xué)習(xí)與探索是不可避免的。我相信一切的付出與收獲是成正比的！Fighting！

這幾天在做公司的實(shí)際項(xiàng)目的時(shí)候，需要實(shí)現(xiàn)選中Bootstrap table中的任意一行數(shù)據(jù)點(diǎn)擊編輯按鈕彈出一個(gè)模態(tài)框以表單的形式對(duì)該行數(shù)據(jù)進(jìn)行編輯。獲取表格行的數(shù)據(jù)是比較方便的，具體可以查找Bootstrap table參考文檔，具體地址可以直接在瀏覽器中搜索關(guān)鍵字“Bootstrap table”查找,也可以訪問(wèn)以下地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/。表內(nèi)的數(shù)據(jù)是獲得了，那關(guān)鍵是怎樣將表內(nèi)數(shù)據(jù)傳遞到模態(tài)框中的表單呢?我們知道table內(nèi)的數(shù)據(jù)是從后臺(tái)傳過(guò)來(lái)的，那模態(tài)框內(nèi)表單數(shù)據(jù)不是也可以從后臺(tái)直接拿！好了知道數(shù)據(jù)要從哪里來(lái)了，那現(xiàn)在我們需要解決的問(wèn)題是怎樣確定是表格中的哪條數(shù)據(jù)傳到表單。表格中的每條數(shù)據(jù)都是有唯一標(biāo)識(shí)的，可能是一個(gè)字段也可能是多個(gè)字段組成一個(gè)唯一的標(biāo)識(shí)，我們就把它/它們當(dāng)做是這行數(shù)據(jù)的Key，我們?cè)诳刂破髦袑⑦@個(gè)Key作為參數(shù)傳到后臺(tái)查找這個(gè)Key對(duì)應(yīng)的數(shù)據(jù)，這樣要傳遞的數(shù)據(jù)也找到了。那就只剩將后臺(tái)數(shù)據(jù)傳輸?shù)角芭_(tái)了，想到后臺(tái)與前臺(tái)的傳值那我們就需要用到Ajax了，原生的Ajax是比較復(fù)雜的，這里我們就使用jQuery封裝好的Ajax，使用比較方便。數(shù)據(jù)是能傳遞到前臺(tái)了，那數(shù)據(jù)怎樣賦值給每個(gè)標(biāo)簽?zāi)?，畢竟?shù)據(jù)不是智能的，不能自己對(duì)號(hào)入座。接下來(lái)就是比較好玩的東西了，自己寫(xiě)一個(gè)jQuery方法判斷前臺(tái)標(biāo)簽的類型依次將標(biāo)簽中的name值賦值JSON對(duì)象對(duì)應(yīng)的屬性名字。JSON對(duì)象可以看做是一個(gè)鍵值對(duì)數(shù)組，只要獲得鍵的名字，該鍵的值也能獲得，這樣前臺(tái)的數(shù)據(jù)也能依次呈現(xiàn)出來(lái)。

后面我用一個(gè)小例子來(lái)模擬后臺(tái)JSON數(shù)據(jù)填充Form表單的過(guò)程，方便大家能更好的了解這個(gè)過(guò)程。以上描述與想法都是本人個(gè)人認(rèn)知，寫(xiě)博客也是為了記錄自己的學(xué)習(xí)收獲與心得，存在錯(cuò)誤或者偏差希望能得到各位前輩糾正和指導(dǎo)。

預(yù)備:

接下來(lái)我們演示的例子將會(huì)用到ASP.NET MVC 、jQuery、Ajax、Bootbox、HTML等相關(guān)的知識(shí)，還不懂的小伙伴需要提前做一下功課。現(xiàn)在網(wǎng)上的學(xué)習(xí)資源很豐富，稍微花點(diǎn)時(shí)間還是能學(xué)到很多東西。ASP.NET MVC相關(guān)的知識(shí)可以在博客園中很多前輩的博客中學(xué)習(xí)。Bootbox相關(guān)的可以直接去官方網(wǎng)站查看參考文檔，具體地址可以直接在瀏覽器中搜索關(guān)鍵字“Bootbox”查找，也可以訪問(wèn)以下地址：http://bootboxjs.com/documentation.html。其他相關(guān)的知識(shí)可以在瀏覽器中搜索關(guān)鍵字“w3school”查找，也可以直接訪問(wèn)以下地址：http://www.w3school.com.cn/。

項(xiàng)目介紹：

通過(guò)控制器創(chuàng)建一個(gè)Index視圖，寫(xiě)入下列HTML代碼，這里我創(chuàng)建了一個(gè)分部視圖，不創(chuàng)建直接寫(xiě)在同一個(gè)頁(yè)面也是一樣的效果。為了更加直觀的顯示數(shù)據(jù)傳遞時(shí)的頁(yè)面變化我就不將分部視圖外的“DIV”標(biāo)簽增加“hidden”屬性。在正常的情況下，我們需要將原先頁(yè)面分部視圖中的Form表單隱藏掉，因?yàn)槭褂昧薆ootbox,在點(diǎn)擊“Full FORM”按鈕時(shí)會(huì)自動(dòng)生成一個(gè)模態(tài)框，里面克隆了表單內(nèi)的所有元素內(nèi)容。

<h3>Jackson Personal Homepage</h3>
<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數(shù)據(jù)，所以我就在控制器中創(chuàng)建了一個(gè)person對(duì)象，將這個(gè)對(duì)象轉(zhuǎn)成JSON格式來(lái)模擬，通過(guò)GetJson()這個(gè)方法傳遞給前臺(tái)。

[HttpPost]
public JsonResult GetJson()
{
 Person person = new Person() { Name = "Jackson", Age = 24, Gender = "Man", Nationality = "China", Specialty = "Attentive And Patient" };
 return Json(person);
}

前臺(tái)調(diào)用GetJson()方法，需要使用Ajax，所以我們?cè)谇芭_(tái)寫(xiě)一個(gè)按鈕的點(diǎn)擊事件觸發(fā)這個(gè)方法，將數(shù)據(jù)傳遞過(guò)來(lái)，然后將數(shù)據(jù)傳入自己寫(xiě)的Jquery方法，根據(jù)元素的類型判斷依次為其賦對(duì)應(yīng)的值，之后執(zhí)行Bootbox的dialog方法，將表單及數(shù)據(jù)通過(guò)模態(tài)框方式顯示。

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

接下來(lái)是最關(guān)鍵的部分，是這個(gè)功能得以實(shí)現(xiàn)的核心，上述的代碼中有一句“$("#JsonForm”).populateForm(data);”這里的populateForm()就是自己定義的一個(gè)Jquery方法，代碼是參考了某位前輩的代碼，只是做出稍微修改。如果分析的復(fù)雜一點(diǎn)完全可以封裝成一個(gè)通用的Jquery方法以滿足不同的條件復(fù)用。以下代碼寫(xiě)在一個(gè)名字為"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”,可以在起官網(wǎng)下載）。

以上項(xiàng)目就完成了...

總結(jié)分析：

需要著重分析一下"GetJsonForm.js"里的代碼，從分析的過(guò)程中我們能更加詳細(xì)的知道其實(shí)現(xiàn)原理，便于之后的擴(kuò)展與完善，封裝成一個(gè)滿足各種條件的方法。當(dāng)前項(xiàng)目取得是一個(gè)單一的JSON對(duì)象，但是很多情況下JSON數(shù)據(jù)可能會(huì)更加復(fù)雜，而且我們這里只試驗(yàn)了對(duì)表單中其中幾種常用類型的標(biāo)簽賦值，功能是不完善的。其中select標(biāo)簽的賦值方式也不是很完善，只能滿足于與該項(xiàng)目相似的項(xiàng)目，完善還是需要花更多的時(shí)間。

以上是我在做項(xiàng)目時(shí)的獲得的所有心得，可能不是很完善也存在很多錯(cuò)誤，歡迎各位糾正。

ps:在做項(xiàng)目的時(shí)候遇到一個(gè)問(wèn)題，就是Bootbox文檔里dialog方法中的"message"可以傳html，當(dāng)代碼為：

$("JsonForm”).html();

時(shí)模態(tài)框加載頁(yè)面但是只有select標(biāo)簽下的option值被賦值了，其他值就是不顯示，將代碼改為：

$("JsonForm”).clone();

時(shí)就全部顯示正常了,這個(gè)問(wèn)題仍然想不通...

百度云盤(pán)：鏈接：https://pan.baidu.com/s/1eL1ftDhN2_Hx9H99XmWlhQ 密碼：iuss

感興趣的小伙伴可以自行下載（IDE：visual studio 2017）

執(zhí)行的結(jié)果

【代碼為”$("JsonForm”).clone();”時(shí)的結(jié)果】

【代碼為”$("JsonForm”).html();”時(shí)的結(jié)果】

總結(jié)

以上所述是小編給大家介紹的Bootbox將后臺(tái)JSON數(shù)據(jù)填充Form表單的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！