带有knockout js和MVC action方法的客户端数据绑定

Question

我是 mvc 的新手。所以我不确定第一次请求页面时会调用操作方法。如果我们从该操作方法传递 json 那么我们如何从客户端保存 json 并通过敲除和绑定控件解析 json。

我看到了一些关于 asp.net mvc 和 knockout 的文章，但是那些都是在第一次请求时在服务器端绑定控件，并且从随后的操作中，他们通过 jquery 调用服务器端/操作方法函数以及 json 那个动作方法 return 他们只是用那些 json.

解析和填充淘汰赛

所以是否可以在第一次请求页面时捕获 json 并填充挖空视图模型。帮助示例代码对我很有帮助。

我们是否需要使用任何其他 knockoutjs 来映射 json 和绑定数据？谢谢

Answer 1

您的控制器将填充绑定到 ASP.net 视图的模型。然后在视图中，您需要将 c# 模型序列化为 json。这里我使用 json.net。然后你可以将它绑定到视图上的html。

因此，如果您的 C# 模型是这样的：

public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

然后你的控制器是这样的：

public class PersonController : Controller
{
    // GET: Person
    public ActionResult Edit(int personId)
    {
        //this is where you would load the person from your data source
        var person = _datasource.GetPerson(personId);

        return View(person);
    }
}

然后在您看来，您将在脚本标记内序列化为 json：

$(function() {
    var personModel = '@JsonConvert.SerializeObject(Model)';
    ko.applyBindings(new PersonViewModel(personModel));
});

您可以将所有视图模型放入 javascript 文件中，这些文件使用 asp.net 捆绑进行捆绑和缩小。

这将是 PersonViewModel.js:

var PersonViewModel = function (model) {
    var self = this;

    self.firstName = ko.observable(model.FirstName);
    self.lastName = ko.observable(model.LastName);

    self.save = function () {
        ...
    }
};

带有knockout js和MVC action方法的客户端数据绑定

Client side data binding with knockout js and MVC action method

asp.net-mvc

jquery

json

knockout.js