Develop Reference

Translating website to Arabic dynamically in C#

I am facing a pesky problem at the moment on a large website with multiple languages. On arrival at the website, it detects what country you are from and prompts you to confirm this. On confirmation, it swaps out the pages languages from the DB and displays the relevant language. This is done using jQuery. Now the problem is that Arabic reads rtl, so I need to either:
-- swap out the stylesheets for "rtl" version
or
-- change the HTML tag and include a "dir='rtl'" arrtribute
Now, I have tried both of these, with failures on both. When I view the page source, it still shows the old Css file or HTML tag without the "dir" attribute. Correct me if I'm wrong but I believe this to be due to the DOM not registering the new changes, as they have happened asynchronously via jQuery after the DOM has been instantiated.
After all that blah blah and tldr;
Is there not an easier way to swap out the text direction dynamically? If this is a DOM issue, how can I reload the DOM after the asynchronous callback?
I have been at this issue for hours now and have had very little luck on the interwebz.
Any and all help is welcome and greatly appreciated.
Kind Regards,
William Francis
EDIT:
After much investigation I found that the only way to truly work the Arabic way is with a post-back. Once the language has been selected you do a postback, then its just a simple process of changing the Stylesheet HREF attribute from code behind. There doesn't seem to be any form of JavaScript or jQuery that can change it without a post-back and still reflect the new Stylesheet. NOTE: you need to set the Stylesheet HREF on each post-back, i.e. through a master page. The Stylsheet changes do not persist across pages.
Here's a website that helped greatly and explains a whole lot on Stylesheet changes using JavaScript. sadly, it didn't work for me.
http://www.alistapart.com/articles/alternate/

There could be several things going on. I found this page to be very helpful when I was dealing with a similar thing, so I highly recommend it:
http://www.w3.org/International/tutorials/bidi-xhtml/
Also, if you aren't already doing so, use a tool like Firebug to examine the generated DOM after your AJAX has run to be sure you are seeing the altered state of the DOM and not the initial source of the page. It is possible to change the dir dynamically--you can use Firebug to add a new attribute to the HTML tag of this very page (set dir="rtl") to see it change dynamically. It could be some other element is overriding the direction, it could be that the AJAX changes aren't loading correctly, or other things. If you can post more of your code it would be helpful to give a better answer, but I hope this will help.

ASP.NET MVC - Displaying large amount of images

Currently we have a page, where people can amend (crop, resize, etc..) images they have uploaded into the system. Everything works fine, but we have to improve the performance, especially the page load, so I'm looking for some advice.
The problem is that on our page, we have to display around 70-80 images. The source of all the images () are set to point to a Controller method, as we have some special rules in place to build up the full path of the images. (no DB calls are made there)
Obviously, this results in many calls to retrieve the images, which's ok up to a point, but after a while, it just becomes slower and slower.
So the questions is: What would be the best way to go about handling such a scenario?
Would it make any difference if instead of a Controller method we would use an HttpHandler to return the images?
Any input is greatly appreciated.

You can use images lazy loading plugin for jquery.
example: http://www.appelsiini.net/projects/lazyload

