• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 164
  • Last Modified:

Getting KO'd

I recently completed a tutorial on using Knockout, Entity Framework and Ajax.
The tutorial works great. I followed everything step by step and it was great.

Now I am trying to apply the steps to my own solution. It is a "Code First, Existing Database" project and it will really only be used as an input application. The applicants won't need to edit or delete or view any data after submit.

I am getting a confusing error on the save function: 0x800a139e - JavaScript runtime error: Pass a function that returns the value of the ko.computed.


I believe I have done the knockout mapping, the controller save, and the Create view script references exactly as the course demonstrates.
The relevant code:
FamilyViewModel.js
FamilyViewModel = function (data) {
    var self = this;
    ko.mapping.fromJS(data, {}, self);
}

self.save = function(){
    $.ajax({
    url: "/Family/Save/",
    type: "POST",
    data: ko.toJSON(self),
    contentType: "application/json",
    success: function(data) {
        if(data.FamilyViewModel != null)
            ko.mapping.fromJS(data.FamilyViewModel, {}, self)
    }
});
}

Open in new window


The Save method
        public JsonResult Save(FamilyViewModel familyViewModel)
        {
            Families families = new Families();
            families.FamilyName = familyViewModel.FamilyName;
            families.PhoneNumber = familyViewModel.PhoneNumber;
            families.Email = familyViewModel.Email;
            families.Address1 = familyViewModel.Address1;
            families.Address2 = familyViewModel.Address2;
            families.City = familyViewModel.City;
            families.State = familyViewModel.State;
            families.ZipCode = familyViewModel.ZipCode;
            families.MyPreferedSite = familyViewModel.MyPreferedSite;
            families.FamilyIncome = familyViewModel.FamilyIncome;

            _familyContext.Families.Add(families);
            _familyContext.SaveChanges();

            familyViewModel.MessageToClient = string.Format("Thank you {0}. Your family profile has been created.", families.FamilyName);

            return Json(new {familyViewModel});

        }

Open in new window


The Create.cshtml page
@model FamilyProfile.Web.ViewModels.FamilyViewModel
@using System.Web.Script.Serialization

@{
    ViewBag.Title = "Create Family Profile";
}

@{ string data = new JavaScriptSerializer().Serialize(Model);}

@section scripts
{
    <script src="~/Scripts/knockout-3.2.0.js"></script>
    <script src="~/Scripts/knockout.mapping-latest.js"></script>
    <script src="~/Scripts/familyViewModel.js"></script>
    <script type="text/javascript">
        var familyViewModel = new FamilyViewModel(@Html.Raw(data));
        ko.applyBindings(familyViewModel);
    </script>
}

<h2>@ViewBag.Title</h2>
<h4 data-bind="text: MessageToClient">@Html.DisplayFor(model => model.MessageToClient)</h4>

<div>
    <div>
        <label>Family Name</label>
        <input data-bind="value: FamilyName"/>
    </div>
    <div>
        <label>Family Phone</label>
        <input data-bind="value: PhoneNumber"/>
    </div>
    <div>
        <label>Family Email</label>
        <input data-bind="value: Email"/>
    </div>
    <div>
        <label>Street Address</label>
        <input data-bind="value: Address1"/>
    </div>
    <div>
        <label>Apt or Unit</label>
        <input data-bind="value: Address2"/>
    </div>
    <div>
        <label>City</label>
        <input data-bind="value: City"/>
    </div>
    <div>
        <label>State</label>
        <input data-bind="value: State"/>
    </div>
    <div>
        <label>Zip Code</label>
        <input  data-bind="value: ZipCode"/>
    </div>
    <div>
        <label>Income Range</label>
        <input data-bind="value: FamilyIncome"/>
    </div>
</div>
<p><button data-bind="click: save">Save</button></p>

Open in new window

0
wdarnellg
Asked:
wdarnellg
1 Solution
 
Terry WoodsIT GuruCommented:
I've done a bit of Knockout, but not very recently. I think the self.save function needs to go within the FamilyViewModel template.

That's how it's done for the save function against the Cart in this example: http://knockoutjs.com/examples/cartEditor.html
0
 
wdarnellgAuthor Commented:
That was it!
Thank you very much!
wdg
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now