Category Archives: Java script

Knockout JS, complex form and asp.net 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 asp.net 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 asp.net 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:

[HttpPost]
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">
</div>

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">
</div>

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!

 

Advertisements

Create new record using current form values in dynamic crm

Currently I am working on a new customization for dynamics CRM customization that requires to copy fields from a form and create a new record using JS.

Copying text or numeric values was easy, like the below :

var attValue = Xrm.Page.data.entity.attributes.get(attname).getValue();

But for Optionset or Money attributes the scenario was different. For those types to copy to you have to do :

var attVal = Xrm.Page.data.entity.attributes.get(attname).getValue();
var newattVal= attVal!=null ? {Value:attVal.toString()}:null;

It meas you have read “Value” from the atttribute to get what you want. Finally yo save a new record with values I read using current form, I utilized the CrmRestKit library like below:

CrmRestKit.Create( 'entityname', listofaatributes, false )
				.fail( function(){
				//console.log('error accoured');
				} 
				)
				.done( function ( data, status, xhr ) { 
				

				} );