The best way to handle multiple DropDown options

Question

I have a menu with several DropDowns. I added the code, but currently it is completely in the code file. I want to use any design template for an easy and uncluttered way to select options.

The report generation criteria are prepared as follows:

Report Type DropDown options include:

• Type of circuit
• Circuit wise
• Wise district
• Crisscross
• Everything

By default, only the first DropDown is enabled. After selecting an option from this DropDown, enable the corresponding DropDowns.

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

It includes many SQL queries and frequent enable / disable DropDowns. My current code is cluttered with many IF and EndIfs .

I want to know whether to use an Observer pattern or any approach using Classes to simplify this operation. Any way to make this multiple choice and populating 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 is opened. By default, all other DropDowns are disabled. But this does not mean that Cascading DropDown is the right choice, because the choice from the child DropDowns is random.

The whole plan is to simplify the code in an understandable way for each DropDown. There are many Ifs and ElseIfs involved to select the correct request depending on the choice.

For example: a user selects a District-wise report from the main DropDown report type. In this case, three child DropDowns are included, namely:

 Scheme Type Scheme District 

If the user selects “ALL” from the list of chart types, all chart types in all categories are populated in the DropDown chart.

If the user selects a specific type of scheme from the parameters: Urban, Rural or Other, the DropDown scheme filters the name of the schemes.

Scheme DropDown now also has the ALL option. The user can select ALL or select any specific scheme.

The same applies to the county. If ALL is selected, the schemes in the DropDown scheme accept all schemes in all districts, but if a specific district is selected, the Dropdeown Schede must fill out the filtered schemes of that region.

Note that in this case we are moving in the reverse order, because District DropDown filters the DropDown schemes again.

The same applies to Block DropDown.

There are many conditions for checking another selected parameter. Suppose the user has not selected any options, or the user selects ALL.

I want to create separate classes with the names of each DropDown. These classes must retain Observer notifications for any changes to DropDown.

I think I could clarify.

Answer 1

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

AJAX Control Toolkit has 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 a web service and several web methods (s) that will have the following method signature,

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

UPDATE

You have something similar, using if-Else-If, the Answer is given on assumptions and is a purely implementation example.

  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 my answer helps you

Thanks and Regards

Harsh baid

Answer 2

Since it seems that you can do all this on the client side using Javascript, why do you query your database so often? You must persist on the client side and the data server side. You can call all related drop-down data, cache it, and from the client side call WebMethod, which returns JSON with the necessary data. For persistence of the server-side object, you should check Entity Framework 4.1, where each object is a table view.

I would use jQuery with Knockout JS or just jQuery for it, storing client-side data using JSON, there is no need to go back and go to sql server.

Here is a good example of Knockout JS in action.
http://knockoutjs.com/examples/cartEditor.html

Of course, if the data does not change very often.

Answer 3

Not quite what you are looking for, but you can check how I solved a similar problem in mvc using jQuery. The same can be achieved in web forms using web methods instead of mvc actions.

This is a 3-part story, and the code is available on a bitbucket. You can start building part 2, because first it’s creating a demo application and setting up a database.

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

There is a working example for two dropdown menus, but I used the same solution for 3 and 4 without any problems.

UPDATE Since you have an available source, I will only change the corresponding lines. The adjustment to prevent multiple ajax calls would be to put the parameter values ​​in the first choice for id (or id for values ​​that it doesn't matter), or you can use some attribute in the dependent drop down list if you cannot change identifiers and values, but I will keep it simple, for example. Then, if you change the drop-down menu of the wizard, you check whether you need to load the target:

 $('#' + 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"); } }); 

You can easily change this if you use any custom select attribute if you don't want to use id.

UPDATE 2 I just saw that you updated the question. As I can see, there is a case when you need to update all the dependent drop-down lists. To do this, you need to have the id-s of all the drop-down lists that need to be updated in the last value of the main choice option, separated, for example, with "," so that you can check if any of its val().split(",") id of the dependent drop-down list, or you can have an attribute in the dependency that contains the values ​​of all the parameters for which it needs to be updated. You see in my code that for selectFromAjax, the values ​​in the drop-down list and the name of the main field are selected. Since you probably need some kind of value here to process the server code, I suggest you use the second method, that is, add a custom attribute for the dependend drop-down list in which you put the values ​​of the selection parameters from the wizard that are relevant for this field and dependent should be loaded when selected.

Do you understand what I offer?

Answer 4

If I understand your paradigm correctly, indeed, you have one drop-down list (Report Type) that determines whether to choose according to type of scheme, scheme, district or block (or all of the above). If you didn’t have the “All” option, I would suggest either having only two drop-down lists (one for the type of report and one whose label has changed in accordance with it), or remove the drop-down list “Type of report” and put a switch next to each other, to choose which one you want. When you enable the "All" option, you can not complicate the situation much more; for example, you can add another radio button and include all four drop-down lists.

However, you are asking about the observer pattern. From GoF, the Observer pattern is useful if:

• Abstraction has two aspects: one depends on the other;
• Changing one object requires changing others, and you do not know how many objects you need to change; or
• An object should be able to notify other objects without making assumptions about who these objects are.

I am not entirely sure that any of these situations apply here. The second situation has some similarities with your problem, but you know what needs to be changed and how to do it. If the only update you make is the type of report, it is just a matter of enabling or disabling the correct drop down menu. However, you say that other drop-down lists affect each other, possibly in the "All" option. Even so, I'm not sure if the observer pattern itself is the most useful. Since you populate the dropdown lists with SQL, I assume that you can use several different stored procedures (or special queries) depending on what parameters you need. Instead, I could only offer one request for a drop-down list, using NULL . For example, to populate Block from other values, you can:

 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 

Without knowing your database, I don’t know exactly what will work, but the idea is that you just pass NULL for everything that you have not yet selected. Perhaps this will simplify your code a bit.

If this does not answer your question, let me know what I can clarify.

Answer 5

There is an easy way to achieve this, follow this approach: First of all, just add AjaxUpdatePanel ... and then set the AutoPostBack property to true in the drop-down list, then just add a handler to the OnSelectedIndexChanged event to enable the second drop.

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