@html.dropdownlistfor_bootstrap法

(1) 2024-07-28 11:12

Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说
@html.dropdownlistfor_bootstrap法,希望能够帮助你!!!。

一、非强类型:

第一种,还是级联

var ProductsSortList是数据库查询的List做成Json传给客户端,用jq处理<select>,但是Mvc不需要做更多的JQ工作,做成SelectListItem ,用@Html.DropDownList 和@DropDownListFor直接使用

1、JQ数据做的下拉框,基本就是传统的Select标签,借助EF强大的查询功能,客户端用jq处理ViewDATA

var ProductsSortList = OperateContext.Current.BLLSession.IProductsSortBLL.GetListBy_NoTrack(s => s.ProductsSortID > 0).Select(s => new Model.ViewModel.ProductsSort() { ProductsSortName = s.ProductsSortName, ProductsSortID = s.ProductsSortID, nodes = s.GoodsSorts.Select(t => new Model.ViewModel.GoodSort() { GoodsSortID = t.GoodsSortId, GoodsSortName = t.GoodsSortName, }).ToList() }).ToList(); ViewData["ProductsSortDrop"] = Common.DataHelper.ToJSON(ProductsSortList);

<select name="ModifyProductsSort" id="ModifyProductsSort"> <option value="0" selected="selected">产品一级分类</option> </select> <select name="ModifyGoodSort" id="ModifyGoodSort"> <option value="0" selected="selected">产品二级分类</option> </select>

3、JQ

<script type="text/javascript"> function escape2Html(str) { var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' }; return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) { return arrEntities[t]; }); } //下拉框联动js var a = '@ViewData["ProductsSortDrop"]';
    j = escape2Html(a);
    
    var obj = $.parseJSON(j);
   
    $(document).ready(init);

    function init() {


        $.each(obj, function (index, val) {
            $("<option value='" + val.ProductsSortID + "'>" + val.ProductsSortName + "</option>").appendTo($("#ModifyProductsSort"))//动态添加Option子项

        });

        $("select[name='ModifyProductsSort']").change(function () {
            var selectedPortsSort = $(this).val();

            if (selectedPortsSort == 0)
            {
                $("select[name='ModifyGoodSort']").innerHTML = "";
                $("select[name='ModifyGoodSort']").html('<option value="产品二级分类" selected="selected">产品二级分类</option>');
            }//清空二级下拉框
            else {
                document.getElementById("ModifyGoodSort").innerHTML = "";

                ShowCityWithSelectedGoodSort(selectedPortsSort);
            }
        });
    }

    function ShowCityWithSelectedGoodSort(selectedPortsSort) {

        $.each(obj, function (index, val) {

            if (val.ProductsSortID == selectedPortsSort)
            {

                $.each(val.nodes, function (i, v)
                {
                    $("<option value='" + v.GoodsSortID + "'>" + v.GoodsSortName + "</option>").appendTo($("select[name='ModifyGoodSort']"))

                })
            }

         });
       }
</script>

第二种,纯种MVC

Controller:var ProductsSortList是数据库查询的下拉框绑定做成SelectListItem 

var ProductsSortList = OperateContext.Current.BLLSession.IProductsSortBLL.GetListBy_NoTrack(s => s.ProductsSortID > 0).Select(s => new SelectListItem() { Text = s.ProductsSortName, Value = s.ProductsSortID.ToString() }); ViewData["ProductsSortDrop"] = ProductsSortList;

view:

@Html.DropDownList("ProductsSortDrop")

@Html.DropDownList("ProductsSortDrop")

还可以给其加上一个默认选项:@Html.DropDownList("ProductsSortDrop", "请选择");

二、强类型+非强类型(ViewData,并实现级联:
控制器:提供下拉框数据绑定
一个是产品一级目录ProdectsSortList得到,并在强类型中关联m => m.ProductsSortID,m => m.GoodsSortID

 var ProductsSortList = OperateContext.Current.BLLSession.IProductsSortBLL.GetListBy_NoTrack(s => s.ProductsSortID > 0).Select(s => new SelectListItem() { Text = s.ProductsSortName, Value = s.ProductsSortID.ToString() }); ViewData["ProductsSortDrop"] = ProductsSortList; var GoodsSortDropList = OperateContext.Current.BLLSession.IGoodsSortBLL.GetListBy_NoTrack(s=>s.ProductsSortID==GoodsList.ProductsSortID).Select(s => new SelectListItem() { Text= s.GoodsSortName, Value = s.GoodsSortId.ToString() }); ViewData["GoodsSortDrop"] = GoodsSortDropList;

view:

绑定数据来自控制器的ViewData

@Html.DropDownListFor(m => m.ProductsSortID, ViewData["ProductsSortDrop"] as IEnumerable<SelectListItem>)
 @Html.DropDownListFor(m => m.GoodsSortID, ViewData["GoodsSortDrop"] as IEnumerable<SelectListItem>)

这样Mvc提交,自动的提交两个DropDownList的ID及value值

jq级联:
<script type="text/javascript"> $(document).ready(init); function init() { $("select[name='ProductsSortID']").change(function () { document.getElementById("GoodsSortID").innerHTML = ""; var selectedProvince = $(this).val(); ShowCityWithSelectedProvince(selectedProvince); }); } function ShowCityWithSelectedProvince(province) { $.ajax({ url: "@Url.Action("GoodsSortDrp", "AdminConsole")", data: { ProductsSortId: province }, success: function (data) { console.log(data); $.each(data, function (i, v) { $("<option value='" + v.Value + "'>" + v.Text + "</option>").appendTo($("select[name='GoodsSortID']")) }) } }); } </script>



三、强类型:
DropDownListFor常用的是两个参数的重载,第一参数是生成的select的名称,第二个参数是数据,用于将绑定数据源至DropDownListFor
Modle:
   public class SettingsViewModel
   {

       Repository rp =new Repository();
       public string ListName { get; set; }  
       public  IEnumerable<SelectListItem> GetSelectList()
       {

               var selectList = rp.GetArea().Select(a => new SelectListItem { 
                               Text=a.AreaName,
                               Value=a.AreaId.ToString()
                               });
               return selectList;
           }
       } 
Controller:
       public ActionResult Index()
       {

           return View(new SettingsViewModel());
       }
View:
@model Mvc3Applicationtest2.Models.SettingsViewModel
@Html.DropDownListFor(m=>m.ListName,Model.GetSelectList(),"请选择")

转载于:https://www.cnblogs.com/cqstars/p/7294405.html

今天的分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

上一篇

已是最后文章

下一篇

已是最新文章

发表回复