Fatal编程技术网
  • javascript/
  • Javascript 如何使用另一个下拉列表asp.net core 3.0筛选下拉列表的选项

Javascript 如何使用另一个下拉列表asp.net core 3.0筛选下拉列表的选项

javascript asp.net-core drop-down-menu

Javascript 如何使用另一个下拉列表asp.net core 3.0筛选下拉列表的选项,javascript,asp.net-core,drop-down-menu,Javascript,Asp.net Core,Drop Down Menu,我想在一个下拉列表中选择一个产品类别，并显示它的子类别。 我的模型： 产品类别 public class ProductCategory { [Key] public int Id { get; set; } [Required(ErrorMessage ="Pole 'Nazwa kategorii' jest wymagane&q

我想在一个下拉列表中选择一个产品类别，并显示它的子类别。 我的模型： 产品类别

        public class ProductCategory
            {
                [Key]
                public int Id { get; set; }
        
                [Required(ErrorMessage ="Pole 'Nazwa kategorii' jest wymagane")]
                [Display(Name ="Nazwa kategorii")]
                public string Name { get; set; }
        
                [Display(Name = "Dodaj zdjęcie")]
                public string ImagePath { get; set; }
        
                public virtual ICollection<ProductSubCategory> ProductSubCategory { get; set; }
        
            }
创建产品html

<form method="post" enctype="multipart/form-data">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Product.Name" class="control-label"></label>
                <input asp-for="Product.Name" class="form-control" />
                <span asp-validation-for="Product.Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Product.Description" class="control-label"></label>
                <input asp-for="Product.Description" class="form-control" />
                <span asp-validation-for="Product.Description" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Product.ImagePath" class="control-label"></label>
                <input type="file" asp-for="Product.ImagePath" class="form-control" name="image" onchange="readURL(this);"/>
                <span asp-validation-for="Product.ImagePath" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Product.DateOfNotification" class="control-label"></label>
                <input asp-for="Product.DateOfNotification" class="form-control" />
                <span asp-validation-for="Product.DateOfNotification" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Product.ProductCategoryId" class="control-label"></label>
                <select id="category" asp-for="Product.ProductCategoryId" class ="form-control" asp-items="ViewBag.ProductCategoryId"></select>
            </div>
            <div class="form-group">
                <label asp-for="Product.ProductSubCategoryId" class="control-label"></label>
                <select id="subCategory" asp-for="Product.ProductSubCategoryId" class ="form-control" asp-items="ViewBag.ProductSubCategoryId"></select>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>



脚本
$（“#类别”）。更改（功能（）{
var category=$（“#category”）.val（）；
$.ajax({
url:“CreteProduct？handler=子类别”，
方法：“获取”，
数据：{category:category}，
成功：功能（数据）{
$（“#子类别选项”）.remove（）；
$.each（数据、函数（索引、项数据）{
$（“#子类别”）.append（“+itemData.Name+”）；
});
}
})
});
结果：子类别下拉列表未定义。选择类别后，项目数量良好，但显示“未定义”

您需要使用
itemData.value
替换
itemData.Id
，
itemData.text
替换
itemData.Name
。下面是一个演示：

cshtml.cs：

public class CreateProductModel : PageModel
    {
        [BindProperty]
        public Product Product { get; set; }
        public static List<ProductCategory> productCategories = new List<ProductCategory> { new ProductCategory { Id = 1, Name = "pc1" }, new ProductCategory { Id = 2, Name = "pc2" } };
        public static List<ProductSubCategory> productSubCategories = new List<ProductSubCategory> { new ProductSubCategory { Id = 11, Name = "psc11", ProductCategoryId = 1 }, new ProductSubCategory { Id = 12, Name = "psc12", ProductCategoryId = 1 }, new ProductSubCategory { Id = 21, Name = "psc21", ProductCategoryId = 2 }, new ProductSubCategory { Id = 22, Name = "psc22", ProductCategoryId = 2 } };
        public IActionResult OnGet()
        {
            ViewData["ProductCategoryId"] = new SelectList(productCategories, "Id", "Name");
            ViewData["ProductSubCategoryId"] = new SelectList(productSubCategories, "Id", "Name");
            return Page();
        }
        public JsonResult OnGetSubCategories(int category)
        {
            var subcategories = productSubCategories.Where(p => p.ProductCategoryId == category).ToList();
            return new JsonResult(new SelectList(subcategories, "Id", "Name"));
        }

    }

