如何使 Knockout.Mapping 在 ASP.NET Web App 中工作？答案

【问题标题】：How can I make Knockout.Mapping working in ASP.NET Web App?如何使 Knockout.Mapping 在 ASP.NET Web App 中工作？
【发布时间】：2016-10-21 05:02:19
【问题描述】：

我正在构建一个 MVC5 Web 应用程序并希望使用 Knockout.js 进行动态页面视图。但是，我发现 Knockout.Mapping 在我的项目中似乎无法正常工作。

正如您所见，Intellisense 不建议映射插件（我已在 _reference.js 中包含插件的引用）。当我强行完成这一行时，它无法显示第二个警报。

我是否需要做更多的事情才能使其正常工作？

@if (false)
{
<script src = "~/Scripts/knockout-3.4.0.js" ></script >
<script src = "~/Scripts/knockout.mapping-latest.js"></script >
}

<script type="text/javascript" src="@Url.Content("~/Scripts/knockout-3.4.0.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/knockout.mapping-latest.js")"></script>

//~~body~~//

<script type="text/javascript">
alert("1");
var json = '@Html.Raw(Json.Encode(Model))';
b = ko.mapping.fromJson(json); //"mapping" is not suggested when "ko." is put.
//b = ko.mapping.fromJson(Model); //mistake at the original post
ko.applyBindings(b);
alert("2"); // not showed when the previous two lines is active.
</script>

【问题讨论】：

你没有尝试在页面开头使用@model 设置模型，是吗？
是的，我在 cshtml 的开头放了“@model...”来指代 viewmodel。
我发现代码有误，没有上传截图。我已经修改了帖子，保留了原来的行。很抱歉让您感到困惑。

标签： javascript asp.net knockout.js knockout-mapping-plugin

【解决方案1】：

查看here 提供的帮助。

我认为创建映射所需的示例如下：

ko.mapping.fromJS(@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)))

【讨论】：

它不起作用...我检查了 Newtonsoft 软件包是否安装正确。无论如何，谢谢你的建议。

【解决方案2】：

试试这个。

 var ViewModel = function() {
   var self = this;

   self.formData2 = ko.mapping.fromJS(@Html.Raw(Json.Encode(Model)));
 }

在你的控制器中：

public ActionResult Index()
    {

        return View(new ExecutivoViewModel());
    }

我的 ViewModel 类：

 public class ExecutivoViewModel
{
    public ExecutivoViewModel() { }

    public ExecutivoViewModel(Executivo entidade)
    {
        this.ExecutivoId = entidade.ExecutivoId;
        this.Nome = entidade.Nome;
        this.Cargo = entidade.Cargo;
        this.Inativo = entidade.Inativo;
    }

    [DisplayName("Executivo ID")]
    [Required]
    public int ExecutivoId { get; set; }

    [DisplayName("Nome")]
    [MaxLength(50)]
    [Required]
    public string Nome { get; set; }

    [DisplayName("Cargo")]
    [MaxLength(50)]
    [Required]
    public string Cargo { get; set; }

    [DisplayName("Inativo")]
    public bool Inativo { get; set; }

【讨论】：

感谢您的回复，我会尽快尝试您建议的方法并更新结果。

【解决方案3】：

抱歉耽误了后续工作。最后我通过使用使其工作

<script src="~/Scripts/knockout-3.4.0.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>    

//~~body~~//

@section scripts{
        <script src="~/Scripts/knockout-3.4.0.js"></script>
        <script src="~/Scripts/knockout.mapping-latest.js"></script>
}

并通过放置显示建议

/// <reference path="knockout.mapping-latest.js" />

在_reference.js中引用了knockout.js的核心库之后。

【讨论】：