Products By Category (Knockout Model-View-View Model Pattern: Local json Javascript)

Save to JSON

»ShopNameCart: Northwind ▶ShopNameCart: Household items »KnockOut! List Products By Category (local Parent Child Foreign Key View Model) ▶KnockOut! Client Side Local Diffferent Model Source »A jQuery menu/accordian Using KnockOut data Model

 
    ko.toJS IEnumerable FirstOrDefault DbContext
        public ActionResult Index()
        {
            var initialState = new [] {
                new Gift { Id=1, Title = "Tall Hat", Price = 49.95 },
                new Gift { Id=2, Title = "Long Cloak", Price = 78.25 }
            };
            //return View(initialState);
            return View( db.Gifts.ToList() );  /* gMUPPET */ // return View( db.Gifts.ToArray() );
        }

        [HttpPost]
        public ActionResult Update( IEnumerable< Gift > gifts )
        {
            foreach (Gift g in gifts)
            {
                var record = db.Gifts.FirstOrDefault(x => x.Id == g.Id);    /* MUPPET */

$.ajax({
    url: url,
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    data: ko.toJSON(this.gifts),
    success: function (status) {
        var now = new Date();
        $("#ChatBack").html('Saved ' + now.toString("DD-MMM-YYYY hh:mm:ss") ); //alert(status);
    }
});

// MANUAL|DEVELOPER

 1: function customerVM() {
 2:     var self = this;
 3:     self.customers = ko.observableArray([]);
 4:     self.getCustomers = function () {
 5:         self.customers.removeAll();
 6:         $.getJSON("/api/customer/", function (data) {
 7:             $.each(data, function (key, val) {
 8:                 self.customers.push(new customer(val.Id, val.Name, val.Age, val.Comments));
 9:             });
 10:         });
 11:     };
 12: }

 $(function()
 {
        var model = @Html.Raw(Json.Encode(Model));
        var viewModel = ko.mapping.fromJS(model);
        ko.applyBindings(viewModel);

 });

http://stackoverflow.com/questions/11055336/how-to-use-knockout-js-with-asp-net-mvc-viewmodels?answertab=votes#tab-top
How do you use html helpers with knockout.js

This is easy:
@Html.TextBoxFor(model => model.CourseId, new { data_bind = "value: CourseId" })

Where:
•value: CourseId indicates that you are binding the value property of the input control with the CourseId property from your model and your script model

The result is:
<input  data-bind="value: CourseId" 
         data-val="true" 
  data-val-number="The field CourseId must be a number." 
data-val-required="The CourseId field is required." 
               id="CourseId" 
             name="CourseId" 
             type="text" 
            value="12" 
/>

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
<div data-bind="foreach: games">
    <div class="game-block">
        <div><a data-bind="attr: { href: 'Game/Edit/' + id.peek() }" ><img data-bind=" attr: { src: imageUrl, alt: name }" /></a></div>
        <div    data-bind="text: name"              class="game-name">           </div>
	    <div    data-bind="dateString: releaseDate" class="game-name">ff-fff-ffff</div>
        <a      data-bind="attr: { href: 'Game/Edit/' + id.peek() }" >ShowItem</a>
    </div>
</div>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

  [HttpGet]
    public ActionResult Index()
    {
        var m = new CourseVM { CourseId = 12, CourseName = ".Net" };

        m.StudentViewModels.Add(new StudentVm { ID = 545, Name = "Name from server", Lastname = "last name from server" });

        return View(m);
    }

    [HttpPost]
    public ActionResult Index(CourseVM model)
    {
        if (!string.IsNullOrWhiteSpace(model.StudentsSerialized))
        {
            model.StudentViewModels = JsonConvert.DeserializeObject< List <StudentVm > > (model.StudentsSerialized);
            model.StudentsSerialized = string.Empty;
        }

        if (!string.IsNullOrWhiteSpace(model.SelectedStudentsSerialized))
        {
            model.SelectedStudents = JsonConvert.DeserializeObject< List < StudentVm > > (model.SelectedStudentsSerialized);
            model.SelectedStudentsSerialized = string.Empty;
        }

        return View(model);
    }

public class CourseVM
{
    public CourseVM()
    {
        this.StudentViewModels = new List<StudentVm>();
        this.SelectedStudents = new List<StudentVm>();
    }

    public int CourseId { get; set; }

    [Required(ErrorMessage = "Course name is required")]
    [StringLength(100, ErrorMessage = "Course name cannot be this long.")]
    public string CourseName { get; set; }

    public List<StudentVm> StudentViewModels { get; set; }
    public List<StudentVm> SelectedStudents { get; set; }

    public string StudentsSerialized { get; set; }
    public string SelectedStudentsSerialized { get; set; }
}

public class StudentVm
{
    public int ID { get; set; }
    public string Name { get; set; }
    public string Lastname { get; set; }
}



snippet: 
    // clears observable array and loads the person results 
    function processResults(data, peopleArray) {
        log("Clears observable array and loads the person results.");
        peopleArray.removeAll();
        var persons = data.results;
        persons.forEach(function (person) {
            log("adding " + person.FirstName._latestValue + " " + person.FamilyName._latestValue);
            peopleArray.push(person);
        });
    }

// MANUAL|DEVELOPER

http://www.asp.net/mvc/tutorials/getting-started-with-ef-using-mvc/reading-related-data-with-the-entity-framework-in-an-asp-net-mvc-application
The contoso university