Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Better way to handle multiple DropDown selection

enter image description here

I have a menu with multiple DropDowns. I added code but at present, it entirely resides in the code-behind file. I want to use any design pattern to handle in an easy and uncluttered way the variety of choices.

The report generation criteria is prepared as follows:

Report Type DropDown options include:

  1. Scheme Type-wise
  2. Scheme-wise
  3. District-wise
  4. Block-wise
  5. All

By default, only the first DropDown is enabled. Selecting an option from this DropDown, enables the respective DropDowns.

Not only this, values of Scheme, District and Block DropDowns also change when an item is selected from any of these DropDowns or Scheme Type DropDown using AJAX.

It involves a variety of SQL queries and Enabling/Disabling DropDowns often. My present code has become cluttered with many IF and EndIfs.

I want to know whether Observer pattern or any approach using Classes be used to simplify this operation. Any way to make this multiple selections and filling of DropDowns manageable and simple?

Edited below to clear requirements

Let me clarify further.

The first DropDown is the key DropDown which is enabled by default when the page opens. All the other DropDowns are disabled by default. But this does not mean that Cascading DropDown is the correct choice because, the selection from the child DropDowns is random.

The whole plan is to simplify the code in an understandable form for each DropDown. There are many Ifs and ElseIfs involved to pick the correct query depending upon the selection.

For example: The user selects, District-wise report from the Report Type primary DropDown. In this case, three child DropDowns are enabled, viz.

Scheme Type

Scheme

District

If user selects "ALL" from Scheme Types List, all types of schemes in all categories gets filled in the Scheme DropDown.

If user selects a particular Scheme Type from the options: Urban, Rural or Other, the Scheme DropDown filters the name of the schemes.

Now, Scheme DropDown also has an option ALL. The user can select ALL or pick any particular scheme.

Same is with District. If ALL is selected, schemes in the Scheme DropDown takes all schemes in all districts, but if a particular district is selected, the Scheme DropDown must fill the filtered schemes of this district.

Please note that in this case, we are now moving in a reverse order because District DropDown is again filtering the Scheme DropDown.

The same is applicable with the Block DropDown.

There are variety of conditions to be checked other the selected option. Suppose the user didn't select any option or the user selects ALL.

I want to create separate classes with the names of each DropDown. These classes should keep hearing notifications (Observer) for any changes in the DropDown.

I guess I was able to clarify.

like image 544
RKh Avatar asked Dec 21 '22 08:12

RKh


1 Answers

Using AJAX Control Toolkit is the solution that matches your requirements.

In AJAX Control Toolkit, there is CascadingDropDown Control

Tag Syntax:

<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" />

And then you need to create an Web Service and few Web Method(s) for it having following method signature,

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

UPDATE

You have do something like this using if-Else-If, Answer is given on assumptions and purely an example to the implementations.

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

I hope that my answer helps you

Thanks and Regards

Harsh Baid

like image 179
Harsh Baid Avatar answered Dec 28 '22 06:12

Harsh Baid