将数据加载到动态填充的分部视图中的选择下拉菜单

Load data to a Select Dropdown menu int a dynamically populated Partial View

本文关键字：视图 选择 下拉菜单 加载 动态 填充 数据      更新时间：2023-09-26

我正在使用Javascript将部分视图动态加载到DIV中：

    $.ajax({
        url: '@Url.Action("Details","User")',
        data: { id: userId},
        type: 'post',
        success: function (data) {
        $("#user-details").show().html(data);})

显示时，我想填充一些下拉菜单供用户进行选择。假设我想填充"用户类别"列表

所以在上面的ajax调用成功时，我做：

                $.getJSON('@Url.Action("GetUserCategories","User")',function(data) {
                $.each(data, function (key, item) {
                    $("#userCategories-list").append(
                        $("<option></option>").text(item.Name).val(item.Id)
                    );
                });
            });

未填充用户类别列表。

我认为这是因为包含用户类别下拉菜单的用户详细信息源 html 是动态呈现的并且没有显示在页面上？

如何访问和填充我的"userCategories-list"下拉菜单，该菜单与ajax调用一起显示，以及当我查看页面源代码/Firebug时看不到的HTML/控件名称？

提前谢谢你。

不能肯定地说，但我的猜测是，当您调用列表创建函数时，您的部分视图不是浏览器 DOM 的一部分。事实上，我没有看到任何代码将您的部分加载到浏览器中进行渲染。

您是否尝试过使用Firebug或chrome调试器进行调试？您可以在函数中设置断点，并查看实际发生的情况。

 $.ajax({
        url: '@Url.Action("Details","User")',
        data: { id: userId},
        type: 'post',
        success: function (data) { 
            $("#partialContainer").html(data);
            $.getJSON('@Url.Action("GetUserCategories","User")',function(listData) {
                $.each(listData, function (key, item) {
                    $("#userCategories-list").append(
                        $("<option></option>").text(item.Name).val(item.Id)
                    );
                }); //each
            )); //getJson
        } //success anon function
  }); //$.ajax
相关文章：