ASP.NET MVC 下拉框的傳值的兩種方式

時間  2019-12-14
標籤 asp.net asp mvc 下拉 兩種 方式 欄目 ASP 简体版
原文   原文鏈接

之前使用WebForm變成時，下拉框傳值只需直接在後臺綁定代碼就能夠了。如今咱們來看看在MVC中DropDownList是若是和接受從Controller傳過來的值的。html

    

    第一種：使用DropDownListjson

 

    控制器代碼：ui

    

[csharp] view plain copy print?在CODE上查看代碼片派生到個人代碼片
  1. public ActionResult Index()  
  2. {  
  3.   
  4.     //1.1查詢YzSeriesEntity的數據  
  5.     List<Model.YzSeriesEntity> seriesList = seriesBLL.LoadEnities().ToList();  
  6.     //1.2將YzSeriesEntity的數據封裝到 SelectList中，制定要生成下拉框選項的value和text屬性  
  7.     SelectList selList1 = new SelectList(seriesList, "SerialName", "SerialName");  
  8.   
  9.     //2.1查詢YzDivisionEntity的數據  
  10.     List<Model.YzDivisionEntity> divisionList = divisionBLL.LoadEnities().ToList();  
  11.     //2.2講YzDivisionEntity的數據封裝到 SelectList中，制定要生成下拉框選項的value和text屬性  
  12.     SelectList selList2 = new SelectList(divisionList, "DivisionName", "DivisionName");  
  13.   
  14.     //3.調用Selectlist的As方法，自動生成SelectListItem集合，並存入ViewBag中  
  15.     ViewBag.selList1 = selList1.AsEnumerable();  
  16.     ViewBag.selList2 = selList2.AsEnumerable();  
  17.      
  18.     return View();  
  19. }  
        public ActionResult Index()
        {

            //1.1查詢YzSeriesEntity的數據
            List<Model.YzSeriesEntity> seriesList = seriesBLL.LoadEnities().ToList();
            //1.2將YzSeriesEntity的數據封裝到 SelectList中，制定要生成下拉框選項的value和text屬性
            SelectList selList1 = new SelectList(seriesList, "SerialName", "SerialName");

            //2.1查詢YzDivisionEntity的數據
            List<Model.YzDivisionEntity> divisionList = divisionBLL.LoadEnities().ToList();
            //2.2講YzDivisionEntity的數據封裝到 SelectList中，制定要生成下拉框選項的value和text屬性
            SelectList selList2 = new SelectList(divisionList, "DivisionName", "DivisionName");

            //3.調用Selectlist的As方法，自動生成SelectListItem集合，並存入ViewBag中
            ViewBag.selList1 = selList1.AsEnumerable();
            ViewBag.selList2 = selList2.AsEnumerable();
           
            return View();
        }

    

 

    視圖代碼：lua

    

