Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Passing JSON serialized data via hidden field

In ASP.NET WebForms I want to pass arbitrary data from server to client and back again. I am serializing to JSON and have been simply producing JavaScript that creates the object on the client. I have no problem sending data to the server with ajax, but there are situations where I also want to send a Javascript object data back to the server on postbacks. So I guess it needs to be in a hidden field.

A couple general questions about this.

1) What is the best way to do this in terms of minimizing complexity and optimizing space and efficiency? In researching this I discovered Protocol Buffers but there does not seem to be a good C# implementation. I did find one, but it was a couple years old and self-described as buggy so that scared me.

2) If I just pass a JSON string, how can I be sure it will be safe to include as the value for a hidden field? Is there any reason I might not want to do this? I could Base64 encode, but it seems like this adds a lot of overhead. What is considered the best or preferred method?

like image 298
Jamie Treworgy Avatar asked Mar 02 '11 20:03

Jamie Treworgy


1 Answers

In the past, I've usually done the following:

  1. Created a C# object that I can easily serialize to XML (.Net can do this natively and there are JSON serializers out there as well). (Actually I think .Net may do JSON as well... not sure though)
  2. Take this object and share it with the client via a hidden field or lazy load it on the client via an AJAX request.
  3. The client then parses and manipulates the XML (jQuery can do this) and sends it back to the server via AJAX or a hidden field via a POST.
  4. Lastly I deserialize the XML (or JSON) from the client back into an Object and work with it from there.

So I'm not sure what you're trying to gain through encoding, but I think the expense of transforming the object from JSON (or XML) to something smaller is too much overhead for any packaging/shrinking benefit. (Unless your a super high traffic site concerned more about bandwidth usage than server/client side processing.)

EXAMPLE

Hopefully this gives you an idea of how to accomplish this. Let me know if you have any more questions.

<html> 
<head> 
</head> 
<body> 
    <input type="button" id="btnObject" value="Show Object" /> 
    <input type="button" id="btnShowHid" value="Show Hidden Input Value" /> 
    <input type="hidden" id="hidInput" value="" /> 
</body> 
</html> 
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'></script>
<script type='text/javascript' src='https://github.com/douglascrockford/JSON-js/raw/master/json2.js'></script> 
<script> 
    //Your JSON Object
    var myJSONObject = {"bindings": [ 
            {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"}, 
            {"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"}, 
            {"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"} 
        ] 
    }; 

    //jQuery Document Ready Event
    $(function(){
         //Get a reference to your hidden field
        var $hidInput = $("#hidInput");

        //Use json2.js library to convert the json object to a string
        //and assign it to the hidden input's value
        //NOTE: ASP.NET hidden input control reduces to a hidden input so you can treat them the same.
        $hidInput.val(JSON.stringify(myJSONObject));

        //Set up click events to view object and hidden value
        $("#btnShowHid").click(function(){
            alert($hidInput.val());
        });

        $("#btnObject").click(function(){
            alert(myJSONObject);
        });

    });
</script> 
like image 154
Brandon Boone Avatar answered Nov 04 '22 19:11

Brandon Boone