Currently I am working on an ASP.net webforms project where I would like to indicate to the user which elements on the current page contain localized resources.
In order to identify which HTML elements, contain which localized resources. I’d like to tag all rendered HTML elements that had a resource retrieved from the ResourceProvider while rendering the page. Thereby creating a mapping between HTML element and the used resource(s).
The tagging will be done by adding a data-localized attribute to the html element. The attribute will contain the resource identifier(s) used (i.e. resx file names and the resource keys), and then when the in the browser displays the page a javascript will use this information to do whatever.
So far I have replaced the default resource-provider with my own provider that retrieves resources from a database instead of the regular .resx files (as described in this article). This gives me information about all the resources used and by logging these in the HttpContext, i know all the resources used for the current page.
Now for the mapping, because the localized resource doesn’t always have to occur within an HTML element (e.g. it could be just a string yielded by a Literal control). I have introduced a new CompositeControl that wraps a section containing localized resources with a <div data-localized=""> </div>.
My question: How can i map the wrapper with the resources used by its children?
Since you are going to post-process the data with JavaScript, you may think of adding what you need in form of prefix and delimiter to actual translated text, for example “Sample text” will become “##strings.resx##login.form.sample.text##Sample text”.
Your client side script would then look for ## delimiters and remove them (or do whatever you want) from the page.
I know it is not what you asked for but I believe it is simpler and easier to implement.