公共类CreateProductModel:PageModel
{
[BindProperty]
公共产品产品{get；set；}
公共静态列表productCategories=new List{new productCategories{Id=1，Name=“pc1”}，new productCategories{Id=2，Name=“pc2”}；
公共静态列表productSubCategories=new List{new ProductSubCategory{Id=11，Name=“psc11”，ProductCategoryId=1}，new productSubcategority{Id=12，Name=“psc12”，ProductCategoryId=1}，new productSubcategority{Id=21，Name=“psc21”，ProductCategoryId=2}，new productSubcategority{Id=22，Name=“psc22”，ProductCategoryId=2}}；
公共IActionResult OnGet（）
{
ViewData[“ProductCategoryId”]=新的选择列表（productCategories、“Id”、“名称”）；
ViewData[“ProductSubcategory Id”]=新的选择列表（productSubCategories，“Id”，“Name”）；
返回页（）；
}
公共JsonResult OnGetSubCategories（int类别）
{
var subcategories=productSubCategories.Where（p=>p.ProductCategoryId==category.ToList（）；
返回新的JsonResult（新的SelectList（子类别，“Id”、“名称”）；
}
}
cshtml:

<form method="post" enctype="multipart/form-data">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="Product.Name" class="control-label"></label>
        <input asp-for="Product.Name" class="form-control" />
        <span asp-validation-for="Product.Name" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Product.Description" class="control-label"></label>
        <input asp-for="Product.Description" class="form-control" />
        <span asp-validation-for="Product.Description" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Product.ImagePath" class="control-label"></label>
        <input type="file" asp-for="Product.ImagePath" class="form-control" name="image" onchange="readURL(this);" />
        <span asp-validation-for="Product.ImagePath" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Product.DateOfNotification" class="control-label"></label>
        <input asp-for="Product.DateOfNotification" class="form-control" />
        <span asp-validation-for="Product.DateOfNotification" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Product.ProductCategoryId" class="control-label"></label>
        <select id="category" asp-for="Product.ProductCategoryId" class="form-control" asp-items="ViewBag.ProductCategoryId"></select>
    </div>
    <div class="form-group">
        <label asp-for="Product.ProductSubCategoryId" class="control-label"></label>
        <select id="subCategory" asp-for="Product.ProductSubCategoryId" class="form-control" asp-items="ViewBag.ProductSubCategoryId"></select>
    </div>
    <div class="form-group">
        <input type="submit" value="Create" class="btn btn-primary" />
    </div>
</form>
@section scripts{ 
    <script type="text/javascript">
            $("#category").change(function () {
                var category = $("#category").val();
                $.ajax({
                url: "CreateProduct?handler=SubCategories",
                    method: "GET",
                    data: {category: category },
                    success: function (data) {
                $("#subCategory option").remove();
                        $.each(data, function (index, itemData) {
                $("#subCategory").append("<option value='" + itemData.value + "'>" + itemData.text + "</option>");
                        });
                    }
                })
            });
</script>
}


@节脚本{
$（“#类别”）。更改（功能（）{
var category=$（“#category”）.val（）；
$.ajax({
url:“CreateProduct？handler=子类别”，
方法：“获取”，
数据：{category:category}，
成功：功能（数据）{
$（“#子类别选项”）.remove（）；
$.each（数据、函数（索引、项数据）{
$（“#子类别”）.append（“+itemData.text+”）；
});
}
})
});
}
结果:

