KnockoutMvc tuorial of helloworld not working - knockout-mvc

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>