MVC drop down list

最新推荐文章于 2020-09-13 17:30:11 发布

zexu82

最新推荐文章于 2020-09-13 17:30:11 发布

阅读量528

点赞数

分类专栏： MVC

本文链接：https://blog.csdn.net/zexu82/article/details/40661739

版权

MVC 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

controller:

public SelectList GetAgeList()
        {
            var ages = new []{
                           new {id=0,desc="8-52wks"},
                           new {id=1,desc="1"},
                           new {id=2,desc="2"},
                           new {id=3,desc="3"},
                           new {id=4,desc="4"},
                           new {id=5,desc="5"},
                           new {id=6,desc="6"},
                           new {id=7,desc="7"},
                       };

            return new SelectList(ages, "id", "desc", new { id = 2 }); // default not work because using a strongly typed view,
        }

        public SelectList GetYesNoList()
        {
            var boolList = new []{
                new {Txt = "Yes",Val = true},
                new {Txt = "No", Val = false}
            };
            return new SelectList(boolList, "Val", "Txt"); 
        }

        [ChildActionOnly]
        public ActionResult GetAQuoteAct(int id)
        {

            GetAQuoteModel m = new GetAQuoteModel();
            m.Microchipped = true;
            ViewBag.PetTypeList = GetPetTypeSelectList();
            ViewBag.PetBreedList = GetPetBreedSelectListByPetType();
            ViewBag.AgeList = GetAgeList();
            ViewBag.YesNoList = GetYesNoList();

            return PartialView("GetAQuotePartial",m);
        }

partial view page: (select one drop down, load another drop down)

<div class="row">
            <div class="large-12 columns">
                <label class="form-label">Select Pet</label>
                @Html.DropDownListFor(m => m.PetType, (SelectList)(ViewBag.PetTypeList), "Select Pet", new { @onchange = "LoadPetBreedDropdown(this)", data_target = "PetBreed" })


            </div>
        </div>

        <div class="row">
            <div class="large-12 columns">
                <label class="form-label">Select Breed</label>
                @Html.DropDownListFor(m => m.PetBreed, (SelectList)ViewBag.PetBreedList, "Select Breed")
            </div>
        </div>
        <div class="row">
            <div class="large-6 columns">
                <label class="form-label">Age</label>
               @Html.DropDownListFor(m => m.Age, (SelectList)ViewBag.AgeList);
            </div>
            <div class="large-6 columns">
                <label class="form-label">Microchipped?</label>
                @Html.DropDownListFor(m => m.Microchipped, (SelectList)ViewBag.YesNoList)
            </div>

        </div>

<script type="text/javascript">

    function LoadPetBreedDropdown(obj) {
        
        // obj dom
        var selectedPetType = obj.value;
        var targetId = obj.getAttribute("data-target");

        var target = $("#" + targetId);
        //var target = $("#PetBreed");

        target.empty();
        
       
        // create custom html attr. new {id="ui-btn-right", data_url="gear"}
        // url = target.attr("data-url");
        
        var url = '/PetType/GetPetBreedSelectListByPetTypeJson?type=' + selectedPetType;
        $.getJSON(url, function (result) {

            var m = result;
            $.each(result, function (i, field) {
                target.append($("<option></option>").val(field.Breed).html(field.Breed));
            });
        });
    }
</script>