Knockout.js 如何在MVC中使用Knockout绑定静态数据

我第一次在MVC中使用淘汰赛。我试图显示的名称和姓氏将是静态的，并将显示为控制器类中定义的名称和姓氏。我已经尽了最大努力来显示数据，但它的输出并不像我预期的那样。我的代码如下： 模型类

using PerpetuumSoft.Knockout;
using PerpetuumSoft;
using DelegateDecompiler;

namespace MvcApplication20.Models
{
 public class Class1
{

    public string Number { get; set; }
    public string Name { get; set; }
    public string Surname { get; set; }

 }
}

using System.Web.Mvc;
using MvcApplication20.Models;
using PerpetuumSoft.Knockout;

namespace MvcApplication20.Controllers
{
 public class HomeController : Controller
{
    [HttpGet]
    public ActionResult Index()
    { 
        Class1 student = new Class1();
        student.Number = "B123456";
        student.Name = "Anubhav";
        student.Surname = "Chaudhary";
        return View(student);
    }

 }
}

@using System.Web.Script.Serialization;
@model MvcApplication20.Models.Class1   

<h2>Indexer</h2>
<script src="~/Scripts/knockout-2.1.0.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>
<p> Name:<span data-bind="text:Name"></span></p>
<p> SurName:<span data-bind="text:Surname"></span></p>
<script type="text/javascript">
  $(function()
 {

     var model = @Html.Raw(Json.Encode(Model))         
        ko.applyBindings(model);
  });
  </script>

这是我的控制器类

using PerpetuumSoft.Knockout;
using PerpetuumSoft;
using DelegateDecompiler;

namespace MvcApplication20.Models
{
 public class Class1
{

    public string Number { get; set; }
    public string Name { get; set; }
    public string Surname { get; set; }

 }
}

using System.Web.Mvc;
using MvcApplication20.Models;
using PerpetuumSoft.Knockout;

namespace MvcApplication20.Controllers
{
 public class HomeController : Controller
{
    [HttpGet]
    public ActionResult Index()
    { 
        Class1 student = new Class1();
        student.Number = "B123456";
        student.Name = "Anubhav";
        student.Surname = "Chaudhary";
        return View(student);
    }

 }
}

@using System.Web.Script.Serialization;
@model MvcApplication20.Models.Class1   

<h2>Indexer</h2>
<script src="~/Scripts/knockout-2.1.0.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>
<p> Name:<span data-bind="text:Name"></span></p>
<p> SurName:<span data-bind="text:Surname"></span></p>
<script type="text/javascript">
  $(function()
 {

     var model = @Html.Raw(Json.Encode(Model))         
        ko.applyBindings(model);
  });
  </script>

这是我的索引类

using PerpetuumSoft.Knockout;
using PerpetuumSoft;
using DelegateDecompiler;

namespace MvcApplication20.Models
{
 public class Class1
{

    public string Number { get; set; }
    public string Name { get; set; }
    public string Surname { get; set; }

 }
}

using System.Web.Mvc;
using MvcApplication20.Models;
using PerpetuumSoft.Knockout;

namespace MvcApplication20.Controllers
{
 public class HomeController : Controller
{
    [HttpGet]
    public ActionResult Index()
    { 
        Class1 student = new Class1();
        student.Number = "B123456";
        student.Name = "Anubhav";
        student.Surname = "Chaudhary";
        return View(student);
    }

 }
}

@using System.Web.Script.Serialization;
@model MvcApplication20.Models.Class1   

<h2>Indexer</h2>
<script src="~/Scripts/knockout-2.1.0.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>
<p> Name:<span data-bind="text:Name"></span></p>
<p> SurName:<span data-bind="text:Surname"></span></p>
<script type="text/javascript">
  $(function()
 {

     var model = @Html.Raw(Json.Encode(Model))         
        ko.applyBindings(model);
  });
  </script>

@使用System.Web.Script.Serialization；
@型号MVCAPApplication20.Models.Class1
索引器
姓名：

姓：

$（函数（）
{
var model=@Html.Raw（Json.Encode（model））
ko.应用绑定（模型）；
});

我的输出如下：

名称：

姓氏：

---

正如您所看到的，它没有显示我在“编码”部分中提供的名称，请帮助我并告诉我如何才能获得所需的输出。

您的ViewModel属性不是可忽略的可观察属性。你可以用。在这种情况下，您的javascript必须是：

$(function()
{
 var model = @Html.Raw(Json.Encode(Model))  
 var viewModel = ko.mapping.fromJS(data);
 ko.applyBindings(viewModel );
});    

---

能否确认已加载所有脚本？ 我认为这不是正确的路径（基于statndard MVC文件夹位置）

“”

这个可能是正确的：

'<script src="@Url.Content("~/Scripts/knockout-2.1.0.js")"></script>'

“”

H

这是一篇老文章。我回答这个问题是因为如果有人有这个问题，我的解决方案也会对他们有效

您必须在knockout.js插件之前添加jquery插件

---

感谢Siyamad回答我的问题，但据我所知，当我们想要使任何属性可编辑时，我们使用Observable，但在这里我不使它们可编辑，它们的值在任何地方都将保持不变。但我还是把你的代码应用到了我的JavaScript中，但它不起作用，而且现在仍然不能提供所需的输出。你能提供其他的解决方案吗！感谢Rustam回答我的问题，我也尝试过你的解决方案，但仍然没有达到预期的效果。