使用自动ng-bind创建ASP MVC自定义视图

Question

我正在考虑在服务器端执行绑定编码任务。让我来形容一下。在ASP MVC中，我正在为每个页面创建一个viewmodel，然后通过@ Html.EditorFor和其他人的帮助，我正在制作视图部分。现在我想在服务器端ViewModel和角度控制器范围之间建立逻辑关系。我想为每种类型的字段制作一个DisplayTemplate和一个EditorTemplate然后我将ng-bind属性放在其中，所以除了两个之外，每个东西听起来都很好：

1. 如何自动在页面上制作元素的IScope？
2. 在模板中，我应该使用ng-model，例如使用值中的文本。我希望文本是该模板在其UIHint上的字段名称。那么该怎么做呢？

编辑

我忘了说我在客户端使用TypeScript，问题就在于此。我想通过在其中使用的viewmodel为控制器创建一个接口（IPageScope）。

第二个问题解决了

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

我在寻找这样的东西：

@{ 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>

现在，模型名称由类名和属性名生成。

第一个怎么样？有没有办法在TypeScript文件的IScope接口中自动生成ViewModel的范围参数以供进一步使用？

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

现在Scope接口是这样的：

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

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