Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Getting KO'd

Posted on 2015-02-01
3
140 Views
Last Modified: 2015-02-02
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
Comment
Question by:wdarnellg
3 Comments
 
LVL 35

Accepted Solution

by:
Terry Woods earned 500 total points
ID: 40583515
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
 

Author Closing Comment

by:wdarnellg
ID: 40583688
That was it!
Thank you very much!
wdg
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Thoughout my experience working on eCommerce web applications I have seen applications succumbing to increased user demand and throughput. With increased loads the response times started to spike, which leads to user frustration and lost sales. I ha…
Introduction A frequently used term in Object-Oriented design is "SOLID" which is a mnemonic acronym that covers five principles of OO design.  These principles do not stand alone; there is interplay among them.  And they are not laws, merely princ…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question