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>

HomeController中：

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。

如何访问整个模型客户端

2 个答案: