Json Model Binding with Knockout and ASP.NET MVC

100%

Json Model Binding with Knockout and ASP.NET MVC

✓ Published0🌍 Public

Last edited Nov 27, 2012

Created on Nov 27, 2012

This example shows how Knockout.js binds a customer form in an ASP.NET MVC view to a client-side view model, using a custom `JsonModelBinder` to deserialize submitted JSON into a `CustomerViewModel` server-side. The `Edit.cshtml` view uses `ko.applyBindings` to connect `ko.observable` properties like `Name` and `Id` to HTML inputs via `data_bind` attributes, while `toJson` in `HtmlHelperExtensions` serializes the server model for initial client data. The `viewModels.js` file defines a `Save` method that posts JSON to the controller’s `[HttpPost] Edit` action using `ko.utils.postJson`, with jQuery unobtrusive validation wired through `$.validator.unobtrusive.parse` and a custom `submitHandler`.

AI-generated description

Similar vizzes

Loading thumbnail…

ModelJS Example

This example demonstrates reactive data binding with the Model.js library, showing how a full name updates automatically as users type into first and last name input fields. The page contains a simple HTML form where two text inputs feed values into a model instance, and a `model.when` listener combines the firstName and lastName properties into a fullName string. The full name is then rendered into a span element and logged to the console using D3.js selection and text methods. The example illustrates how Model.js tracks property dependencies and triggers callbacks asynchronously.

CCurran Kelleher

54% match

Loading thumbnail…

Razor Parse C# List To Javascript array

This example demonstrates how to pass a list of duplicate IDs from a C# Razor view into a JavaScript array for client-side processing. The code uses `Html.Raw` with `Json.Encode` to serialize the `Model.DuplicateIds` collection into a valid JSON string, which is then parsed by `JSON.parse` to create the array. It highlights a practical bridge between server-rendered data and client-side scripting, relying on ASP.NET MVC’s JSON encoding and native JavaScript’s parsing capabilities. The visualization context is implied for subsequent charting or data manipulation.

IIliaIdakiev

54% match

Loading thumbnail…

Todo

A functional todo-list interface demonstrates AngularJS 1.5.6 component architecture and two-way data binding. The component uses `ng-model` to capture input, `ng-click` to trigger an `addTodo` controller method that pushes entries into a `todos` array, and `ng-repeat` to render each item as a list element. The `| json` filter displays the array's live state in the `<pre>` block, showing how AngularJS updates the view from controller state without manual DOM manipulation.

JJ6K

50% match

Loading thumbnail…

Gist d8e5b5b093bedd65394938d6c1723aba

This example demonstrates a digital twin simulation for a production line, visualizing machine states, sensor parameters, and event history in an ASP.NET Core MVC interface. The dashboard renders machine status indicators and control consoles, with the underlying C# code using the State pattern to manage lifecycle transitions (Apagada, Operando, Falla, Mantenimiento) and the Observer pattern for state-change notifications. Sensor data and machine configurations are simulated via a `MachineFactory` and `MachineSimulatorService`, while the view leverages ViewModels to display the virtual control panel. The implementation avoids real hardware integration, focusing on a reproducible MVC architecture with task-based concurrency instead of blocking `Thread.Sleep()` calls.

IIoTeacher

47% match

Loading thumbnail…

Code Examples

This example presents a collection of interactive C# code demonstrations embedded within a webpage. Using jQuery Mobile's collapsible widgets, the page organizes four distinct programming examples, including an Xunit test, JSON deserialization from local or web sources, a threading example, and a routine to sort and retrieve the top ten pizza toppings from order data. Each example is rendered live within the page via an iframe sourced from DotnetFiddle, allowing viewers to see the code and its output directly. The layout uses HTML and CSS for structure and styling.

JJn1532

47% match

Loading thumbnail…

Full Name Greeting with ReactiveModel

This example demonstrates how to build a dynamic web page using ReactiveModel, D3 4.0, and Bootstrap. It shows two input boxes for first and last names, with a greeting message that updates live as the user types. ReactiveModel’s reactive functions compute a full name from the inputs and then a greeting, which updates the DOM via d3.select and the text method. The code uses the model’s property setters and dependency strings to propagate changes through the data flow graph.

CCurran Kelleher

46% match

Loading thumbnail…

JavaScript Object Builder

This example shows a JavaScript object builder pattern for generating test data, specifically constructing OrderModel instances through a fluent, chainable API. The code defines an `OrderModelBuilder` constructor that uses underscore.js utilities like `_.defaults` and `_.extend` to manage configuration and merge attributes for categories like paid tickets and states like sold-out. Methods such as `withPaidTicket()` and `withSoldOutState()` return new builder instances, while `build()` finalizes the object. It demonstrates the factory-style composition and reusable template for creating test fixtures in a testing or mock-data context.

GGolodhros

45% match

Loading thumbnail…

Simple Backbone WordPress Example

This example demonstrates a simple Backbone.js application that fetches and displays WordPress blog posts as a list. It shows how a collection retrieves data from the WordPress REST API endpoint and renders each post’s title, date, and content into a templated view. The code uses Backbone.Model, Backbone.Collection, and Backbone.View, along with Underscore.js templating and jQuery for DOM manipulation. The collection’s `parse` method extracts post fields from the API response, and the view’s `render` method appends each post as a list item.

FFasani

45% match