如何在局部视图中填充新的下拉列表？ [英] How to populate new dropdownlist in partial view?

问题描述

您好b $ b

我正在尝试使用部分视图制作级联下拉功能。第一个下拉列表我有两个类别，当我点击类别时，它会找到该类别的子项并填充第二个下拉列表（在我的局部视图中）。



当我点击第二个下拉菜单时，我会找到我点击的那个类别的孩子，然后一个新的下拉列表将填充这个新信息。 />


有人可以帮我正确的方向吗？



这是我的控制器：

Hi
I am trying to make an cascading dropdown function with partial view. The first dropdown I have two categories, and when I click on the category it finds the children for that category and fill the second dropdown list ( on my partial view ).

When I click on the second dropdown menu I will find the children for that category I click on, and then a new dropdown will populate with this new information.

Can someone help me in the right direction?

This is my controller :

[HttpGet]
        public PartialViewResult CategoryList(int catId)
        {

            var subcategories = (from s in db.Categories
                                 where s.ParentCategoryId == catId
                                 select s).ToList();
            ViewBag.CategorySub = new SelectList(subcategories, "CategoryId", "Name");
            
            return PartialView("DropDownList", subcategories);

        }
        [HttpGet]
        public PartialViewResult SubCategoryList(int idSub)
        {

            var subcategories = (from s in db.Categories
                                 where s.ParentCategoryId == idSub
                                 select s).ToList();
            ViewBag.CategorySub = new SelectList(subcategories, "CategoryId", "Name");

            return PartialView("DropDownList", subcategories);

        }

视图上的脚本：

The script on the view :

//Run Jquery script
   jQuery(document).ready(function ($) {
       //Dropdownlist Selectedchange event

       $("#CategoryId").change(function () {
           //Take the Id from the dropdown list when selected an item
           var id = $(this).val();
           //Make the dropdown empty

           //Send the information to the controller

           $.ajax({
               type: 'GET',
               url: '@Url.Action("CategoryList", "Manage")', // we are calling json method

               data: { catId: id },
               dataType: 'html',
               contentType: 'application/html; charset-utf-8',
               //here we are get value of selected item and passing same value
               // to input to the json method CategoryList.
               success: function (data) {
                   $('#dynamicContent').show();
                   $("#dynamicContent").html(data);
               }
           });
       });
       $('body').on("change", "#CategorySub", function (evt) {
           var idSub = $(this).val();

           alert(idSub);
           $.ajax({
               type: 'GET',
               url: '@Url.Action("CategoryList", "Manage")', // we are calling json method
               context: document.body,
               data: { idSub: ids },
               dataType: 'html',
               contentType: 'application/html; charset-utf-8',
               //here we are get value of selected item and passing same value
               // to input to the json method CategoryList.
               success: function () {
                   alert('done');
               }
           });


       });
});

推荐答案

）{
// Dropdownlist Selectedchange事件

（ ＃CategoryId）。change（ function （）{
// 选择项目时从下拉列表中选择ID
var id =

("#CategoryId").change(function () { //Take the Id from the dropdown list when selected an item var id =

（ this ）。val（）;
// 将下拉列表设为空

// 将信息发送到控制器

(this).val(); //Make the dropdown empty //Send the information to the controller

这篇关于如何在局部视图中填充新的下拉列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！