Knockout JS, complex form and mvc

It is not a week I have got familiar with Knockout.js. First of all let me tell you that currentlyI spend most of my time developing a web application connected to abas ERP system using a java based web service. The web application is an mvc app, and to make it more like to abas windows client, I am trying my best, and as you know, to make a web app more usable, you HAVE TO use javascript, but use it with caution. Thanks to js libraries developed in last few years, writing a clean and maintainable js code has been more simple than before.

Ok telling story is enough. In my web app, for the first time I decided to use a MVVM js library!. In this phase I have to create a payment form which includes card lines as it items. So to make it easier for user to add items to payment, this time I used knockout to bind invoice items, which are editable. In the past I manually added line item to table and handling edition to any part of line item was a headache, because reflecting the changes made to table containing the items was a lot of hard code.

I am not going to describe the whole solution here, mainly I am going to tell you how to add this line items values to form, to have them as a list in server side (Here server side code is mvc). Before reading the rest of this article, I recommend reading this tutorial from knockoutjs.

Say our payment model is like below:

public class PayemntModel
public string Name{get;set;}
public List Items{get;set;}
public class Card
public decimal Amount{get;set;}
//... other properties

and this is our form handler in server side:

public ActionResult Form(PayemntModel model)
// handle the data

and lets go to client side.

In your clients side code, having form field for “Name” property is easy :

<input type="text" id="Name" name="Name">

but for your card list, can not have something like this:

//first item
<input type="text" id="Amount" value="5600" name="Amount">
//second item
<input type="text" id="Amount" value="2300" name="Amount">

why? first of all modelbinding in mvc side cant detect your list, and also if it find, it can not distingush first item from second.

So every line should have an index and also a unique Id, something like this:

<div data-bind="foreach: Cards">
<input type="hidden" name="Cards.index" value="0">
<inpu value="5600" id="Cards_0__Amount" name="Cards[0].Amount"><input type="hidden" name="Cards.index" value="1">
<inpu value="2300" id="Cards_1__Amount" name="Cards[1].Amount">

How you achieve this with knockout?! after some googling I found that you can easily change attributes of an HTML tag.!!

Here how it is done :

<div data-bind="foreach: Cards">
<input type="hidden" name="Cards.index" data-bind="value: $index()">
<input data-bind="value: Amount,attr: {'id': 'Cards_' + $index() + '__Amount','name':'Cards['+$index()+'].Amount'}" type="hidden">

you can use $index() to easily separate item lines and give them unique id. It is a function in knockout that return index of each item in an observablearray.

Thats it!



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s