序言:
創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),洪山企業(yè)網(wǎng)站建設(shè),洪山品牌網(wǎng)站建設(shè),網(wǎng)站定制,洪山網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,洪山網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力??沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿,時(shí)刻以成就客戶成長自我,堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
剛結(jié)束公司的三個(gè)月試用期,意味著我即將正式步入社會(huì)成為廣大從事IT行業(yè)的一員。作為一個(gè)編程小白,無論從技術(shù)層面還是知識(shí)層面都是比較薄弱的,想要成為一個(gè)優(yōu)秀的程序員不斷的學(xué)習(xí)與探索是不可避免的。我相信一切的付出與收獲是成正比的!Fighting!
這幾天在做公司的實(shí)際項(xiàng)目的時(shí)候,需要實(shí)現(xiàn)選中Bootstrap table中的任意一行數(shù)據(jù)點(diǎn)擊編輯按鈕彈出一個(gè)模態(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)傳過來的,那模態(tài)框內(nèi)表單數(shù)據(jù)不是也可以從后臺(tái)直接拿!好了知道數(shù)據(jù)要從哪里來了,那現(xiàn)在我們需要解決的問題是怎樣確定是表格中的哪條數(shù)據(jù)傳到表單。表格中的每條數(shù)據(jù)都是有唯一標(biāo)識(shí)的,可能是一個(gè)字段也可能是多個(gè)字段組成一個(gè)唯一的標(biāo)識(shí),我們就把它/它們當(dāng)做是這行數(shù)據(jù)的Key,我們在控制器中將這個(gè)Key作為參數(shù)傳到后臺(tái)查找這個(gè)Key對應(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ù)不是智能的,不能自己對號(hào)入座。接下來就是比較好玩的東西了,自己寫一個(gè)jQuery方法判斷前臺(tái)標(biāo)簽的類型依次將標(biāo)簽中的name值賦值JSON對象對應(yīng)的屬性名字。JSON對象可以看做是一個(gè)鍵值對數(shù)組,只要獲得鍵的名字,該鍵的值也能獲得,這樣前臺(tái)的數(shù)據(jù)也能依次呈現(xiàn)出來。
后面我用一個(gè)小例子來模擬后臺(tái)JSON數(shù)據(jù)填充Form表單的過程,方便大家能更好的了解這個(gè)過程。以上描述與想法都是本人個(gè)人認(rèn)知,寫博客也是為了記錄自己的學(xué)習(xí)收獲與心得,存在錯(cuò)誤或者偏差希望能得到各位前輩糾正和指導(dǎo)。
預(yù)備:
接下來我們演示的例子將會(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”查找,也可以訪問以下地址:http://bootboxjs.com/documentation.html。其他相關(guān)的知識(shí)可以在瀏覽器中搜索關(guān)鍵字“w3school”查找,也可以直接訪問以下地址:http://www.w3school.com.cn/。
項(xiàng)目介紹:
通過控制器創(chuàng)建一個(gè)Index視圖,寫入下列HTML代碼,這里我創(chuàng)建了一個(gè)分部視圖,不創(chuàng)建直接寫在同一個(gè)頁面也是一樣的效果。為了更加直觀的顯示數(shù)據(jù)傳遞時(shí)的頁面變化我就不將分部視圖外的“DIV”標(biāo)簽增加“hidden”屬性。在正常的情況下,我們需要將原先頁面分部視圖中的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對象,將這個(gè)對象轉(zhuǎn)成JSON格式來模擬,通過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,所以我們在前臺(tái)寫一個(gè)按鈕的點(diǎn)擊事件觸發(fā)這個(gè)方法,將數(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)鍵的部分,是這個(gè)功能得以實(shí)現(xiàn)的核心,上述的代碼中有一句“$("#JsonForm”).populateForm(data);”這里的populateForm()就是自己定義的一個(gè)Jquery方法,代碼是參考了某位前輩的代碼,只是做出稍微修改。如果分析的復(fù)雜一點(diǎn)完全可以封裝成一個(gè)通用的Jquery方法以滿足不同的條件復(fù)用。以下代碼寫在一個(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
"里的代碼,從分析的過程中我們能更加詳細(xì)的知道其實(shí)現(xiàn)原理,便于之后的擴(kuò)展與完善,封裝成一個(gè)滿足各種條件的方法。當(dāng)前項(xiàng)目取得是一個(gè)單一的JSON對象,但是很多情況下JSON數(shù)據(jù)可能會(huì)更加復(fù)雜,而且我們這里只試驗(yàn)了對表單中其中幾種常用類型的標(biāo)簽賦值,功能是不完善的。其中select標(biāo)簽的賦值方式也不是很完善,只能滿足于與該項(xiàng)目相似的項(xiàng)目,完善還是需要花更多的時(shí)間。
以上是我在做項(xiàng)目時(shí)的獲得的所有心得,可能不是很完善也存在很多錯(cuò)誤,歡迎各位糾正。
ps:在做項(xiàng)目的時(shí)候遇到一個(gè)問題,就是Bootbox文檔里dialog方法中的"message"可以傳html,當(dāng)代碼為:
$("JsonForm”).html();
時(shí)模態(tài)框加載頁面但是只有select標(biāo)簽下的option值被賦值了,其他值就是不顯示,將代碼改為:
$("JsonForm”).clone();
時(shí)就全部顯示正常了,這個(gè)問題仍然想不通...
百度云盤:鏈接: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í)例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!
當(dāng)前題目:Bootbox將后臺(tái)JSON數(shù)據(jù)填充Form表單的實(shí)例代碼
文章地址:http://muchs.cn/article22/pipcjc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站營銷、做網(wǎng)站、自適應(yīng)網(wǎng)站、小程序開發(fā)、網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)