序言：

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

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

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

預(yù)備:

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

項(xiàng)目介紹：

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

<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數(shù)據(jù)，所以我就在控制器中創(chuàng)建了一個person對象，將這個對象轉(zhuǎn)成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);
}

前臺調(diào)用GetJson()方法，需要使用Ajax，所以我們在前臺寫一個按鈕的點(diǎn)擊事件觸發(fā)這個方法，將數(shù)據(jù)傳遞過來，然后將數(shù)據(jù)傳入自己寫的Jquery方法，根據(jù)元素的類型判斷依次為其賦對應(yīng)的值，之后執(zhí)行Bootbox的dialog方法，將表單及數(shù)據(jù)通過模態(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>

接下來是最關(guān)鍵的部分，是這個功能得以實(shí)現(xiàn)的核心，上述的代碼中有一句“$("#JsonForm”).populateForm(data);”這里的populateForm()就是自己定義的一個Jquery方法，代碼是參考了某位前輩的代碼，只是做出稍微修改。如果分析的復(fù)雜一點(diǎn)完全可以封裝成一個通用的Jquery方法以滿足不同的條件復(fù)用。以下代碼寫在一個名字為"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"里的代碼，從分析的過程中我們能更加詳細(xì)的知道其實(shí)現(xiàn)原理，便于之后的擴(kuò)展與完善，封裝成一個滿足各種條件的方法。當(dāng)前項(xiàng)目取得是一個單一的JSON對象，但是很多情況下JSON數(shù)據(jù)可能會更加復(fù)雜，而且我們這里只試驗(yàn)了對表單中其中幾種常用類型的標(biāo)簽賦值，功能是不完善的。其中select標(biāo)簽的賦值方式也不是很完善，只能滿足于與該項(xiàng)目相似的項(xiàng)目，完善還是需要花更多的時間。

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

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

$("JsonForm”).html();

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

$("JsonForm”).clone();

時就全部顯示正常了,這個問題仍然想不通...

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

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

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

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

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

總結(jié)

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

最新評論