Creating ASP MVC custom views with automatic ng-bind

Question

I am thinking of doing the bind coding task on the server side. Let me describe. In ASP MVC i was making a viewmodel for each page then by taking help of @Html.EditorFor and others, I was making the view part. Now i want to make a logical relation between server side ViewModel and the one in the Scope of angular controller. I have an idea of making a DisplayTemplate and a EditorTemplate for each type of field then I put the ng-bind attribute in them, so every thing sounds good except two:

1. How can I make an IScope of elements on the page automatically?

2. In the templates I should use ng-model for example with a text in value. I want the text be the name of the field that this template goes on its UIHint. So how to do that job?

Edit

I forgot to say that I am using TypeScript on client side, the question one was all about this. I want to make an interface (IPageScope) for the controller over the viewmodel used in that.

Second problem solved

How to get model's field name in custom editor template

I was looking for something like this:

@{ string modelName = ViewData.ModelMetadata.ContainerType.Name + "." + ViewData.ModelMetadata.PropertyName;}

<h3 ng-model="@modelName">
    Hello World @ViewData.ModelMetadata.ContainerType || @ViewData.ModelMetadata.ContainerType.Name || @ViewData.ModelMetadata.PropertyName || @ViewData.TemplateInfo.HtmlFieldPrefix
</h3>

Now the model name is generated by the class name and property name.

What about the first one? is there any way to auto generate this scope parameters of ViewModel in an IScope interface in TypeScript file for further use?

Answer 1

I solved the problem by searching the web, and I am posting my achievements whole together here for you all.

First I replaced using the default display and editor template of any field of my view model to the ones that have ng-model attribute like the following view model:

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Runtime.Serialization;
using System.Text;
using System.Threading.Tasks;
using Takhfifestan.Data;
using TypeLite;

namespace Takhfifestan.Service.Models
{
    [DataContract(Name = "ProductListViewModel")]
    [KnownType(typeof(ProductListViewModel))]
    [TsClass]
    public class ProductListViewModel
    {
        public long Id { get; set; }
        [UIHint("CodeNumber")]
        public string ProductCode { get; set; }

    }
}

Then I created those templates something like below:

@{ string modelName = ViewData.ModelMetadata.ContainerType.Name + "." + ViewData.ModelMetadata.PropertyName;}

<h3 ng-model="@modelName">
    Hello World 
</h3>

Then I needed an IScope (that is my client side view model) and the TextTemplate was a good solution. but another person have done this before as perfect as possible:

http://type.litesolutions.net/

But this library needs a little change:

<#@ template debug="false" hostspecific="True" language="C#" #>
<#@ assembly name="$(TargetDir)Takhfifestan.Service.dll" #>
<#@ assembly name="$(TargetDir)TypeLite.dll" #>
<#@ assembly name="$(TargetDir)TypeLite.Net4.dll" #>
<#@ assembly name="$(TargetDir)$(TargetFileName)" #>

<#@ import namespace="TypeLite" #> 
<#@ import namespace="TypeLite.Net4" #> 
<#@output extension=".d.ts"#>

 <#@include file="Manager.ttinclude"#>
<# var manager = Manager.Create(Host, GenerationEnvironment); #>

<# var ts = TypeScript.Definitions()
        .WithReference("Enums.ts")
        .ForLoadedAssemblies()
        .WithTypeFormatter((type, f) => "I" + ((TypeLite.TsModels.TsClass)type).Name + "Scope");
#>

<#= ts.Generate(TsGeneratorOutput.Properties) #>

<# manager.StartNewFile("Enums.ts"); #>
<#= ts.Generate(TsGeneratorOutput.Enums) #>
<# manager.EndBlock(); #>
<# manager.Process(true); #>

Now the IScope interfaace is something like this:

declare module Takhfifestan.Service.Models {
    interface IProductListViewModelScope {
        Id: number;
        ProductCode: string;
    }
}

Now just think about the page! every thing sounds very well. I will put the elements by Html helper and they will contain appropriate ng-model or any binding stuff. and the IScope interface that I use in the controller input will be a new interface that just needs to implement the generated "IProductListViewModelScope" and now I can say that much of the work is done!