Question

OK, So here is my problem. I am trying to customize the user’s experience. Upon returning to the home page, users who have not logged out should get a customized experience depending on their preferred settings. I can do this server side, draw the page html with the custom info before sending the page to the client. The catch is that on the client side, jQuery actually creates certain html elements. I want to initialize these too. So one thought is to send a JSON object along with the page and have JQuery inspect it and draw the elements using the info in the JSON object. But how can I do that? In the absence of that, All I can think of is to put the info in hidden fields on the page and have JQuery get its data from these fields. But that is so ugly. How would you go about this?

Many thanks in advance.

Answer 1

You could use the JavaScriptSerializer class to JSON serialize some model instance that you have on the server:

<script type="text/javascript">
    var model = <%= new JavaScriptSerializer().Serialize(SomeModel) %>;
    // TODO: do something with the values of the model
</script>

Depending on the structure of your server side model the generated HTML might look something along the lines of:

<script type="text/javascript">
    var model = { someProperty: 'some value', someCollection: [ '1', '2', '3' ] };
    // TODO: do something with the values of the model
</script>