[html] view plain copy print?在CODE上查看代碼片派生到個人代碼片
  1. <!-------------- 添加對話框-------------->  
  2. <div id="addDiv">  
  3.     @using (Ajax.BeginForm("Add", new AjaxOptions() { OnSuccess = "afterAdd" }))  
  4.     {  
  5.         <table>  
  6.             <tr>  
  7.                 <td>編號：</td>  
  8.                 <td>  
  9.                     @Html.TextBox("StaffID")  
  10.                 </td>  
  11.             </tr>  
  12.             <tr>  
  13.                 <td>姓名：</td>  
  14.                 <td>@Html.TextBox("StaffName")</td>  
  15.             </tr>  
  16.             <tr>  
  17.                 <td>性別：</td>  
  18.                 <td>  
  19.                     <input type="radio" id="GenderM" name="Sex" value="男" />男  
  20.                     <input type="radio" id="GenderF" name="Sex" value="女" checked />女  
  21.                 </td>  
  22.             </tr>  
  23.             <tr>  
  24.                 <td>所在系列：</td>  
  25.                 <td>  
  26.                     @Html.DropDownList("SerialName", ViewBag.selList1 as IEnumerable<SelectListItem>)  
  27.                 </td>  
  28.             </tr>  
  29.             <tr>  
  30.                 <td>科室或年級組：</td>  
  31.                 <td>  
  32.                     @Html.DropDownList("DivisionName", ViewBag.selList2 as IEnumerable<SelectListItem>)  
  33.                 </td>  
  34.             </tr>  
  35.             <tr>  
  36.                 <td>任課學科：</td>  
  37.                 <td>  
  38.                     @Html.TextBox("Subjects")  
  39.                 </td>  
  40.             </tr>  
  41.             <tr>  
  42.                 <td>聘任日期：</td>  
  43.                 <td>  
  44.                     @Html.TextBox("EngageDate")  
  45.                 </td>  
  46.             </tr>  
  47.             <tr>  
  48.                 <td>參加工做日期：</td>  
  49.                 <td>  
  50.                     @Html.TextBox("WorkDate")  
  51.                 </td>  
  52.             </tr>  
  53.             <tr>  
  54.                 <td>職稱：</td>  
  55.                 <td>  
  56.                     @Html.TextBox("jobQualification")  
  57.                 </td>  
  58.             </tr>  
  59.             <tr>  
  60.                 <td>身份證號：</td>  
  61.                 <td>  
  62.                     @Html.TextBox("IdentityCard")  
  63.                 </td>  
  64.             </tr>  
  65.   
  66.         </table>  
  67.     }  
  68.   
  69. </div>  
        <!-------------- 添加對話框-------------->
        <div id="addDiv">
            @using (Ajax.BeginForm("Add", new AjaxOptions() { OnSuccess = "afterAdd" }))
            {
                <table>
                    <tr>
                        <td>編號：</td>
                        <td>
                            @Html.TextBox("StaffID")
                        </td>
                    </tr>
                    <tr>
                        <td>姓名：</td>
                        <td>@Html.TextBox("StaffName")</td>
                    </tr>
                    <tr>
                        <td>性別：</td>
                        <td>
                            <input type="radio" id="GenderM" name="Sex" value="男" />男
                            <input type="radio" id="GenderF" name="Sex" value="女" checked />女
                        </td>
                    </tr>
                    <tr>
                        <td>所在系列：</td>
                        <td>
                            @Html.DropDownList("SerialName", ViewBag.selList1 as IEnumerable<SelectListItem>)
                        </td>
                    </tr>
                    <tr>
                        <td>科室或年級組：</td>
                        <td>
                            @Html.DropDownList("DivisionName", ViewBag.selList2 as IEnumerable<SelectListItem>)
                        </td>
                    </tr>
                    <tr>
                        <td>任課學科：</td>
                        <td>
                            @Html.TextBox("Subjects")
                        </td>
                    </tr>
                    <tr>
                        <td>聘任日期：</td>
                        <td>
                            @Html.TextBox("EngageDate")
                        </td>
                    </tr>
                    <tr>
                        <td>參加工做日期：</td>
                        <td>
                            @Html.TextBox("WorkDate")
                        </td>
                    </tr>
                    <tr>
                        <td>職稱：</td>
                        <td>
                            @Html.TextBox("jobQualification")
                        </td>
                    </tr>
                    <tr>
                        <td>身份證號：</td>
                        <td>
                            @Html.TextBox("IdentityCard")
                        </td>
                    </tr>

                </table>
            }

        </div>

 

    效果顯示：url

    

 

    第二種：使用<select></select>spa

 

    視圖代碼：.net

    

[html] view plain copy print?在CODE上查看代碼片派生到個人代碼片
  1. <!--選擇權重-->  
  2. <div>  
  3.     <span>@Html.Label("請選擇權重：")</span>  
  4.     <span>  
  5.         <select id="cc" class="easyui-combobox" name="dept"  
  6.                data-options="valueField:'ID',textField:'Weight',url:'/SettingEvaluation/ListOption'" />  
  7.     </span>  
  8. </div>  
        <!--選擇權重-->
        <div>
            <span>@Html.Label("請選擇權重：")</span>
            <span>
                <select id="cc" class="easyui-combobox" name="dept"
                       data-options="valueField:'ID',textField:'Weight',url:'/SettingEvaluation/ListOption'" />
            </span>
        </div>

 

    控制器代碼：    code

    

[csharp] view plain copy print?在CODE上查看代碼片派生到個人代碼片
  1. //下拉框對應的列表  
  2. public ActionResult ListOption()  
  3. {  
  4.     //2.1.查詢出weight實體,並將其轉成DTO類型  
  5.     List<Model.DTO.YzWeightEntityDTO> weightList =  
  6.         weightBLL.LoadEnities().ToList().Select(s => s.ToDto()).ToList();  
  7.     //2.2返回json  
  8.     return Json(weightList, JsonRequestBehavior.AllowGet);  
  9.   
  10. }   
        //下拉框對應的列表
        public ActionResult ListOption()
        {
            //2.1.查詢出weight實體,並將其轉成DTO類型
            List<Model.DTO.YzWeightEntityDTO> weightList =
                weightBLL.LoadEnities().ToList().Select(s => s.ToDto()).ToList();
            //2.2返回json
            return Json(weightList, JsonRequestBehavior.AllowGet);

        }

 

    效果顯示：orm

    

   

    總結：xml

    兩種傳值方式的比較：

    第一種是控制器經過ViewBag傳值，前臺經過@Html.DropDownList接收；第二種是經過Json傳值，前臺經過url綁定valueField和textField的值來獲取數據。二者沒有什麼太大的不一樣，可是因爲傳值使用<select></select>接收的，使用的是HTML標籤，因此還能夠用來綁定其餘的js事件，因此若是有功能須要的話，後者要比前者靈活些。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程