Javascript ASP.NET中通用容器的设计模式

我们有一个ASP.NET 3.5网站，它有多个搜索页面，可以自定义您要搜索的内容。这些搜索页面是相似的，它们的行为相同，设计也相同，但实际的搜索字段可能会有所不同，这取决于您搜索的表

我正在更新它以使用div和折叠/扩展Javascript来隐藏用户未使用的搜索字段块。我想将此更改应用于所有搜索页面（至少有10个），而无需重新实现它们。也就是说，我希望将所有通用代码（Javascript、CSS、基本HTML等）保持在同一个位置，只需为每个页面实现单独的搜索字段。为了展示我所说的内容，下面是我创建的新搜索的屏幕截图：

---

在本例中，有三个搜索字段。所有者、地址或包裹。在某些搜索中，地块将与其他搜索类型交换，例如邻域。是否有一种方法可以将基本模板保存在一个位置，然后只填写每个搜索页面的搜索块内容？谢谢

我不认为搜索块的HTML有那么复杂，因此尝试以某种方式对它们进行模板化可能有些过分，只需开发一个可以重复使用CSS和Javascript的标准结构即可

下面是一些让您开始学习的内容（我假设使用jQuery或其他库是可以接受的，如果不可以，请更新问题）：

按所有者名称搜索
... 搜索表单。。。
按所有者名称搜索
... 搜索表单。。。
按所有者名称搜索
... 搜索表单。。。
.搜索框{
边框：1px实心#ccc；
}
.搜索框h2{
背景：透明url（images/gradient.png）repeat-x；
边框：1px实心#aaa；
光标：指针；
}
.search-box.closed字段集{
显示：无；
}
$（文档）.ready（函数（）{
$（'.search box'）.addClass（'closed'）.find（':first'）.removeClass（'closed'）；
$（'.search box h2'）。单击（函数（）{
//您可以在这里实现一些动画，或者使用手风琴插件
$（'.搜索框：未（.closed'）。addClass（'closed'）；
$（this）.parents（'.search box'）.removeClass（'closed'）；
});
});

以下简要说明了一种方法：

创建一个基本控件，称之为BaseSearchControl，将其抽象化，以便无法直接创建。它可以实现一个接口，称之为ISearch。ISearch接口可以公开SearchExpression等属性，BaseSearchControl可以抽象或虚拟方式实现这些接口属性/函数（抽象表示任何子控件都必须实现它，虚拟表示它们可以选择重写它）

然后，每个搜索控件都应该派生自BaseSearchControl，并具有自己的UI。由于它们还实现了ISearch（直接或间接，具体取决于您在BaseSearchControl中将属性/函数设置为虚拟还是抽象），因此容器父控件可以轻松地枚举它们（按基类型或接口类型）并以一致的方式查询它们

<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');
    });
});