Bootbox將后臺JSON數據填充Form表單的實例代碼

2019-11-19 12:59:06

字體：大中小

來源：轉載

供稿：網友

序言：

剛結束公司的三個月試用期，意味著我即將正式步入社會成為廣大從事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）

執行的結果