0

我有三个下拉列表，每个都取决于先前的选择 (stocks ,category,items) 。每个下拉列表由控制器控制器中的 Viewbag 填充：

 ViewBag.stock_id = new SelectList(db.stocks, "stock_id", "stock_name");
    ViewBag.cat_id = new SelectList(db.categories, "cat_id", "cat_name");
    ViewBag.item_id = new SelectList(db.items, "item_id", "item_name");

 

   [HttpGet]
    public ActionResult UpdateitemDrop1(int stock_id)
    {
        
        var fromDatabaseEF = new SelectList(db.categories.Where(x => x.stock_id == stock_id).ToList(), "cat_id", "cat_name");
        SelectList vb = fromDatabaseEF;
        return Json(vb, JsonRequestBehavior.AllowGet);
    }


    [HttpGet]
    public ActionResult UpdateitemDrop2(int cat_id)
    {
        SelectList data= new SelectList(db.items.Where(x => x.cat_id == cat_id).ToList(), "item_id", "item_name");
        return Json(data, JsonRequestBehavior.AllowGet);

    }

看法：

 <div class="form-group">
            @Html.LabelFor(model => model.stock_id, "stock_id", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("stock_id", null, htmlAttributes: new { @class = "form-control", @id = "stock_id" })
                @Html.ValidationMessageFor(model => model.employee_id, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.cat_id, "cat_id", htmlAttributes: new { @class = "control-label col-md-2"})
            <div class="col-md-10">
                @Html.DropDownList("cat_id", null, htmlAttributes: new { @class = "form-control", @id = "cat_id", disabled = "disabled" })
                @Html.ValidationMessageFor(model => model.employee_id, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.item_id, "item_id", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("item_id", null, htmlAttributes: new { @class = "form-control", @id = "item_id"  , disabled = "disabled" })
                @Html.ValidationMessageFor(model => model.item_id, "", new { @class = "text-danger" })
            </div>
        </div>

<script>      
$(function () {
    $('#stock_id').change(function () {
        var select = $('#cat_id');
        var stockV = $("#stock_id :selected").val();
        alert();
        $.ajax({
            url: '/additions/UpdateitemDrop1',
            type: "GET",
            dataType: "JSON",
            data: { stock_id: stockV },
            success: function (vb) {
                
                select.empty();
                $(vb).each(function () {
                    select.add($("<option></option>").val(vb.cat_id).html(vb.cat_name));
                });

            }
        });
    });

    $('#cat_id').change(function () {
        var catV = $("#cat_id :selected").val();
        $('#item_id').prop("disabled", false);
        alert();
        $.ajax({
            url: '/additions/UpdateitemDrop2',
            type: "GET",
            dataType: "JSON",
            data: { item_id: catV },
            success: function () {
                $("#item_id").html("");
                $("#item_id").empty();
                $.each(data, function (i, items) {
                    $("#item_id").append(
                        $('<option></option>').val(items.item_id).html(items.item_name));
                });
            }
        });
    });
});
    </script>

但是当我从第一个下拉列表（stock_id）中选择选项时，它会在“empty（）”函数处停止并且不会填充第二个下拉列表有任何帮助吗？

4

1 回答 1

0

这会有所帮助。

控制器 - 我从 Index16 开始。

public class Stock
{
    public string Id { get; set; } //value
    public string Name { get; set; } //text
}

public class Category
{
    public string Id { get; set; }
    public string Name { get; set; }
}

public class Item
{
    public string Id { get; set; }
    public string Name { get; set; }
}

public class ViewModel
{
    public IList<Stock> StockList { get; set; }
    public IList<Category> CategoryList { get; set; }
    public IList<Item> ItemList { get; set; }
    public string SelectedStock { get; set; }
    public string SelectedCategory { get; set; }
    public string SelectedItem { get; set; }

}
public class HomeController : Controller
{
    [HttpGet]
    public ActionResult UpdateitemDrop1(string stock_id)
    {
        List<Stock> stocks;
        List<Category> categories;
        List<Item> items;
        PopulateViewBags(out stocks, out categories, out items);

        var q = categories.Where(x => x.Id == stock_id).ToArray();
        return Json(q, JsonRequestBehavior.AllowGet);
    }


    [HttpGet]
    public ActionResult UpdateitemDrop2(string cat_id)
    {
        List<Stock> stocks;
        List<Category> categories;
        List<Item> items;
        PopulateViewBags(out stocks, out categories, out items);

        ViewBag.item_id = new SelectList(items.Where(x => x.Id == cat_id));
        return Json(ViewBag.item_id, JsonRequestBehavior.AllowGet);
    }

    public ActionResult Index16()
    {
        List<Stock> stocks;
        List<Category> categories;
        List<Item> items;
        PopulateViewBags(out stocks, out categories, out items);

        var viewModel = new ViewModel { CategoryList = categories, ItemList = items, StockList = stocks };

        return View(viewModel);
    }

    private void PopulateViewBags(out List<Stock> stocks, out List<Category> categories, out List<Item> items)
    {
        stocks = new List<Stock> {
            new Stock {  Id = "1", Name = "Stock1"},
            new Stock {  Id = "2", Name = "Stock2"},
            new Stock {  Id = "3", Name = "Stock3"}
        };
        categories = new List<Category> {
            new Category {  Id = "1", Name = "Category1"},
            new Category {  Id = "2", Name = "Category2"},
            new Category {  Id = "3", Name = "Category3"}
        };
        items = new List<Item> {
            new Item {  Id = "1", Name = "Item1"},
            new Item {  Id = "2", Name = "Item2"},
            new Item {  Id = "3", Name = "Item3"}
        };
        ViewBag.cat_id = new SelectList(categories, "Id", "Name");
        ViewBag.item_id = new SelectList(items, "Id", "Name");
        ViewBag.stock_id = new SelectList(stocks, "Id", "Name");
    }

看法

@model WebApplication2.Controllers.ViewModel
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index16</title>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $('#stock_id').change(function () {
                var stockV = $("#stock_id :selected").val();
                $.ajax({
                    url: '/home/UpdateitemDrop1',
                    type: "GET",
                    //dataType: "JSON",
                    data: { stock_id: stockV },
                    success: function (data) {
                        alert(data[0].Id);
                        alert(data[0].Name)
                        $("#cat_id").html("");
                        $.each(data, function (i, category) {
                            $("#cat_id").append(
                                $('<option></option>').val(category.Id).html(category.Name));
                        })
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(xhr.status);
                        alert(thrownError);
                    }
                });
            });
            $('#cat_id').change(function () {
                alert("category id changed");
                //var catV = $("#cat_id :selected").val();
                //alert();
                //$.ajax({
                //    url: '/additions/UpdateitemDrop2',
                //    type: "GET",
                //    dataType: "JSON",
                //    data: { item_id: catV },
                //    success: function () {
                //        $("#item_id").html("");
                //        $.each(data, function (i, items) {
                //            $("#item_id").append(
                //                $('<option></option>').val(items.item_id).html(items.item_name));
                //        });
                //    }
                //});
            });
        });
    </script>
</head>
<body>
    <div class="form-group">
        <div class="col-md-10">
            @Html.LabelFor(model => model.StockList[0].Name, "stock_id", htmlAttributes: new { @class = "control-label col-md-2" })
            @Html.DropDownListFor(model => model.SelectedStock, ViewBag.stock_id as SelectList,
            "Select Stock", new { @class = "form-control", @id = "stock_id" })
            @Html.ValidationMessageFor(model => model.SelectedStock, "", new { @class = "text-danger" })

            @Html.LabelFor(model => model.CategoryList[0].Name, "cat_id", htmlAttributes: new { @class = "control-label col-md-2" })
            @Html.DropDownListFor(model => model.SelectedCategory, ViewBag.cat_id as SelectList,
            "Select Category", new { @class = "form-control", @id = "cat_id" })
            @Html.ValidationMessageFor(model => model.SelectedCategory, "", new { @class = "text-danger" })

            @Html.LabelFor(model => model.ItemList[0].Name, "item_id", htmlAttributes: new { @class = "control-label col-md-2" })
            @Html.DropDownListFor(model => model.SelectedItem, ViewBag.item_id as SelectList,
            "Select Item", new { @class = "form-control", @id = "item_id" })
            @Html.ValidationMessageFor(model => model.SelectedItem, "", new { @class = "text-danger" })
        </div>
    </div>
</body>
</html>
于 2020-08-24T22:21:55.870 回答