locked
Multiple Droplist Filters in 1 view RRS feed

  • Question

  • User982203039 posted

    How can I go from 1 droplist filter in a view to using 3 droplist for filter. I want on change of each of the 3 droplist to filter on all 3. Does that makes sense? . How can I do this? Here is what I am trying. I am not sure how to change the Script and if my controller is OK?

    Thanks!

    <h>
    
     Status: @Html.DropDownList("Stat", ViewBag.Stat as SelectList, "New")
    
    Assigned: @Html.DropDownList("Assigned", ViewBag.Assigned as SelectList, "New")
    
    </h>
    
    
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
    
    
            $("#Stat").change(function () {
                var stat = $("#Stat").val();
    
                var routeVal = "?Status=";
                var url = '@Url.Action("Index", "HelpDesk")';
                var link = url + routeVal + stat
                window.location.href = link
                //alert(link);
    });
    
    </script>
    
    
    
    public ActionResult Index(string Status, string Tech)
    
    {
    
    var helpdesk = from m in db.HelpDesks
    
    where m.Status == Status || Status == null || Status == "" &&
    
     m.Technician == Tech || Tech == null || Tech == ""
    
    select m;
    

    Tuesday, September 17, 2019 2:24 PM

All replies

  • User61956409 posted

    Hi Baze72,

    Baze72

    I want on change of each of the 3 droplist to filter on all 3.

    If you'd like to put all code logic in one code block instead of writing it for each dropdown change event, you can refer to the following sample.

    Status: @Html.DropDownList("Stat", ViewBag.Stat as SelectList, "New", new { @class = "ddlfilter" })
    
    Assigned: @Html.DropDownList("Assigned", ViewBag.Assigned as SelectList, "New", new { @class = "ddlfilter" })
    
    Owner: @Html.DropDownList("Owner", ViewBag.Owner as SelectList, "New", new { @class = "ddlfilter" })
    <script type="text/javascript">
        $(function () {
            $(".ddlfilter").change(function () {
                var stat = $("#Stat").val(); 
                var assigned = $("#Assigned").val(); 
                var owner = $("#Owner").val(); 
    
                //your code logic here
                alert("Your selections are Owner - " + owner + "; Assigned task - " + assigned + "; Status - " + stat);
            });
        })
    </script>

    With Regards,

    Fei Han

    Wednesday, September 18, 2019 2:53 AM
  • User982203039 posted

    This is exactly what I needed.

    But now I have another issue. - it only see 1 filter at a time. After the refresh it resets the DropDownLists. It only works with 1 filter at a time. 

    Here is the URls:

    Clicking Status:
    http://localhost:50200/HelpDesk?Status=New&Tech=

    Clicking Assigned:
    http://localhost:50200/HelpDesk?Status=&Tech=Greg

    Notice how it does not see the other filter??

    <h>
        Status: @Html.DropDownList("Stat", ViewBag.Assigned as SelectList, new { @class = "ddlfilter" })
    
        Assigned: @Html.DropDownList("Technician", ViewBag.Technician as SelectList, new { @class = "ddlfilter" })
    
    
    </h>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".ddlfilter").change(function () {
                var stat = $("#Stat").val();
                var tech = $("#Technician").val();
                var routeVal = "?Status=";
                var routeVal1 = "Tech=";
                var url = '@Url.Action("Index", "HelpDesk")';
                var link = url + routeVal + stat + "&" + routeVal1 + tech
                window.location.href = link
            });
        })
    </script>

    Wednesday, September 18, 2019 3:24 PM
  • User61956409 posted

    Hi Baze72,

    Please try the following code.

    $(".ddlfilter").change(function () {
        var stat = $("#Stat").val(); 
        var tech = $("#Assigned").val(); 
    
        if (stat != "" && tech != "") {
            var routeVal = "?Status=";
            var routeVal1 = "Tech=";
    
            var url = '@Url.Action("Index", "HelpDesk")';
            var link = url + routeVal + stat + "&" + routeVal1 + tech;
            window.location.href = link;
        } else {
            //code logic here
            alert("Please select option from another dropdown");
        }
    });

    With Regards,

    Fei Han

    Thursday, September 19, 2019 1:39 AM
  • User982203039 posted

    Hi Fei Han,

    I have tried this everytime I select a tech it gives me Please select option from another dropdown - even though there should be some results.

    , but I think my main issue is that my DropDownList is not keeping the selection after refreshing. How do I do this?

    Thanks!

    Baze

    Thursday, September 19, 2019 2:22 AM
  • User61956409 posted

    Hi Baze72,

    main issue is that my DropDownList is not keeping the selection after refreshing.

    You can dynamically set selected value for dropdown, like below.

    $(function () {
        var selected_vals = new URLSearchParams(window.location.search);
        if (selected_vals != "") {
            $("#Stat").val(selected_vals.get("Status"));
            $("#Assigned").val(selected_vals.get("Tech"));
        }
    
        //other code logic
    }

    With Regards,

    Fei Han

    Thursday, September 19, 2019 5:23 AM