12.2. Design

We need to tackle these problems systematically. The first thing we need to do is to think about the process. The user will click a button on the WYSIWYG editor to insert an image. This will display a user interface (UI) where the user can upload a picture, insert a picture using a URL, or select previously uploaded pictures from his or her gallery. Once a picture is selected, we need to add the picture to the message editor.

The "Insert Image" button that comes included with the editor only allows for inserting a URL to an image as shown in Figure 12-1. This doesn't address our problems. We will have to implement our own custom solution.

Figure 12-1. Figure 12-1

I will skip over some of the functionality of a full-fledged gallery for the sake of simplicity and because there are other solutions out there that you can use. A quick Google search for "jQuery image gallery" will turn up several Open Source and free alternatives. Let's make this simple.

Get ASP.NET MVC 1.0 Test Driven Development: Problem - Design - Solution now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.