在 Div 中引用 @Section 脚本答案

【问题标题】：Referencing @Section Scripts within Div在 Div 中引用 @Section 脚本
【发布时间】：2016-05-30 18:38:52
【问题描述】：

在div 中调用@section scripts{...} 时遇到问题。目前，它声明Uncaught Error: Unknown component 'product-chooser。

问题：如何从 div 中调用部分内容，以便将内容放在页面顶部附近？

给我问题的代码部分：

@section scripts{
    @Html.Partial("ProductChooserScript", Model)
}

查看：ProductSelector

<div id="productForm">
    @using(Html.BeginForm())
    {
        <div class="col-md-6">
            <div class="input-group" data-bind="visible: false, component: { name: 'product-chooser' , params: { value: TargetedProducts, available: AvailableProducts, selected: SelectedProducts }}"></div>
            @* Failing Here *@
            <div>
                @section scripts{
                @Html.Partial("ProductChooserScript", Model)
            }
            </div>
        </div>
    }
</div>

<script type="text/javascript">
    function ProductSelectionViewModel(data){
        var self = this;

        // additional javascript/knockout logic here...
    }

    $(function (){
        window.viewModel = new ProductSelectionViewModel(@Html.Json(Model));

        ko.applyBindings(window.viewModel, $("#productForm")[0])
    })
</script>

附加说明：

如果我删除 div 周围的 @section scripts{...} 并将其放在页面底部，它会呈现部分，但部分会在页面底部呈现（不是所需的结果），我会喜欢它在顶部附近呈现。

请注意，我进行了研究...其他来源没有解决此问题。

【问题讨论】：

标签： c# asp.net asp.net-mvc razor knockout.js

【解决方案1】：

首先，视图代码中定义节的位置与任何内容都没有关系。换句话说，仅仅因为您在该 div 中定义它并不意味着该部分的内容将在那里结束。该部分在布局调用RenderSection 的任何位置呈现。

其次，您只能在布局或使用布局的视图中定义部分。部分视图不能定义部分，因为部分视图不引用布局。

【讨论】：

【解决方案2】：

经过进一步研究，我能够解决我的问题。错误在于我的knockout...我将我的@section scripts{...} 移到了视图的底部，然后创建了一个div 和id 的productChooser。

以前，我的ko.components.register... 附加了body，它在页面底部呈现。将附加更改为我的productChooser 后，它按预期呈现。

我的观点：ProductSelector

<div id="productForm">
    @using(Html.BeginForm())
    {
        <div class="col-md-6">
            <div class="input-group" data-bind="visible: false, component: { name: 'product-chooser' , params: { value: TargetedProducts, available: AvailableProducts, selected: SelectedProducts }}"></div>
            <div id="productChooser"></div>    
        </div>
    }
</div>

<script type="text/javascript">
    function ProductSelectionViewModel(data){
        var self = this;

        // additional javascript/knockout logic here...
    }

    $(function (){
        window.viewModel = new ProductSelectionViewModel(@Html.Json(Model));

        ko.applyBindings(window.viewModel, $("#productForm")[0])
    })
</script>
@section scripts{
    @Html.Partial("ProductChooserScript", Model)
}

ProductChooserScript

<script type="text/javascript">
(function (){
     ko.components.register('product-chooser', {
    viewModel: {
        createViewModel: function (params) {
            var chooserModel = new ViewModel(params);
            var modalHtml = $('#product-chooser-template').html();
            $('#productChooser').append(modalHtml);
            var el = $('#MyModal')[0];
            ko.applyBindings(chooserModel, el);
            initializeControl(chooserModel);
            return chooserModel;
        }
    },
    template: $('#product-chooser-preview-template').html()
});
})();
</script>

【讨论】：