can you stitch the images together at the server, transmit them as a single ImageMap, then use CSS sprites (http://css-tricks.com/css-sprites/) on the page to display them?

10,000 + records on html to render quickly

Now this is going to be a very absurd question. But what can I do, it's the client's requirement. Basically, we have a grid (master-detail type) that goes up to about 15 thousand plus rows (has the potential to go up to 30-50 thousand rows in a few years time).
My client does NOT want any paging, does not want any data cropped as well. Also he isn't exactly using the latest hardware so rendering on browsers is a big issue. He wants to view everything by printing it out or looking through it on the browser. (You may all think how insane that sounds, and it sure is).
Now I want to resolve this issue by rendering html quickly. At the moment its a simple asp.net grid view w/o paging. That essentially renders HTML tables. My options that I think are:
- Manually rendering html using div (for quick loading)
- export it to pdf or excel (is there any way to export without the need to resort to third party controls?)
- give the finger (to the client :D j/k)
So to sum up, whats the best way to show 10,000 plus records of data on html?

consider using the "Scroller" plug-in for Datatables..
As part of DataTables 1.8 release a new plug-in called "Scroller" was
introduced as part of the download package. Scroller is an
implementation of virtual scrolling for DataTables, which presents a
vertically scrolling table, scrolling the full height of the table,
but drawing only the rows which are necessary for the visible display,
leading to a huge performance increase. This is quite an exciting
plug-in for DataTables not only for the performance increase, but also
because it effectively provide a new user interaction with the table,
allowing full scrolling of very large data sets.

I know this is almost a year late, but in case it helps someone.
Use SlickGrid - It uses divs instead of tables, which gives so much more performance in IE. Check this example

He wants to view everything by printing
This is imho the only viable solution to view all information. PDF or Excel is much better at handling a large number of rows.
Doing the rendering is quite easy. Just set the excel mime type and return a HTML table.
http://www.designdetector.com/archives/05/07/HTMLToExcelTheEasyWay.php
When it comes to PDF, you probably have to use an external library like PDFSharp.

You should do the paging - it does not mean that you need to show only one page of data at a time but rather you should retrieve and render pageful of data at a time (and keep continuously fetching pages one after one till data is finished).
For example, send the first page of data from the server in the initial request. Setup a js timer and use AJAX requests to retrieve subsequent pages of data and load that into the browser. You can have multiple (say 3-4) AJAX requests going on simultaneously for retrieving pages - only thing would be to achieve the ordering correctly in such approach.
I will personally avoid grid-view and render the html table using manual java-script (with help for jquery) or use some java-script template engine. I will use JSON for retrieving the data from the server.

How to reduce size of html rendered from ASP.net?

I'm developing a newsletter in asp.net that will be send to a large quantity of users, so each kilobyte that I can reduce will help a lot in the use of bandwidth consumption, what I do until know is write the aspx excluding some spaces between tags, and before render, i've renamed some controls ids to "-" to save more space.
So now, the file has 50kb. I need a file with 25 Kb.
Can anyone teach me any other way do save more space ?
ps.: I Use 3 divs with some data, and 2 repeaters, one inside other, to generate a table with some data for me.
EDIT: I've disabled viewstate, and remove unnecessary divs, I'll try to verify if gzip is enabled in IIS.
thanks in advance

Make sure HTTP compression is enabled. It will help to reduce the amount of HTML, but enabling HTTP compression will give more than the marginal improvements you're likely to see.
There are different ways to enable compression, depending on your version of IIS. For instance, in IIS 6.0, you can manually edit metabase.xml or run:
cscript adsutil.vbs set w3svc/filters/compression/parameters/HcDoDynamicCompression true
You can check HTTP headers to verify that compression is enabled using something like https://addons.mozilla.org/en-US/firefox/addon/3829/ Live HTTP Headers for Firefox. Check your headers for "Content-Encoding: gzip".

Don't use an aspx page if you want full control. Make a Generic Handler, and then you can have full control over every byte generated.
Instead of using Repeaters, just loop through a dataset and output tables or spans or something. Although, I have to say, repeaters are very easy to control the exact output of, too.
Look at your generated html and see if you can identify any obvious culprits.

You can disable the viewstate and optimize image files if you are using any.

I recommend going over this article if your using ASP.Net Web Forms - explains how to correctly utilize ViewState:
http://weblogs.asp.net/infinitiesloop/archive/2006/08/03/Truly-Understanding-Viewstate.aspx

You might want to look into IIS Compression(it uses gzip IIRC). That should knock the file size down.
Also minify the javascript/css(I've done that and seen up to 40% reduction on js/css file sizes), here's a link to a book/website that talks about other things you can do: http://developer.yahoo.com/performance/rules.html, the book's title is "High Performance Web Sites", the ISBN: 978-0-596-52930-7

It may not work out to much savings, but you can also reduce markup by seriously considering whether to use DIVs for styling purposes when styling the contents directly would achieve the same result.
For instance,
<div class="sidebar">
<ul>
<li>Lorem</li>
</ul>
</div>
In most cases you can get the same result from styling the UL directly:
<ul class="sidebar">
<li>Lorem</li>
</ul>
But in your case, the repeaters are probably the main source of the bloat. Make sure you're using a custom template for them with clean HTML, and not relying on the out of the box rendering, which can be quite messy.
Like someone else posted, turn off viewstate for any controls you don't need it on - that's a TON of junk alone.

Generate page dynamically & insert body into another page - is this realistic?

I have the requirement to create a page which contains a graph at the top, and for each item in the graph there's a fact sheet below. I already produce the fact sheets as stand-alone pages. Now, rather than recreating the fact sheet to include in the page I have to create, I'd like to use the work that already exists.
Is it realistic that I dynamically generate each fact sheet as needed, strip out the body and insert that into the new page? If so, does anyone have any pointers or suggestions? Thanks

I would suggest moving the content of the existing page into an ASCX user control - it should be a fairly quick job, and then you can incorporate it into other pages as required.

A quick way to implement this feature would be to use an iframe to load the other pages in to. This would allow you to keep using the work that already exists. Not the most elegant solution but it would work.
Hope this helps.

No, generating stuff you don't need and then removing it is inelegant at best, hackish, and will likely contribute to lowering the quality (including reliability, security etc.) of your code.
Refactor your factsheet page code to generate a header, but use a self-contained class/widget to generate the actual factsheet content. Then just instanciate and use that same class/widget on the other page as well.