How data is serialize into model when pass to client side from action

Question

_{Sunday, December 15, 2019 6:20 PM}

my question is very basic question. see how list of data is pass from action to client side.

[HttpGet]
        public ActionResult Index()
        {

            List<UserData> data = new List<UserData>
                {
                    new UserData
                    {
                        ID = 1,
                        Name = "Simon"
                    },
                    new UserData
                    {
                        ID = 2,
                        Name = "Alex"
                    }
                };
          
            return View(data);
        }

passed model data is captured like below way which is not clear to me

 var keys = Object.keys(@Html.Raw(Json.Encode(Model[0])));
        var columns = keys.map(function (key) {
            return { title: key };
        });

        var data = @Html.Raw(Json.Encode(Model));
        var dataSet = data.map(function (d) {
            return Object.values(d);
        });

        console.log(columns);
        console.log(dataSet);

see this code first

var keys = Object.keys(@Html.Raw(Json.Encode(Model[0])));
    var columns = keys.map(function (key) {
        return { title: key };
});

1) we know list is kind of array then why keys are extracted from zeroth position ? Model[0] why not Model[1]

i need to see in what form data is stored into model when pass from action to client side ?

see this code again

var data = @Html.Raw(Json.Encode(Model));
    var dataSet = data.map(function (d) {
        return Object.values(d);
});

2) in above code no ordinal position mention during extracting data. why?

3) what is Model[0] ? how it comes? because in mvc we write model like **@model **not Model

4) is this **Model **is MVC related model or javascript Model object ?

model is javascript object then how server side model data comes into js model ?

so in case of keys ordinal position mention but in case of data no ordinal position mentioned. please explain if some one understand what i am trying to know.

please explain how above code is working. thanks

All replies (2)

_{Sunday, December 15, 2019 9:22 PM ✅Answered}

JSON by definition is valid JavaScript object syntax. This means when producing html which includes javascript you can set a javascript variable to a json string.

   var data = @Html.Raw(Json.Encode(Model));

Model is a property in razor that return the model value pass to return View(model). Its a .net object. the Json.Encode converts it to a JSON string. the @HtmlRaw() helper  is used to prevent HTML encoding of the json string (view page source to see output). the @<C# expression> is razor syntax to return the string value of the following C# expression.

your sample javascript code is rather sloppy as it renders Model data twice, increasing payload size. it would be better written:

// render the View model as javascript source text just once
var data = @Html.Raw(Json.Encode(Model));

// get array of the property names of the first elment of the array (javascript reflection)
// handle empty array
var keys = data.length ? Object.keys(data[0]) : [];

// map property names array of col format objects 
var columns = keys.map(function (key) {
   return { title: key };
});

// map array of objects to an array of array of property values via reflection
var dataSet = data.map(function (d) {
     return Object.values(d);
});

console.log(columns);
console.log(dataSet);

_{Monday, December 16, 2019 5:50 AM ✅Answered}

Hi bzacks,

i need to see in what form data is stored into model when pass from action to client side ?

You can press F12 to check the data format after using the following code to convert

var data = @Html.Raw(Json.Encode(Model));
console.log(data);

And then you can see why keys are extracted from zeroth position.

Best Regards,

Jiadong Meng