处理多个下拉选择的更好方法

Question

我有一个包含多个下拉菜单的菜单。我添加了代码，但目前它完全驻留在代码隐藏文件中。我想使用任何设计模式以简单且整洁的方式处理各种选择。

报告生成标准准备如下：

报告类型下拉选项包括：

1. 按类型划分的方案
2. 计划方面
3. 按地区划分
4. 按块
5. 全部

默认情况下，仅启用第一个DropDown。从此下拉菜单中选择一个选项，即可启用相应的下拉菜单。

不仅如此，当从任何这些 DropDowns 或 Scheme 中选择项目时，Scheme、District 和 Block DropDowns 的值也会发生变化使用 AJAX 输入 DropDown。

它经常涉及各种 SQL 查询和启用/禁用 DropDowns。我现在的代码因许多 IF 和 EndIfs 而变得混乱。

我想知道是否可以使用观察者模式或任何使用类的方法来简化此操作。有什么方法可以使下拉菜单的多重选择和填充变得易于管理和简单吗？

在下面进行了编辑以明确要求

让我进一步澄清。

第一个 DropDown 是关键的 DropDown，页面打开时默认启用。默认情况下禁用所有其他下拉菜单。但这并不意味着 Cascading DropDown 是正确的选择，因为子 DropDown 的选择是随机的。

整个计划是以易于理解的形式简化每个 DropDown 的代码。根据选择选择正确的查询涉及许多 If 和 ElseIf。

例如：用户从报告类型主下拉列表中选择地区报告。在本例中，启用了三个子下拉菜单，即。

Scheme Type

Scheme

District

如果用户从方案类型列表中选择“全部”，则所有类别中的所有类型的方案都会填充到方案下拉列表中。

如果用户从以下选项中选择特定的方案类型：城市、农村或其他，方案下拉菜单将过滤方案的名称。

现在，Scheme DropDown 也有一个选项 ALL。用户可以选择全部或选择任何特定方案。

区也一样。如果选择ALL，则Scheme DropDown中的方案将采用所有地区的所有方案，但如果选择特定地区，则Scheme DropDown必须填写该地区的过滤方案。

请注意，在这种情况下，我们现在以相反的顺序移动，因为 District DropDown 再次过滤了计划 DropDown。

这同样适用于块下拉菜单。

除了所选选项之外，还有多种条件需要检查。假设用户没有选择任何选项或者用户选择了全部。

我想用每个 DropDown 的名称创建单独的类。这些类应该不断听到 DropDown 中任何更改的通知（观察者）。

我想我能够澄清。

Answer 1

使用 AJAX Control Toolkit 是符合您要求的解决方案。

在AJAX控件工具包中，有CascadingDropDown控件

标签语法：

<ajaxToolkit:CascadingDropDown ID="ddlReportType" runat="server"
    TargetControlID="ddlSchemeType"
    Category="SchemeType"
    PromptText="Please select a ReportType"
    LoadingText="[Loading Report Types...]"
    ServicePath="ReportService.asmx"
    ServiceMethod="GetDropDownReportTypeContents"
    ParentControlID="DropDownList1"
    SelectedValue="SomeValue" />

然后您需要为其创建一个 Web 服务和一些 Web 方法，其方法签名如下：

