如何访问整个模型客户端

Question

我有以下代码。

Index.cshtml：

@using System.Web.Script.Serialization
@model MvcApplication3.Models.Person
<script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"></script>
<!-- This is a *view* - HTML markup that defines the appearance of your UI -->
<p>First name: <input data-bind="value: firstName" /></p>
@*<p>Last name: <input data-bind="value: lastName" /></p>*@
<script type="text/javascript">
    var initialData = @Html.Raw(
        new JavaScriptSerializer().Serialize(Model.FirstName));
    alert(initialData);
    // The *viewmodel* - JavaScript that defines data and behavior of the UI
    function AppViewModel() {
        this.firstName = ko.observable(initialData);
        // this.lastName = ko.observable("Bertington");
    }
    // Activates knockout.js
    ko.applyBindings(new AppViewModel());
</script>

主控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var people = new PeopleEntities();
        var person = people.People.First();
        return View(person);
    }
}

基本上，它的作用是从数据库中加载一个人，并使用 KNOCKOUT 为名字创建一个可编辑的字段并将FirstName加载到其中。

这工作正常，但是，我也想加载LastName.我不确定如何做到这一点，因为我只序列化名字。我想我想序列化整个模型，但不确定如何访问每个名称。

Answer 1

JavaScriptSerializer将

对象转换为 JSON 字符串。如果序列化整个模型，则可以像在 C# 中使用点表示法一样访问其字段，更具体地说是initialData.FirstName和initialData.LastName。

这是有效的initialData因为它包含一个从序列化程序获取的 JSON 字符串初始化的 javascript 对象。如果模型仅包含名字和姓氏属性，则这是序列化程序生成的字符串：

{"FirstName":"John","LastName":"Doe"}

Answer 2

这是我的做法：

var initialData = @(new MvcHtmlString(Model.ToJson()));
var viewModel = new AppViewModel(ko.toJS(initialData));
function AppViewModel(m) {
    this.firstName = ko.observable(m.FirstName);
    this.lastName = ko.observable(m.LastName);
}
$(function () {
    ko.applyBindings(viewModel, document.body);
}

其中 .模型上的 ToJson（） 方法是一个扩展方法：

public static class HtmlHelperExtensions
{
    public static string ToJson(this object item)
    {
        return Newtonsoft.Json.JsonConvert.SerializeObject(item);
    }
}

你可以看到我使用了Newtonsoft.Json转换器，但你可能也使用JavaScriptSerializer。