I have an MVC application that is rendering rendering the following javascript on the client:
var rawData = [{"ID":5317,"Code":"12345","Description":"sometext \u003c/= 100"}];
The JSON data is a result of serializing an object using the JavaScriptSerializer and then running the result through the Html.Raw() helper.
This data is then used to load a knockout view model and display a popup on hover. In the popup, only the "sometext" portion of the "Description" property is being shown as the string gets converted to the unencoded version when setting the rawData variable (i.e. \u003c is converted to <).
Also, this data ends up being sent back to the server upon saving of data, and the ASP.NET validation kicks in and fails the request as it detects the "
I've worked around this, temporarily, by adding a computed property to my Knockout View Model like so:
self.DescriptionEncoded = ko.observable('');
self.Description = ko.computed({
read: function() {
return self.DescriptionEncoded ();
},
write: function(value) {
self.DescriptionEncoded($('<div/>').text(value).html());
}
});
In this way I can access the escaped property from my popup and the unescaped value is not sent back to the server when I serialize my viewmodel (using .toJSON()).
Is there a more global way to handle this rather than creating computed properties for every object that may have some text that appear to be a bad request while not compromising on security? I've considered an overload/helper to the serialization routine that would accept a list of properties to apply a Find/Replace I am thinking this will have to be handled on a case by case basis in a manner similar to what I've already done. As for sending the data back to the server, I could override the toJSON() method on my view model and delete the properties that don't need to be sent back, but that won't help me with my popup.
Thoughts?
You can encode using Ajax.JavaScriptStringEncode. You might also get the AntiXSS library and use it for the encoding.
I hope I understood your question well.
Related
I have a 3 <tr></tr> in my table. user can edit them and on the save button I send the data to the server.
first is main and other all is child of the main. When someone click on new button a new child is created.
now I am thinking to maintain the information like this
var minf = {};
minf.main = $("#tr" + curSplidId).find('input,select').serialize();
res.each(function(n) {
var i = $(this).find('input,select').serialize();
minf[n] = i;
});
All I am trying to do is getting main object and array of childs in JsonResult, I have tried to use Dictionary for JSON.stringify values.
None of these works.
Someone please help me to get it done. Through my testing I found in a case it's sending me querystring in my minf object (I does Stringify) but I am not sure how to handle it on JSONResult as some kind of dictionary stuff where I can read it through the keys.
suppose you have a 3 tr. the best approach is to use a loop on all the tr and create a object same to the DTO that is using in action and make a list of it.
var MainList=[];
$('tr').each(function(){
var MainDTO={};
MainDTO.Column1=$(this).find('td').html();
MainDTO.Column2=$(this).find('td').html();
MainList.add(MainDTO)
});
and pass this MainList directly to action. no serialise required
I think for converting data to json and read that json on server. I make the whole process hard for JS and server to handle.
I change the strategy to serialize all the element and send it to server. it's work fine.
now if I need to read id then I can parse the id which is 3 and come in comma based values.
I have some data that I need to persist through multiple actions within my Grails app. Due to the nature of the data, I would prefer not to store the data in the session. Here is an example of what I would like to do.
class MyController{
def index(){
MyObject object = MyObject.new(params.first, params.second, params.third)
[gspObject:object]
}
def process(){
MyObject object = params.gspObject
//continue from here
}
}
In my GSP if I do
<g:form action="process" params="[gspObject:gspObject]">
Then I get the error
Cannot cast object 'net.package.MyObject#699c14d8' with class 'java.lang.String' to class 'net.package.MyObject'
My question is, If I want to get the object back that I sent to the gsp, how can I get that? Is there some kind of scope that I can save the object in that would be a little safer then session? Is there a way to pass the object into the page itself and pass it back in the next request?
Grails has many layers, but at the bottom you have plain old HTTP just like in any web app. It's a stateless protocol, and you send a text or binary response, and receive text or text + binary requests. But you can't expect to be able to send an arbitrary object to a web browser in HTML and receive it back again in the same state as when you sent it - where is this Java/Groovy JVM object going to be stored in the browser?
You have basically two options. One is to store it at the server, which is less work because it remains as the same object the whole time. The session is a good location because it's coupled to the user, is created on-demand and can automatically time out and be removed, etc. The other is to do what you're trying to do - send it to the client and receive it back - but you are going to have to serialize it from an object (which could be a complex object containing arbitrarily many other objects) and deserialize it from the format you used on the client back into Java/Groovy objects.
JSON is a good option for serialization/marshalling. You could store the stringified object in a hidden form element if your page uses a form, or in a querystring arg if you click a link from this page to the next in the workflow. Don't send all of the object's data though, only what you need to rebuild it. Anything that's available in the database should be referenced by id and reloaded.
Something like
[gspObject: object as JSON]
or
[gspObject: [first: object.first, first: object.firstsecond, ...] as JSON]
will get it in the correct format for sending, and then you can parse the JSON from the request to reinstantiate the instance.
Is there any simple solution, or it can be accomplished only by defining a custom helper?
The best solution is probably to have the server send the array in reverse order to begin with. In most cases, the "Dust way" is to have the server send data in the format that it will be presented by Dust. If you don't have control over how the data is sent, though, you will either need a helper, or you can manipulate the data (using JavaScript) before passing it to dust.render.
var data = getData();
var data.arrayToReverse = reverseArray(data.arrayToReverse);
dust.render('myDustTemplate', data, function(err, out) {
// Show the result.
});
You would need to write the getData and reverseArray methods, but this way you could get the reversed array without a helper.
I ve a JS array, comprising multiple JS objects.
I want to convert JS array to JSON type, & pass that to controller (using AJAX - POST call).
So that I can retrieve the values from the Array of Objects, in my controller & save them in DB.
NB: I ve tried using $.stringify(myArry), but its not able to send data to controller in JSON format. Also I cant use $.toJSON(myArray), as I m not allowed to include a new plugin in our solution. :(
Plz suggest me any other idea.
Else if anyone can let me know how to deserelize the array in cotroller, that I ve sent by using $.stringify(myArry), that would also great.
Something like
var result = JavaScriptConvert.DeserializeObject(inputContent, JsonDataType);
Per this post, it looks like you'll have to add another plug-in:
JSON stringify missing from jQuery 1.4.1?
The Google solution looks good: http://code.google.com/p/jquery-json/
Or just use the JSON object from Crockford: https://github.com/douglascrockford/JSON-js
I have a web page with lots of small images on it. In a typical scenario user clicks on image and expects it to change with a new image.
Requirements:
When user clicks on image, it should be immediately known to a controller in an Ajax way.
Some strings should be passed to a controller when user clicks on image.
Controller does its job and returns another image (which replaces old one).
Along with image controller returns a couple of extra strings (such as completion status).
Web page updates old image with new one and also updates other parts with these new strings.
Number of images on a page varies but potentially it can be a couple of dozens.
Question: What Ajax technique should be used here? I'm quite new to Ajax and don't feel solid with patterns. Should it be Json or something else?
Any code example would be very very welcome and helpful.
Thank you.
Well it sounds like you need a Event observer on the image object. On that image object, you could have various custom attributes, such as imageid="2", etc. With the element being observed onclick, you'd read the attributes of the elements and pass them on to an AJAX call. I'm not sure if the image is known by the database or would it be available on the page itself. Maybe a back/previous button? In either case, the AJAX call could either return JavaScript directly which then gets parsed to update the DOM and replaces the image with the new image source, or it could return a JSON response which then needs to get read and parsed by the AJAX callback and then updates the DOM. Easiest being to return JS code which gets parsed, but I prefer to have all my JavaScript in one file and not have it all over the place mixed with server side code.
It really depends on what AJAX library you are using.
With jQuery, you might do something like this.
$("#buttonImage").click(function () {
var imageid = $(this).attr('imageid');
$.getJSON("/controller/get_image/" + imageid,
function(data){
$("#buttonImage").attr("src", data.imagesrc);
});
});
And your /controller/get_image/123 would return a JSON response like...
{ 'imagesrc' : '/my/image.jpg' }
As far as I known, the only browser-safe way to change an image is by assigning a new URL to it's src attribute. If you return an image to a request that pass some parameters, it might prevent client-side cashing of the images. For these reasons, I would treat separately the transfer of textual data and images.
The completion status can always be return as the HTTP status text but if more information is needed from the server, you can always return it in JSON or XML, the simplest being JSON.
The responsiveness could be improved by preloading images on the mouseover event.