Referencing @Section Scripts within Div

Question

Having issues calling @section scripts{...} within a div. Currently, it states Uncaught Error: Unknown component 'product-chooser.

Question: How can I call my partial from within a div so that it puts the content near the top of the page?

Section of code giving me issues:

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

View: 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>

Additional Notes:

If I remove the div surrounding @section scripts{...} and put it at the bottom of the page, it renders the partial, but the partial gets rendered at the bottom of the page (not the desired results), I'd like it to get rendered near the top.

Please note that I did research... The other sources did not resolve this issue.

score 2 · Answer 1 · answered Feb 18 '16 at 14:59

First, the location in the view code where you define a section has no bearing on anything. In other words, just because you define it within that div doesn't mean the content of the section will end up there. The section is rendered wherever the layout calls RenderSection.

Second, you can only define sections in layouts or views that utilize layouts. Partial views cannot define sections, because partial views don't reference a layout.

score 0 · Accepted Answer · answered Feb 18 '16 at 16:19

After further research, I was able to resolve my issue. The error was with my knockout... I moved my @section scripts{...} to the bottom of my view and then created a div with an id of productChooser.

Previously, my ko.components.register... was appending the body, which was getting rendered at the bottom of the page. After changing the append to my productChooser, it rendered as expected.

My View: 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>

Referencing @Section Scripts within Div

2 Answers2