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

【问题标题】：Creating ASP MVC custom views with automatic ng-bind使用自动 ng-bind 创建 ASP MVC 自定义视图
【发布时间】：2016-04-07 15:56:02
【问题描述】：

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

如何自动在页面上创建元素的 IScope？
在模板中，我应该使用 ng-model，例如带有文本值。我希望文本是此模板在其 UIHint 上的字段名称。那么如何完成这项工作呢？

编辑

我忘了说我在客户端使用 TypeScript，问题之一就是关于这个。我想在其中使用的视图模型上为控制器创建一个接口（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 的这个范围参数以供进一步使用？

【问题讨论】：

（关于angularjs，我对一无所知），但是如果您尝试在页面级别做某事，似乎您可以创建一个布局（可选将模型声明为@model object)，这将在页面周围创建一个范围（除非您有多个布局）。
@ErikPhilips 感谢您的建议。但我的意思是 angularjs 的范围标识符。让我稍微放松一下这个问题。我正在寻找一个 TextTemplate 来根据 cs 模型生成 TypeScript 模型。那么我的问题就彻底解决了。
如果您想要将值呈现到 html 中，您可以使用 ng-init 来初始化范围属性。 docs.angularjs.org/api/ng/directive/ngInit
也作为注释.. ng-model 仅适用于输入、选择或文本区域元素。它不会对标题做任何事情。

标签： angularjs asp.net-mvc typescript model-binding view-templates

【解决方案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”，现在我可以说大部分工作已经完成！

【讨论】：