KO binding not working in IIS 6

Question

I have written small piece of code which is working fine when I am debugging it through VS 2010. ( i.e. Using 'Visual Studio Development Server.)

After that I changed project setting and clicked on 'Use Local IIS Web Server' ( automatically created virtual directory) when I run application I found that KO code is not at all getting executed. Could not see text box populated with default values.

Do we have to take any special care while deploying code to IIS?

Below is my piece of code.

@{
    ViewBag.Title = "Home Page";
}
<div>
    <div>
        <div>
            <label>
                Name</label>
            <input type="text" name="txtID" data-bind="value: ID" />
        </div>
        <div>
            <label>
                First Name</label>
            <input type="text" name="txtFirstName" data-bind="value: FirstName" />
        </div>
        <div>
            <label>
                Last Name</label>
            <input type="text" name="txtLastName" data-bind="value: LastName" />
        </div>
        <div>
            <label>
                Full Name</label>

            <input type="text" name="txtFullName" data-bind="value: FullName" />

        </div>
    </div>
</div>
@section scripts{
    <script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var ViewModel = function () {
                var self = this;
                self.FirstName = ko.observable("Initial Name");
                self.LastName = ko.observable("Last Name");
                self.ID = ko.observable(100);
                self.FullName = ko.computed({
                    read: function () {
                        return self.FirstName() + " " + self.LastName();
                    },
                    write: function (value) {
                        var lastIndex = value.lastIndexOf(" ");
                        if (lastIndex > 0) {
                            self.FirstName(value.substring(0, lastIndex));
                            self.LastName(value.substring(lastIndex + 1));
                        }
                    }
                });
            }
            var viewModel = new ViewModel();
            ko.applyBindings(viewModel);

            var t = function () {
                alert(viewModel.FullName());
            };
        });
    </script>
}

Answer 1

Your script references are probably broken because they are relative references and you are using now a virtual directory in IIS.

You need to use the Url.Content helper method where you can specify your root directory with ~ which will take care of the virtual directories and generates the correct urls for you:

<script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript">
</script>       
<script src="@Url.Content("~/Scripts/knockout-2.1.0.js")" type="text/javascript">
</script>