使用 Angular JS 和 asp.net 进行动态调查答案

【问题标题】：Dynamic survey with Angular JS and asp.net使用 Angular JS 和 asp.net 进行动态调查
【发布时间】：2016-08-23 02:05:52
【问题描述】：

我正在尝试构建一个类似于调查猴子的应用程序。我打算使用 AngularJS 和 Asp.net MVC。我在数据库中有 SurveyQuestion 表，其中包含有关问题文本和控件类型的信息。现在假设我们在 SurveyQuestion 表中有两行表示调查页面上有两个文本框问题。我想从数据库加载问题文本，并根据问题类型在 UI 中显示适当的 HTML 控件（在这种情况下，它将只是两个文本框）使用 angular。我为文本框创建了角度控制器，并使用 ng-model 在两个文本框中填充了值，但是如果我更改一个文本框中的值，它会更改另一个文本框中的值，我相信这是 ng-model 的目的。你能告诉我如何接近这里吗？当使用文本框外的点击时，我还需要将文本框的响应保存到数据库，即在 ng-blur 事件上我想将响应保存到数据库。

【问题讨论】：

标签： angularjs angular

【解决方案1】：

将指令设置为指向返回与正确模型相关的视图的 MVC 操作。

类似/forms/vendor

并让它构建模型的 html，在 MVC 中应该看起来像这样

public class FormController : Controller
{
    public ActionResult Vendor()
    {
        return View(new Vendor());
    }
}

视图会返回一个像这样简单的东西

@model Agile.Core.Models.Vendor


@Html.EditorForModel()

然后连接 EditorTemplate cshtml 文件，为您提供您想要以这样的角度呈现的值

String.cshtml

@using Agile.Utilities.Extensions
<input type="text"
       class="form-control"
       required="@ViewData.ModelMetadata.IsRequired"
       ng-model="@ViewData.GetModelName()"
       id="@ViewData.TemplateInfo.GetFullHtmlFieldId("").ToCamelCase()"
       name="@ViewData.TemplateInfo.GetFullHtmlFieldName("").ToCamelCase()">

这是我会使用的一般方法

【讨论】：

是否可以在不使用任何剃刀视图的情况下完全使用 Angular。我想使用 MVC 来加载 index.cshmtl，只有页眉和页脚。
您需要在某些时候使用反射将元数据从 c# 模型提取到您的 Angular 应用程序可以使用的东西中，所以我认为这是最简单的方法。