CODEWITHSUNDEEP
asp.net-mvcrazorknockout.jsvisual-studio-2015
Chris Swatzell
Chris Swatzell

Reputation: 13

Data binding script with Knockoutjs not generating data from within view

I am working through a book on MVC, Bootstrap, and Knockoutjs and am having difficulties generating the results I want. This is my first time with knockoutjs and I am still relatively new to coding - in general. Here is what I am trying to accomplish with this tutorial.

I have downloaded the Knockoutjs library and referenced it in my _layout.cshtml file above the @RenderSection("Scripts", false) like this..

    <environment names="Development">    
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
        <script src="~/lib/knockoutjs/dist/knockout.js"></script>
    </environment>
    @RenderSection("Scripts", false)
</body>

I then created a view named Basic.cshtml with the following code

    @{  
    ViewBag.Title = "Basic";
}

<h2>Hello <span data-bind="text: name"></span></h2>

@section Scripts {
<script>
    function ViewModel() {
        this.name = "Not Eric McQuiggan"
    };

    var viewModel = new ViewModel();
    ko.applyBindings(viewModel);
</script>
}

It may be worth noting that Intellisense is not picking up the @section Scripts syntax when I type it.

In theory, this should generate a view when I navigate to XXXX/home/basic using the _layout.cshtml and then pass in the value of the data binding from knockoutjs to show 'Hello Not Eric McQuiggan'. However, on debug, the page only shows the header text ('Hello') and nothing else.

Obviously, this means the script is not running. I have tried to find additional information on anything I may have missed but I am at a dead end. I am sure it will end up being something small, but any help would be appreciated.

Thanks in advance!

Upvotes: 1

Views: 525

Answers (1)

nemesv
nemesv

Reputation: 139758

ASP.NET Core introduces support for working with multiple environments.

If you don't specify it then the default environment is developmenet.

In your layout you are using the environment tag helper element which only writes its content to the output if you are using the matching environment.

So in development mode your HTML will look like this:

<environment names="Development">    
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<!-- this is not included in the outputted HTML when in development mode -->
<!-- <environment names="Staging,Production">
    ...
</environment> -->
@RenderSection("Scripts", false)

So Kncokout is not loaded in this case, and you should see a ko is undefined error in your browsers's console.

The fix is very easy, you need to include the Knockout reference also in the development scripts section:

<environment names="Development">    
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    <script src="~/lib/knockoutjs/dist/knockout.js"></script>
</environment>

Note: you should make sure that you have knockout.js in the correct location and ASP.NET Core is configured to server the file from that location.

Upvotes: 2

Related Questions