3

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?

4

1 回答 1

1

我通过搜索网络解决了这个问题，并将我的成就一起发布在这里给大家。

首先，我将视图模型的任何字段的默认显示和编辑器模板替换为具有 ng-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; }

    }
}

然后我创建了这些模板，如下所示：

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

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

然后我需要一个 IScope（这是我的客户端视图模型），而 TextTemplate 是一个很好的解决方案。但是另一个人以前尽可能完美地做到了这一点：

http://type.litesolutions.net/

但是这个库需要一点改变：

<#@ 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); #>

现在 IScope 接口是这样的：

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

现在想想页面！每件事听起来都很好。我将通过 Html 助手放置元素，它们将包含适当的 ng-model 或任何绑定的东西。我在控制器输入中使用的 IScope 接口将是一个新接口，只需要实现生成的“IProductListViewModelScope”，现在我可以说大部分工作已经完成！

于 2016-01-04T10:27:53.300 回答