创建动态部分MVC

Question

我正在尝试在MVC中的@section中呈现数据驱动的Bootstrap Carousel。

我想在_LayoutPage上呈现我对此做的部分：

    <div class="blurred-container">
        @RenderSection("headerBlob",true)
    </div>

但似乎它在应用程序从API检索图像URL之前创建了轮播。 这是我创建的@section

 @section headerBlob {

    @Scripts.Render("~/scripts/core")
    @*scripts/core contans jQuery and bootstrapjs*@

    <script type="text/javascript">
        //gets last segment of URL
        if (window.location.href.indexOf("#") > -1) {

        } else {
            var segment_str = window.location.pathname;
            var segment_array = segment_str.split('/');
            var last_segment = segment_array[segment_array.length - 1];
        }

        //Get's Image's Based on URL Identifier 
        $.getJSON('/API/VehicleImage?u=' + last_segment, function (data) {
            for (var i = 0; i < data.length; i++) {
                //The Console is for Debug, and It DOES return the Image URLs
                console.log(data[i].VehicleImageURL);
                //Should create the div based on the image URL
                $('#itms').html('<div class="item"><img src="' + data[i].VehicleImageURL + '" class="img-responsive"></div>');
            };
        });
    </script>
    <!-- main slider carousel -->
    <div class="row">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- main slider carousel items -->
            <div class="carousel-inner" role="listbox" id="itms">
                <!-- SHOULD DYNAMICALLY CREATE IMAGES to DISPLAY -->
            </div>
            <!-- main slider carousel nav controls -->
            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                <span class="fa fa-angle-left"></span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                <span class="fa fa-angle-right"></span>
            </a>
        </div>
    </div>
    <!--/main slider carousel-->
}

这是显示正在检索的网址的屏幕截图（所有网址都有效）  
这是渲染后元素的屏幕截图

非常感谢任何建议！

Answer 1

要解决此问题，您必须使用jQuery包围$(document).ready代码。这样，在创建DOM之后，您的#itms将填充图像。

您替换itms的内容，因为您使用了html，并且您需要使用append来追加所有图像。

$(document).ready(function() {
//gets last segment of URL
    if (window.location.href.indexOf("#") > -1) {

    } else {
        var segment_str = window.location.pathname;
        var segment_array = segment_str.split('/');
        var last_segment = segment_array[segment_array.length - 1];
    }

    //Get's Image's Based on URL Identifier 
    $.getJSON('/API/VehicleImage?u=' + last_segment, function (data) {
        for (var i = 0; i < data.length; i++) {
            //The Console is for Debug, and It DOES return the Image URLs
            console.log(data[i].VehicleImageURL);
            //Should create the div based on the image URL
            $('#itms').append('<div class="item"><img src="' + data[i].VehicleImageURL + '" class="img-responsive"></div>');
        };
    });
});