How to highlight the differences between two versions of a text in .NET web app?

Question

I have been supporting a web application at work for our Call Center unit for about 2 years now. The app is written in ASP.NET 3.5 with SQL server 2005 database. I’ve been asked to expand the call detail section to allow agents to edit the current call note with the ability to revert back to its previous version. Now, that’s all cool but now the manager wants to be able to click on any particular note and see all edits with changes highlighted in yellow (and if something was deleted, he wants to SEE the deleted text crossed out). Actually, what I need is very similar to how Stackoverflow handles edits on their questions. I’ve been thinking about how to go about this and after doing research and Google-ing of course, I am still unsure which route to take. I am fairly new to .NET development. Any ideas on the best technique for highlighting the changes in UI? I am afraid I am going to have to store a copy of the entire note each time they make a change because the manager wants to be able to easily review notes and revert back to ANY version (not just the most recent one) before sending the monthly call report off to our VIP customers. Since this department OFTEN changes their mind on things, I want to make sure the new functionality is scalable and easy to maintain. Any ideas would be greatly appreciated. I am really just looking for someone to point me in the right direction; maybe there are some tools out there that can be useful, recommended keywords in Google lookup, etc.

Answer 1

This will be difficult do to.

1. You'll need a "text editor" control that can not only edit the text, but which can also tell you what changes were made.
2. You then need to store not only the final text string, but also the list of changes
3. You'll then need to be able to display the text plus changes, using strike-outs, and different colors for inserts vs. changes
4. You'll need to do this not only for the changes of a single user, but you'll need to store each users' changes in the database, and will need to be able to display all the changes, all at once.

Your manager should be really sure he needs this.

Answer 2

I think you should see http://en.wikipedia.org/wiki/Revision_control

Answer 3

Some tools for doing the diff for you can be found at http://stackoverflow.com/questions/138331/any-decent-text-diff-merge-engine-for-net.

This would entail storing every version like you say. This should allow you to implement it similarly to SO. I seem to recall reading or hearing Jeff mention it, but wasn't able to find it, likely in one of the SO podcasts.

Answer 4

Easiest would be to store the text for each revision, then when the user wants to see the diff use a diff tool to generate the highlighted text.

Here is some Javascript diff code: http://ejohn.org/projects/javascript-diff-algorithm/

If all the computers have Word installed you may be able to use a Word control to accomplish this. TortoiseSVN has scripts in its program directory which can take two word documents and produce a document with changes highlighted. To see this create c:\aaa.doc and bbb.doc, then install TortoiseSVN and run:

wscript.exe "C:\program files\tortoisesvn\Diff-Scripts\diff-doc.js" c:\aaa.doc c:\bbb.doc //E:javascript