首页 > 代码库 > 在ASP.NET MVC中使用Knockout实践04,控制View Model的json格式内容
在ASP.NET MVC中使用Knockout实践04,控制View Model的json格式内容
通常,需要把View Model转换成json格式传给服务端。但在很多情况下,View Model既会包含字段,还会包含方法,我们只希望把字段相关的键值对传给服务端。
先把上一篇的Product转换成json格式,通过pre元素显示出来。
<input data-bind="value: name"/><hr/>
<select data-bind="options: categories, value: category" ></select><hr/>
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>
@section scripts{<script src="http://www.mamicode.com/~/Scripts/knockout-2.2.0.js"></script>
<script type="text/javascript">
$(function() {$.getJSON(‘@Url.Action("GetFirstProduct","Home")‘, function (data) {product.name(data.Name);product.category (data.Category);});});var categories = ["小说", "散文", "传记"];var Product = function (data) {data = http://www.mamicode.com/data || {};>this.name = ko.observable();
this.category = ko.observable();
this.categories = categories;
this.origionData = http://www.mamicode.com/data;>this.initialize(data);
};ko.utils.extend(Product.prototype, {initialize: function(data) {this.name(data.name);
this.category(data.category);
},revert: function() {this.initialize(this.origionData);}});var product = new Product({
name: "默认值",
category: "传记"
});//绑定
ko.applyBindings(product);</script>}
可是,我们只想把name,category键值对传给服务端,该如何做到呢?
□ 方法一
ko.toJSON()方法的第二个参数中注明要转换成json格式的键。
<pre data-bind="text: ko.toJSON($root, [‘name‘,‘category‘], 2)"></pre>
□ 方法二
ko.toJSON()方法的第二个参数用扩展方法。
<input data-bind="value: name"/><hr/>
<select data-bind="options: categories, value: category" ></select><hr/>
<pre data-bind="text: ko.toJSON($root, replacer, 2)"></pre>
@section scripts{<script src="http://www.mamicode.com/~/Scripts/knockout-2.2.0.js"></script>
<script type="text/javascript">
$(function() {$.getJSON(‘@Url.Action("GetFirstProduct","Home")‘, function (data) {product.name(data.Name);product.category (data.Category);});});var categories = ["小说", "散文", "传记"];var Product = function (data) {data = http://www.mamicode.com/data || {};>this.name = ko.observable();
this.category = ko.observable();
this.categories = categories;
this.origionData = http://www.mamicode.com/data;>this.initialize(data);
};ko.utils.extend(Product.prototype, {initialize: function(data) {this.name(data.name);
this.category(data.category);
},revert: function() {this.initialize(this.origionData);},replacer: function(key, value) {
if (!key) {
delete value.categories;
delete value.origionData;
}return value;}});var product = new Product({
name: "默认值",
category: "传记"
});//绑定
ko.applyBindings(product);</script>}以上,添加了一个扩展方法replacer,把Product的方法等剔除在json格式内容之外。
□ 方法三:重写toJSON方法
<input data-bind="value: name"/><hr/>
<select data-bind="options: categories, value: category" ></select><hr/>
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>
@section scripts{<script src="http://www.mamicode.com/~/Scripts/knockout-2.2.0.js"></script>
<script type="text/javascript">
$(function() {$.getJSON(‘@Url.Action("GetFirstProduct","Home")‘, function (data) {product.name(data.Name);product.category (data.Category);});});var categories = ["小说", "散文", "传记"];var Product = function (data) {data = http://www.mamicode.com/data || {};>this.name = ko.observable();
this.category = ko.observable();
this.categories = categories;
this.origionData = http://www.mamicode.com/data;>this.initialize(data);
};ko.utils.extend(Product.prototype, {initialize: function(data) {this.name(data.name);
this.category(data.category);
},revert: function() {this.initialize(this.origionData);},toJSON: function() {delete this.categories;
delete this.origionData;
return this;}});var product = new Product({
name: "默认值",
category: "传记"
});//绑定
ko.applyBindings(product);</script>}在ASP.NET MVC中使用Knockout实践04,控制View Model的json格式内容
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。