Misunderstanding of viewmodels relations on client and server side

Question

I have basic viewmodel on server-side, let it be on C# language and ASP.NET Core server-side, for example:

public class BookViewModel
{
     public string Id { get; set; }

     public string Name { get; set; }

     //other properties removed for brevity
}

Then, I send it to client page.

On client-side, I have rich UI with some Javascript MVVM framework.

These frameworks manipulates with viewmodels as I understand. So, the trouble, is that I don't understand what we really must do with viewmodels on client-side?

I mean, If I want send my viewmodel from client to server via Ajax, I need explicitly define all properties of that viewmodel. So, I need explicitly define all my server-side viewmodels, as Javascript objects in special file, whatever. How can I avoid such routine work?

Answer 1

1. Using tooling. Most mature frameworks have mechanisms to produce client code from a server model/wsdl/schema etc. Sometimes these are known as code generators. Typically something is inspected on the server side and then produces code that is native to the framework being used on the client.

Be aware that auto-generated code can sometimes be less then optimal but it can be tweaked as needed.

Here's an example:

C# to Knockout View Model

2. The client model is sometimes different than the server's model so sometimes there a translation layer between the server model and the client. The items that come down from the server are not used directly, but translated from the message into the client's model.

3. Code it manually. Yes this is laborious/tedious.