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

Question

我正在考虑在服务器端执行绑定编码任务。让我描述一下。在 ASP MVC 中，我为每个页面制作了一个视图模型，然后在@Html.EditorFor 和其他人的帮助下，我制作了视图部分。现在我想在服务器端 ViewModel 和 angular 控制器范围内的视图模型之间建立逻辑关系。我有一个想法，为每种类型的字段制作一个 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>

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

第一个呢？有什么方法可以在 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); #>

现在IScope界面是这样的：

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

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

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

Creating ASP MVC custom views with automatic ng-bind

asp.net-mvc

model-binding

view-templates

angularjs

typescript

编辑

第二个问题解决了