入門實(shí)戰(zhàn)-在頁面中增加下拉框、復(fù)選框功能的增加和修改

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供福山網(wǎng)站建設(shè)、福山做網(wǎng)站、福山網(wǎng)站設(shè)計(jì)、福山網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、福山企業(yè)網(wǎng)站模板建站服務(wù)，10余年福山做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

一個(gè)標(biāo)準(zhǔn)的表單應(yīng)用頁面（視圖），有很多元素，文本框只是有的多一些，還有復(fù)選框，下拉框，單選鈕等各種元素，本節(jié)我將講述使用asp.net core編程實(shí)現(xiàn)下拉框的操作和應(yīng)用，演練代碼還以Menu菜單管理有例，在視圖內(nèi)增加下拉框,復(fù)選框，實(shí)現(xiàn)數(shù)據(jù)的增加和編輯功能?？梢酝ㄟ^枚舉或者靜態(tài)代碼實(shí)現(xiàn)下拉框select選擇，但本節(jié)講解從數(shù)據(jù)庫拉取數(shù)據(jù)填充下拉框。

1.增加下拉框：在Controller文件夾下的MenuController內(nèi)，在Action中修改Create的方法代碼增；在HttpGet類型的Create中初始化下拉框，在HttpPost類型的Create中獲取下拉框值并保存，同時(shí)重置下拉框，否則，保存后，下拉框?qū)?huì)報(bào)錯(cuò)或只有默認(rèn)的一項(xiàng)，除非你action到另外的頁面。

（1）.Action的修改。

（2）.View的修改

（3）.預(yù)覽效果

2.修改下拉框：在MenuController文件內(nèi)，修改Action視圖Edit增加下拉框

（1）.先修改一下Action，主要是下拉框的賦值并選中的問題

（2）.View頁面不用做任何修改，編輯時(shí)選中那一項(xiàng)，在HttpGet類型的Edit中，已經(jīng)在生成綁定select的ViewData[“MenuDrop”]時(shí)設(shè)定，當(dāng)對象的ParentId與表中存儲(chǔ)的ParentId相等設(shè)置Selected=true；

（3）.HttpPost類型的Edit是保存編輯后的值賦值保存即可；

以上對下拉框的操作只適應(yīng)于一級菜單情況（就是單純的一個(gè)類別字段），如果下拉框是二級菜單操作，需要用到級聯(lián)操作。

3.二級級聯(lián)下拉框的代碼編寫

原則上二級和以上的多級級聯(lián)下拉框最好是多個(gè)表設(shè)計(jì)，例如省市區(qū)這種三個(gè)下拉框的選擇，面向?qū)ο笤O(shè)計(jì)時(shí)，各自表單獨(dú)設(shè)計(jì)在使用類對象時(shí)就方便一下，把字段設(shè)計(jì)到一個(gè)表中，那么使用Sql語句取值方便，但不符合Asp.Net Core 或者新的Web編程模式；下面演練下我實(shí)現(xiàn)的二級下拉框（編輯功能沒有實(shí)現(xiàn)）

（1）.在View視圖中，修改Create.cshtml文件，在原來父菜單行位置，以如下方式添加2個(gè)DropDownList；

（2）.在View視圖中，Create.Cshtml文件中，增加Js代碼，需要引用Jquery，注意js代碼中的op.text=j.text和op.value=j.value的大小寫，如下

（3）.在Controller中的MenuController.cs文件中，修改action，和增加個(gè)方法，如下圖

（4）.最后預(yù)覽效果

4.關(guān)于菜單管理功能的處理方式。

添加系統(tǒng)菜單的處理方式有這樣一種處理方式，列表之上新建按鈕[添加]，用來實(shí)現(xiàn)增加根目錄菜單，然后在每個(gè)子目錄行上，添加一個(gè)Add 實(shí)現(xiàn)該菜單下的子菜單添加，如下圖示:

這樣處理邏輯清楚一些，正好避開了下拉框問題。當(dāng)然還是要掌握下拉框的功能編碼，以后的業(yè)務(wù)邏輯總是要遇到。

5.復(fù)選框的使用

在前面講刪除和查詢的章節(jié)中，有批量刪除的例子，里面的復(fù)選框使用都是在前臺(tái)代碼Js中實(shí)現(xiàn)操作。我們在菜單修改中，嘗試增加復(fù)選框來。

（1）.單一使用，在Menu管理的View視圖的Create.cshtml中，增加一個(gè)復(fù)選框，因?yàn)閷?yīng)Menu數(shù)據(jù)表的IsDisplay字段，為bool類型。

（2）.執(zhí)行Action保存數(shù)據(jù)是，獲取到的值（如果選中，則是True，如果不選，則是False）

（3）.在編輯頁面(Edit.cshtml)視圖中，從對象判斷，如果是True，則是選中，如果是False，則是非選中，展現(xiàn)完數(shù)據(jù)后，你在進(jìn)行編輯，Edit的Action的代碼與Create中的類似，不在演練提出。

6.復(fù)選框另外一種用法代碼編寫。我貼出關(guān)鍵代碼，在文章管理中會(huì)有詳細(xì)的代碼。

（1）.在Create視圖的代碼片段

（2）.在Edit時(shí)的代碼片段

網(wǎng)站題目：篇(9)-Asp.Net Core入門實(shí)戰(zhàn)-在頁面中增加下拉框、復(fù)選框功能的增加和修改
網(wǎng)頁鏈接：http://weahome.cn/article/dsopddd.html