序言：

剛結束公司的三個月試用期，意味著我即將正式步入社會成為廣大從事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”按鈕時會自動生成一個模態框，里面克隆了表單內的所有元素內容。

Jackson Personal Homepage

 Full FORM
 Full FORM


 @Html.Partial("_GetForm")