Skip to content
C#
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
KnockoutCreator
.gitignore
KnockoutCreator.sln
readme.md

readme.md

Knockout Creator

Knockout.js (http://knockoutjs.com/) is an opensource javascript library that simplifies UI and javascript. If you are using c#, you end up duplicating the view model, both in Javascript and in c#. This library will convert your c# viewmodel, straight into knockout viewmodel.

Creating your viewmodel

namespace knockoutExample { public class Restaurant : Knockout.ViewModel { public int RestaurantId { get; set; } public string Name { get; set; }

}

}

Setting up your controller

public string KnockOutJs() { restViewModel = new Restaurant(); koCreator = new Knockout.KoCreator()

//Set your controller name
koCreator.PageName = "Home";

//Add your viewmodel Restaurant is the name of the model we want in javascript
koCreator.AddViewModel("Restaurant", restViewModel.GetType());

//Add a javascript function subscription.  This will call the javascript function test() everytime the name is changed
koCreator.AddJsSubscription("Name","test");

//This will return the javascript, we pass in the controller so that Knockout Creator can bind subscriptions
return koCreator.GenerateJs(this);

}

Creating a method to be called using AJAX

//Add a custom attribute specifying the variable that when changed will trigger this via AJAX [KoMethod("RestaurantId")]

//The method accepts one attribute, our viewmodel. This will be passed back using AJAX public JsonResult GetRestaurantById(knockoutExample.Restaurant viewModel) {

//get the restaurantId that has been posted
int restaurantId = viewModel.RestaurantId;

//Load the record from the db
Restaurant restaurant = _restaurantRepository.Load(restaurantId);

// set the viewmodel name
    viewModel.Name = restaurant.Name

//return the viewmodel back to the browser
return Json(viewModel);

}

Setting up your view

<script type="text/javascript" language="javascript"> @Html.Action("KnockOutJs","Home") </script>

What does Knockout creator rendered in the browser

<script type="text/javascript" language="javascript"> $(function() {var baseModel = {RestaurantId: ko.observable(), Name: ko.observable(), $(function() {var Restaurant = ko.mapping.fromJS(baseModel); window.Restaurant = Restaurant; ko.applyBindings(window.Restaurant);Restaurant.Name.subscribe(function(){test()}); }); }); </script>

So what now?

Everytime the RestaurantId is updated a call will be made to the server and will run GetRestaurantById.

You can’t perform that action at this time.