[英]C# model to Javascript object- using knockout.js
I'm trying to use knockout.js to perform add/remove operations on a server-side property. 我正在尝试使用kickout.js在服务器端属性上执行添加/删除操作。 Here's what my C# Model looks like: 这是我的C#模型的样子:
public class MyModel
{
[Key]
public int MyModelId { get; set; }
[Required]
public string Name { get; set; }
private IEnumerable<string> _Items;
[Required]
public IEnumerable<string> Items
{
get { return _Items; }
set { _Items = value; }
}
//Used to store in SQL database
public string ItemsSQL
{
get { return _Items != null ? String.Join(";", _Items) : null; }
set { _Items = value != null ? value.Split(';').ToList() : null; }
}
}
Here's what my ViewModel looks like: 这是我的ViewModel的样子:
@model MyProject.Models.MyModel
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout-2.1.0.js")" type="text/javascript"></script>
<script type="text/javascript">
@{
var initialData = new JavaScriptSerializer().Serialize(Model);
}
var viewModel = {
MyModel: ko.observable(@Html.Raw(initialData)),
//Commented out on purpose
//Items: ko.observableArray(this.MyModel.Items),
addItem: function() {
this.MyModel.Items.push("");
},
removeItem: function(item) {
this.MyModel.Items.remove(item);
},
};
alert(JSON.stringify(@Html.Raw(initialData)));
$(document).ready(function() {ko.applyBindings(viewModel); });
</script>
And Here's my view: 这是我的观点:
Name: <span data-bind="text: MyModel().Name"></span>
<br />
Items: <button data-bind="click: addItem">Add Item</button>
<table>
<tbody data-bind="template: { name: 'itemTemplate', foreach: MyModel().Items}"></tbody>
</table>
<script type="text/html" id="itemTemplate">
<tr>
<td>
<input data-bind="value: $data" />
<a href="#" data-bind="click: function() {
viewModel.removeItem($data) }">Remove Item</a>
</td>
</tr>
</script>
This displays MyModel.Name
along with each item in MyModel.Items
displayed in a textbox. 这将显示MyModel.Name
在每个项目一起MyModel.Items
在文本框中显示。 My problem is when I try to instantiate Items
, it spits out the error message: Unable to get value of the property 'Items': object is null or undefined.
我的问题是,当我尝试实例化Items
,它吐出错误消息: Unable to get value of the property 'Items': object is null or undefined.
This also affects my add and remove operations. 这也会影响我的添加和删除操作。
UPDATE UPDATE
When I do alert(JSON.stringify(this.MyModel));
当我做alert(JSON.stringify(this.MyModel));
, it shows that MyModel is undefined, but when I do alert(JSON.stringify(@Html.Raw(initialData)));
,它表明MyModel是未定义的,但是当我执行alert(JSON.stringify(@Html.Raw(initialData)));
my model is displayed in JSON format. 我的模型以JSON格式显示。 So, my Model is serializing correctly, but knockout is unable to create an observable property from a C# variable? 因此,我的模型正确序列化了,但是敲除无法从C#变量创建可观察的属性? I don't know. 我不知道。 Razor is a pain. 剃刀是一种痛苦。
The ViewModel should be constructed as follows: ViewModel的构造应如下:
@{
var initialData = new JavaScriptSerializer().Serialize(Model);
}
var data = @Html.Raw(initialData);
function ViewModel(data) {
var self = this;
self.Name = ko.observable(data.Name);
self.Items = ko.observableArray(data.Items);
self.addItem = function() { self.Items.push(""); };
self.removeItem = function(data) { self.Items.remove(data); }
}
$(document).ready(function() {ko.applyBindings(new ViewModel(data)); });
I think that initialData
is a C# variable but you're trying to alert it through javascript. 我认为initialData
是C#变量,但是您正尝试通过javascript警告它。
It's a bit confusing because it's hard to tell how razor is treating the var
within the @{ }
这有点令人困惑,因为很难说出剃刀如何处理@{ }
的var
If you want to stringify it you'll have to put it into a javascript variable first. 如果要对其进行字符串化,则必须先将其放入javascript变量中。 Something like: 就像是:
var jsInitialData = @{Html.Raw(initialData)}
Razor is a bit of a pain within javascript blocks so that won't work exactly, but I suspect you need something along those lines. Razor在javascript块中有点麻烦,因此无法正常工作,但我怀疑您需要遵循这些原则。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.