knockout-mvc - ノックアウトと mvc を使用してフォーム データを送信する際のエラー

Question

@model NewDemoApp.Models.DemoViewModel
@{
    ViewBag.Title = "Home Page";
}


@*<script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>*@
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script src="@Url.Content("~/Scripts/knockout-3.3.0.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    var viewModel; 

    var compViewModel, userViewModel;

    $(document).ready(function () {

        $(".wizard-step:visible").hide();
        $(".wizard-step:first").show(); // show first step
        $("#back-step").hide();


        var result = @Html.Raw(Json.Encode(Model));

        var viewModel = new DemoViewModel(result.userViewModel);

        //viewModel.userViewModel.FirstName = result.userViewModel.FirstName;
        //viewModel.userViewModel.LastName = result.userViewModel.LastName;
        //viewModel.userViewModel.State = result.userViewModel.State;
        //viewModel.userViewModel.City = result.userViewModel.City;
        ko.applyBindings(viewModel);

    });

    var userVM = function(){

        FirstName = ko.observable(),
        LastName = ko.observable(),
        State = ko.observable(),
        City = ko.observable()
    };

    function DemoViewModel(data) {

           var self = this;



           self.userViewModel = function UserViewModel(data) {
               userVM.FirstName = data.FirstName;
               userVM.LastName = data.LastName;
               userVM.State = data.State;
               userVM.City = data.City;
           }

           self.Next = function () {
               var $step = $(".wizard-step:visible"); // get current step
               var form = $("#myFrm");

               var validator = $("#myFrm").validate(); // obtain validator
               var anyError = false;
               $step.find("input").each(function () {
                   if (!validator.element(this)) { // validate every input element inside this step
                       anyError = true;
                   }

               });

               if (anyError)
                   return false; // exit if any error found



               if ($step.next().hasClass("confirm")) { // is it confirmation?
                   $step.hide().prev(); // hide the current step
                   $step.next().show(); // show the next step
                   $("#back-step").show();
                   $("#next-step").hide();
                   //$("#myFrm").submit();
                   // show confirmation asynchronously
                   //$.post("/wizard/confirm", $("#myFrm").serialize(), function (r) {
                   //    // inject response in confirmation step
                   //    $(".wizard-step.confirm").html(r);
                   //});

               }
               else {
                   if ($step.next().hasClass("wizard-step")) { // is there any next step?
                       $step.hide().next().fadeIn();  // show it and hide current step
                       $("#back-step").show();   // recall to show backStep button
                       $("#next-step").show();
                   }
               }
           }

           self.Back = function () {

               var $step = $(".wizard-step:visible"); // get current step
               if ($step.prev().hasClass("wizard-step")) { // is there any previous step?
                   $step.hide().prev().fadeIn();  // show it and hide current step

                   // disable backstep button?
                   if (!$step.prev().prev().hasClass("wizard-step")) {
                       $("#back-step").hide();
                       $("#next-step").show();
                   }
                   else {
                       $("#back-step").show();
                       $("#next-step").show();
                   }
               }
           }

           self.SubmitForm = function (formElement) {             

                   $.ajax({
                   url: '@Url.Content("~/Complaint/Save")',
                   type: "POST",
                   data: ko.toJS(self),
                   done: function (result) {                       
                       var newDiv = $(document.createElement("div"));
                       newDiv.html(result);
                   },
                   fail: function (err) {

                       alert(err);
                   },
                   always: function (data) {

                       alert(data);
                   }
               });
           }

          self.loadData = function () {

               $.get({
                   url: '@Url.Content("~/Complaint/ViewComplaint")',

                   done: function (data) {
                       debugger;
                       alert(data);

                       self.compViewModel(data);
                       self.userViewModel(data);

                   },
                   fail: function (err) {
                       debugger;
                       alert(err);
                   },
                   always: function (data) {
                       debugger;
                       alert(data);
                   }
               });


           }

       }







</script>




<form class="form-horizontal" role="form" id="myFrm">
    <div class="container">
        <div class="row">
            <div class="col-md-3">

            </div>
            <div class="col-md-6">
                <div class="wizard-step">

                </div>
                <div class="wizard-step" >
                    <h3> Step 2</h3>
                    @Html.Partial("UserView", Model.userViewModel)
                    <div class="col-md-3"></div>
                    <div class="col-md-6">
                        <input type="submit" id="submitButton" class="btn btn-default btn-success" value="Submit" data-bind="click: SubmitForm" />

                    </div>
                    <div class="col-md-3"></div>
                </div>
                <div class="wizard-step">
                    <h3> Step 3</h3>
                </div>
                <div class="wizard-step confirm">
                    <h3> Final Step 4</h3>

                </div>
            </div>

            <div class="col-md-3"></div>
        </div>
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <input type="button" id="back-step" class="btn btn-default btn-success" value="< Back" data-bind="click: Back" />
                <input type="button" id="next-step" class="btn btn-default btn-success" value="Next >" data-bind="click: Next" />
            </div>
            <div class="col-md-3"></div>
        </div>
    </div>
</form>

コントローラーからデータを取得し、ノックアウトを使用してバインドできます。コントローラーからデータをロードする部分ビューがあります。しかし、更新されたデータを送信すると、更新されたデータが取得されず、代わりに "FirstName" プロパティに null 参照からアクセスできませんでしたというエラーが表示されます。特にViewModelを作成して使用する正しい方法で、間違っている場所へのポインタを取得する必要があります。