[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public CascadingDropDownNameValue[] GetDropDownReportTypeContents(
       string knownTypeValues, string typevalue) { ... }

UPDATE

您已经使用 if-Else-If 做了类似的事情，答案是基于假设给出的，并且纯粹是实现的示例。

    string query = "SELECT * FROM Reports";
    List<string> filters = new List<string>();
    bool ReportType = true;
    bool SchemeType = true;
    bool Scheme = true;
    bool District = true;
    bool Block = true;

    if (ReportType)
        filters.Add("ReportType = true");
    if (SchemeType)
        filters.Add("SchemeType = true");
    if (Scheme)
        filters.Add("Scheme = true");
    if (District)
        filters.Add("District = true");
    if (Block)
        filters.Add("Block = true");

    if (filters.Count() > 0)
    {
        query = query + " WHERE " + string.Join(" AND ", filters.ToArray());
    }

希望我的回答对您有所帮助

谢谢并问候

严厉的贝德

Answer 2

既然看起来你可以使用 Javascript 完成所有这些客户端操作，为什么你要如此频繁地查询数据库呢？您应该保留数据客户端和服务器端。您可以调用所有相关的下拉数据，对其进行缓存，然后从客户端调用 WebMethod，该 WebMethod 将返回包含您需要的数据的 JSON。对于服务器端对象持久性，您应该查看 Entity Framework 4.1，其中每个对象都是表的表示。

我会使用 jQuery 和 Knockout JS 或仅使用 jQuery，使用 JSON 将数据保存在客户端，无需往返于 sql 服务器。

这是 Knockout JS 实际应用的一个很好的例子。
http://knockoutjs.com/examples/cartEditor.html

当然，除非数据变化非常频繁。

Answer 3

不完全是您正在寻找的内容，但您可能想查看我如何使用 jQuery 解决 mvc 中的类似问题。使用 web 方法 而不是 mvc 操作。

这是一个由 3 部分组成的故事，代码可在 bitbucket 上找到。您可以从第 2 部分开始，因为首先是创建演示应用程序并设置数据库。

http://blog. goranobradovic.com/2011/06/asp-net-mvc3-app-part-2-ajax-cascading-dropdown/

有两个下拉菜单的工作示例，但我对 3 和 4 使用相同的解决方案，没有问题。

更新
由于您有可用的源代码，我将仅在此处放置要更改的相关行。防止多个 ajax 调用的调整是将第一个选择中的选项值放入 id（或将 id 放入无关紧要的值），或者如果您无法更改 id 和值，则可以在依赖下拉列表中使用某些属性，但我会保留例如，很简单。然后，在主下拉列表的更改事件中，您检查是否需要加载目标：

$('#' + target.attr('cascading-dependson')).change(function () {
        if($(this).find("option:selected").val() == $(target).attr("id")){ // this is added if
            $(target).removeAttr("disabled");  // added
            selectFromAjax($(target).attr('cascading-loadfrom'),
            { id: $(this).find("option:selected").val() },
            target);
        }
        else {  //added
            $(target).attr("disabled", "disabled");
        }
    });

如果您不想使用 id，则可以轻松更改此设置以使用 select 的某些自定义属性。

更新2
我刚刚看到你更新了问题。正如我所看到的，在某些情况下您需要刷新所有依赖的下拉列表。为此，您需要拥有需要在最后一个主选择选项的值中刷新的所有下拉列表的 id-s，即用“，”分隔，这样您就可以检查其是否有 val().split(", ") 等于依赖下拉列表的 id，或者您可以在 dependentend 中包含属性，其中包含需要刷新的所有选项的值。您在我的代码中看到 selectFromAjax 的选项是下拉列表中的选定值和主字段的名称。由于您可能需要在此处包含一些值以由服务器代码处理，因此我建议您使用第二种方式，即 - 将自定义属性添加到 dependentend 下拉列表中，您将在其中放置相关的 master 中选择选项的值对于该字段和依赖项应在选择时加载。

你明白我的建议吗？

Answer 4

如果我正确理解您的范例，实际上，您有一个下拉菜单（报告类型）来确定是否按方案类型、方案、地区或街区（或以上所有）进行选择。如果您没有“全部”选项，我建议要么只有两个下拉菜单（一个用于报告类型，另一个其标签更改以匹配），或者消除“报告类型”下拉菜单并在每个其他按钮旁边放置一个单选按钮以选择您想要的。当包含“全部”选项时，您可能不会使事情变得更加复杂；例如，您可以再添加一个单选按钮并启用所有四个下拉列表。

但是，您询问观察者模式。从 GoF 来看，观察者模式在以下情况下很有用：

1. 抽象有两个方面，一个依赖另一个；
2. 对一个对象的更改需要更改其他对象，并且您不知道需要更改多少个对象；或者
3. 一个对象应该能够通知其他对象，而无需假设这些对象是谁。

我不完全确定这些情况是否适用于此。第二种情况与您的问题有一些相似之处，但您确实知道需要更改什么以及如何更改。如果您要做的唯一更新是按报告类型进行更新，则只需启用或禁用右侧下拉菜单即可。然而，你说其他下拉菜单相互影响，可能是在“全部”选项中。即使在这种情况下，我也不确定观察者模式本身是最有帮助的。由于您使用 SQL 填充下拉列表，我猜测您可能会使用许多不同的存储过程（或临时查询），具体取决于您需要的参数。我可能建议每个下拉列表只包含一个查询，明智地使用 NULL。例如，要从其他值填充 Block，您可能需要：

CREATE PROCEDURE GetBlocks
(
    @SchemeTypeId INT NULL,
    @SchemeId INT NULL,
    @DistrictId INT NULL
)
AS
SELECT b.BlockId, b.BlockName
FROM   Blocks b
INNER JOIN SchemeTypeBlocks stb ON b.BlockId = stb.BlockId
INNER JOIN SchemeBlocks sb ON b.BlockId = sb.BlockId
INNER JOIN DistrictBlocks db ON b.BlockId = db.BlockId
WHERE  (@SchemeTypeId IS NULL OR stb.SchemeTypeId = @SchemeTypeId)
AND    (@SchemeId IS NULL OR sb.SchemeId = @SchemeId)
AND    (@DistrictId IS NULL OR db.DistrictId = @DistrictId)
ORDER BY b.BlockName

在不知道您的数据库的情况下，我不知道具体什么会起作用，但想法是您只需为您不知道的任何内容传递 NULL还已经选择了。这也许可以稍微简化你的代码。

如果这不能回答您的问题，请告诉我我可以澄清什么。

Answer 5

有一个简单的方法可以实现这一目标，请遵循以下方法：
首先，只需添加一个 AjaxUpdatePanel...然后在下拉列表中将 AutoPostBack 属性设置为 true，
进一步只需在 OnSelectedIndexChanged 事件上添加处理程序即可启用第二个下拉菜单。

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate><asp:DropDownList id="firstDrpDown" AutoPostBack="true"  
 OnSelectedIndexChanged="firstDropDown_SelectedIndexChanged"AppendDataBoundItems="true"
   name="firstDropDown" runat="server">

<asp:DropDownList id="scndDrpDown" **AutoPostBack="true"**  
OnSelectedIndexChanged="scndDropDown_SelectedIndexChanged" AppendDataBoundItems="true"   
name="scndDropDown" runat="server" > 

 </ContentTemplate>
  <asp:UpdatePanel>