如何在局部视图中填充新的下拉列表? [英] 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屋!