下拉列表未定义的确切含义是什么？在哪里未定义？值​​显示为未定义。项目的数量是正确的，那么数据中的示例对象是什么样子的呢；不反映您正在解析的javascript对象的字符串名从中获取
未定义的
。接收到的结构明显不同于您在控制台上预期的结构。错误为：CreateProduct？handler=子类别&类别=2:1加载资源失败：服务器以404（）状态响应，您可以在handler
OnGetSubCategories
中看到，类别类型为
int
，我更新了我的答案以添加请求url。在您的url类别中，是2:1而不是
int
类型。如何更改此值您设置的值是在ajax
data:{category:category}，
中，我传递了数据“1”，以便
category=1


        script
            <script>
            $("#category").change(function () {
            var category = $("#category").val();
            $.ajax({
                url: "CreteProduct?handler=SubCategories",
                method: "GET",
                data: { category: category },
                success: function (data) {
                    $("#subCategory option").remove();
                    $.each(data, function (index, itemData) {       
                        $("#subCategory").append("<option value='" + itemData.Id + "'>" + itemData.Name + "</option>");
                    });
                }
            })
        });
        </script>



public class CreateProductModel : PageModel
    {
        [BindProperty]
        public Product Product { get; set; }
        public static List<ProductCategory> productCategories = new List<ProductCategory> { new ProductCategory { Id = 1, Name = "pc1" }, new ProductCategory { Id = 2, Name = "pc2" } };
        public static List<ProductSubCategory> productSubCategories = new List<ProductSubCategory> { new ProductSubCategory { Id = 11, Name = "psc11", ProductCategoryId = 1 }, new ProductSubCategory { Id = 12, Name = "psc12", ProductCategoryId = 1 }, new ProductSubCategory { Id = 21, Name = "psc21", ProductCategoryId = 2 }, new ProductSubCategory { Id = 22, Name = "psc22", ProductCategoryId = 2 } };
        public IActionResult OnGet()
        {
            ViewData["ProductCategoryId"] = new SelectList(productCategories, "Id", "Name");
            ViewData["ProductSubCategoryId"] = new SelectList(productSubCategories, "Id", "Name");
            return Page();
        }
        public JsonResult OnGetSubCategories(int category)
        {
            var subcategories = productSubCategories.Where(p => p.ProductCategoryId == category).ToList();
            return new JsonResult(new SelectList(subcategories, "Id", "Name"));
        }

    }



<form method="post" enctype="multipart/form-data">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="Product.Name" class="control-label"></label>
        <input asp-for="Product.Name" class="form-control" />
        <span asp-validation-for="Product.Name" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Product.Description" class="control-label"></label>
        <input asp-for="Product.Description" class="form-control" />
        <span asp-validation-for="Product.Description" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Product.ImagePath" class="control-label"></label>
        <input type="file" asp-for="Product.ImagePath" class="form-control" name="image" onchange="readURL(this);" />
        <span asp-validation-for="Product.ImagePath" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Product.DateOfNotification" class="control-label"></label>
        <input asp-for="Product.DateOfNotification" class="form-control" />
        <span asp-validation-for="Product.DateOfNotification" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Product.ProductCategoryId" class="control-label"></label>
        <select id="category" asp-for="Product.ProductCategoryId" class="form-control" asp-items="ViewBag.ProductCategoryId"></select>
    </div>
    <div class="form-group">
        <label asp-for="Product.ProductSubCategoryId" class="control-label"></label>
        <select id="subCategory" asp-for="Product.ProductSubCategoryId" class="form-control" asp-items="ViewBag.ProductSubCategoryId"></select>
    </div>
    <div class="form-group">
        <input type="submit" value="Create" class="btn btn-primary" />
    </div>
</form>
@section scripts{ 
    <script type="text/javascript">
            $("#category").change(function () {
                var category = $("#category").val();
                $.ajax({
                url: "CreateProduct?handler=SubCategories",
                    method: "GET",
                    data: {category: category },
                    success: function (data) {
                $("#subCategory option").remove();
                        $.each(data, function (index, itemData) {
                $("#subCategory").append("<option value='" + itemData.value + "'>" + itemData.text + "</option>");
                        });
                    }
                })
            });
</script>
}