Use Knockout practices in ASP. net mvc 04 to control the json format content of the View Model, knockoutjson

Use Knockout practices in ASP. net mvc 04 to control the json format content of the View Model, knockoutjson

Generally, you need to convert the View Model to json format and send it to the server. However, in many cases, View Model includes both fields and methods. We only want to pass the key-value pairs related to the fields to the server.

First, convert the Product in the previous article into json format and display it through the pre element.

<input data-bind="value: name"/>
<select data-bind="options: categories, value: category" ></select>
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>
@section scripts
{
    <script src="~/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 = ["Novels", "Prose", "Biography"];
        var Product = function (data) {
            data = data || {};
            this.name = ko.observable();
            this.category = ko.observable();
            this.categories = categories;
            this.origionData = 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: "Default Value ",
Category: "Biography"
        });
// Bind
        ko.applyBindings(product);
    </script>
}


 
However, we only want to pass the name and category key-value pairs to the server. What should we do?
 
□Method 1
 
The second parameter of ko. toJSON () indicates the key to be converted to json format.
<Pre data-bind = "text: ko. toJSON ($ root, ['name', 'category '], 2)"> </pre>

 
□Method 2
 
The second parameter of the ko. toJSON () method uses the extension method.
<input data-bind="value: name"/>
<select data-bind="options: categories, value: category" ></select>
<pre data-bind="text: ko.toJSON($root, replacer, 2)"></pre>
@section scripts
{
    <script src="~/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 = ["Novels", "Prose", "Biography"];
        var Product = function (data) {
            data = data || {};
            this.name = ko.observable();
            this.category = ko.observable();
            this.categories = categories;
            this.origionData = 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: "Default Value ",
Category: "Biography"
        });
// Bind
        ko.applyBindings(product);
    </script>
}

The Extension Method replacer is added to remove the Product method from the json format.
 
□Method 3: rewrite the toJSON Method


<input data-bind="value: name"/>
<select data-bind="options: categories, value: category" ></select>
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>
@section scripts
{
    <script src="~/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 = ["Novels", "Prose", "Biography"];
        var Product = function (data) {
            data = data || {};
            this.name = ko.observable();
            this.category = ko.observable();
            this.categories = categories;
            this.origionData = 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: "Default Value ",
Category: "Biography"
        });
// Bind
        ko.applyBindings(product);
    </script>
}



In aspnet mvc, how does one display the data obtained from the model layer on the page? In addition, if you want to display the list, you must loop in the view?
The data at the Model layer is Private (Private) and is obtained and transmitted through the Public type. Therefore, the View layer displays the data obtained at the Model layer, the View layer needs to read or write data at the Model layer through data binding.

Who can tell me what is the relationship between model, view, and control layers in aspnet mvc?
Wewform is a view that appears on the client (browser)
Model and control are models and controllers that appear on the server.
The MVC Architecture in web applications differs from the MVC Architecture. The main difference is that, in the MVC Architecture, when the model changes, the corresponding view is automatically updated, view and model are synchronized. in web applications, because http works collaboratively based on request and response methods, when the model (data) on the server changes, it does not immediately update the view on the client, update only when the client re-requests or refreshes the page.