Design Pattern for a generic container in ASP.NET

Question

We have a ASP.NET 3.5 site that has multiple search pages, customized what you're trying to search for. These search pages are similar, in that they behave the same and have the same design, but the actual search fields may be different depending on what table you're searching on.

I'm updating this to use div's and collapse/expand Javascript to hide blocks of the search field the user is not using. I want to apply this change to all of the search pages (there's at least 10 of them) without having to re-implement them. I.e. I'd like to keep all the common code (the Javascript, CSS, base HTML, etc) in the same place, and just implement the individual search fields for each page. To try to show what I'm talking about, here is a screenshot of the new search I've created:

In this example, there are three search fields. Owner, Address, or parcel. In some searches, Parcel will be swapped with a different search type, such as neighborhood. Is there a way I can keep the base template in one spot, and just fill in the contents of the search blocks for each search page? Thanks!

Answer 1

I don't see the HTML for the search blocks being that complicated, so it would likely be overkill to try and template them somehow, just develop a standard structure that you can re-use CSS and Javascript with.

Here is something to get you started (I'm assuming the use of jQuery or another library is acceptable, please update the question if not):

<div class="search-box">
    <form action="#" method="get">
        <h2>Search by Owner Name</h2>
        <fieldset>
            ... the search form ...
        </fieldset>
    </form>
</div>
<div class="search-box">
    <form action="#" method="get">
        <h2>Search by Owner Name</h2>
        <fieldset>
            ... the search form ...
        </fieldset>
    </form>
</div>
<div class="search-box">
    <form action="#" method="get">
        <h2>Search by Owner Name</h2>
        <fieldset>
            ... the search form ...
        </fieldset>
    </form>
</div>

.search-box {
    border: 1px solid #ccc;
}
.search-box h2 {
    background: transparent url(images/gradient.png) repeat-x;
    border: 1px solid #aaa;
    cursor: pointer;
}

.search-box.closed fieldset {
    display: none;
}

$(document).ready(function() {
    $('.search-box').addClass('closed').find(':first').removeClass('closed');
    $('.search-box h2').click(function() {
        // This is where you might implement some animation, or use an accordian plugin
        $('.search-box:not(.closed)').addClass('closed');
        $(this).parents('.search-box').removeClass('closed');
    });
});

Answer 2

Here is a brief explanation of one way to do this:

Create a base control, call it BaseSearchControl, make it abstract so it can't be created directly. It can implement an interface, call it ISearch. The ISearch interface can expose properties like SearchExpression, BaseSearchControl can implement these interface properties/functions in either an abstract or virtual way (abstract means any child controls have to implement it, virtual means they can choose to override it).

Each of your search controls should then derive from BaseSearchControl, and have their own UI. Because they also implement ISearch (either directly or indirectly, depending on whether you make the properties/functions virtual or abstract in BaseSearchControl), the container parent control can easily enumerate them (by base type or interface type) and interrogate them in a consistent fashion.