KnockoutMvc tuorial of helloworld not working

Question

I am following this tutorial for knockoutmvc. Following is my code.

View : cshtml

@using PerpetuumSoft.Knockout
@model DynamicRowAdd.Models.HelloWorldModel

@{
    var ko = Html.CreateKnockoutContext();
}

@{
    ViewBag.Title = "View";
}

<h2>View</h2>

<p>First name: @ko.Html.TextBox(Model1=>Model1.FirstName)</p>
<p>Last name: @ko.Html.TextBox(Model1=>Model1.LastName)</p>
<h2>Hello, @ko.Html.Span(Model1=>Model1.FullName)!</h2>
@ko.Apply(Model)

Model :

using DelegateDecompiler;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;

namespace DynamicRowAdd.Models
{
    public class HelloWorldModel
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }

        [Computed]
        [ScriptIgnore]
        [JsonIgnore]
        public string FullName
        {
            get { return FirstName + " " + LastName; }
        }
    }
}

Controller :

using DynamicRowAdd.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using PerpetuumSoft.Knockout;

namespace DynamicRowAdd.Controllers
{
    public class HelloWorldController : Controller
    {
        // GET: HelloWorld
        public ActionResult Index()
        {
            return View(new HelloWorldModel
            {
                FirstName = "Steve",
                LastName = "Sanderson"
            });
        }
    }
}

Here, when i run the code I should get the output such as the output mentioned in the tutorial. But I am not getting output as it is there in the tutorial. Instead I am getting blank in firstname, lastname and fullname.

What possibly I am doing wrong.?

Answer 1

The examples are missing one key part of the setup: you have to include the necessary javascript files in your layout/view in order to Knockout and knockoutmvc work correctly.

This is described in the QuickStart section

Add links to next js-files:

<script src="@Url.Content("~/Scripts/jquery-x.y.z.min.js")" type="text/javascript"></script> <!-- Use your version of jQuery -->
<script src="@Url.Content("~/Scripts/knockout-x.y.z.js")" type="text/javascript"></script> <!-- Use your version of knockout -->
<script src="@Url.Content("~/Scripts/knockout.mapping-latest.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/perpetuum.knockout.js")" type="text/javascript"></script>