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

时间:2021-04-28 03:45:49

I'm loading a partial view dynamically with Javascript into a DIV:

我正在使用Javascript动态加载局部视图到DIV中:

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

When displayed I would like to populate a few drop down menus for a user to make a selection. Lets say I want to populate a list of "UserCategories"

显示时,我想填充一些下拉菜单供用户进行选择。让我们说我想填写一个“UserCategories”列表

So on success of ajax call above I do:

所以关于上面ajax调用的成功,我做了:

                $.getJSON('@Url.Action("GetUserCategories","User")',function(data) {
                $.each(data, function (key, item) {

                    $("#userCategories-list").append(
                        $("<option></option>").text(item.Name).val(item.Id)
                    );
                });
            });

The UserCategories list isn't being populated.

UserCategories列表未填充。

I assume it's because the UserDetails source html that contains the UserCategories drop down menu is rendered dynamically and not shown on the page ?

我认为这是因为包含UserCategories下拉菜单的UserDetails源html是动态呈现的,而不是在页面上显示?

How can I access and populate my "userCategories-list" drop down menu that's displayed with an ajax call and which HTML/control name I cannot see when I look at the page source/Firebug ?

如何访问和填充我的“userCategories-list”下拉菜单,该菜单显示为ajax调用以及当我查看页面源/ Firebug时我看不到的HTML /控件名称?

Thank you in advance.

先谢谢你。

1 个解决方案

#1


0  

Can't say for sure, but my guess is that your partial view isn't a part of the browsers DOM when your list-creating function is called. In fact, I don't see any code that loads your partial into the browser for rendering.

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

Have you tried debugging with firebug or the chrome debugger? You can set breakpoints in your functions and see what is actually going on.

您是否尝试使用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

#1


0  

Can't say for sure, but my guess is that your partial view isn't a part of the browsers DOM when your list-creating function is called. In fact, I don't see any code that loads your partial into the browser for rendering.

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

Have you tried debugging with firebug or the chrome debugger? You can set breakpoints in your functions and see what is actually going on.

您是否尝试使用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