Change the values of dropdown when the values of other dropdown changes

Santosh Umarani 81 Reputation points
2022-01-24T12:35:27.86+00:00

Hi,

I have two drop downs "TestTypes" and "VersionNumber". I am filling the values of these drop downs in Controller from list :

ViewData["TestTypes"] = allowedTestTypes.Distinct().ToList();
ViewData["VersionNumber"] = allowedTestVersions.Distinct().ToList();

In the View I am binding these values like this:

@azzedinehtmlsql .DropDownList("TestTypeName", new SelectList((List<string>)ViewData["TestTypes"]), new { id = "testTypeName" })
@azzedinehtmlsql .DropDownList("VersionNumber", new SelectList((List<string>)ViewData["VersionNumber"]))

I want to change the values of VersionNumber dropdown on the basis of values selected in TestTypeName. Can you please let me know how can I achieve this functionality when a value in dropdown is changed, the content in the other dropdown should change.

Kindly waiting for your response.

Thanks,
Sanosh

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,240 questions
0 comments No comments
{count} votes

5 answers

Sort by: Most helpful
  1. Bruce (SqlWork.com) 54,711 Reputation points
    2022-01-24T15:40:58.22+00:00

    This is done with JavaScript and is called cascading dropdowns. Google for lots of examples.

    0 comments No comments

  2. Yijing Sun-MSFT 7,061 Reputation points
    2022-01-25T03:23:59.29+00:00

    Hi @Santosh Umarani ,
    I suggest you could pass TestTypeName value using Jquery ajax to code behind and then you could select the VersionNumber value according the selected values in TestTypeName.
    Just like this:

    <script type="text/javascript">    
        $(document).ready(function () {    
            $('#TypeName').change(function () {    
                $.ajax({    
                    type: "post",    
                    url: "/DropDownList/GetDistrict",    
                    data: { TypeName: $('#TypeName').val() },    
                    datatype: "json",    
                    traditional: true,    
                    success: function (data) {    
                        .....  
                    }    
                });    
            });    
        });    
    </script>    
    

    In the code behind:

    [HttpPost]    
            public ActionResult GetDistrict(string TypeName)    
            {   
                  .......  
                 select xxx where TestTypeName==TypeName;  
            }    
    

    Best regards,
    Yijing Sun


    If the answer is helpful, please click "Accept Answer" and upvote it.

    Note: Please follow the steps in our  documentation  to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

  3. Santosh Umarani 81 Reputation points
    2022-01-25T03:32:23.563+00:00

    Thank you YijingSun-MSFT for your response.

    I could not get to know what is the below block is for and what I should supposed to do in this block of code?

    success: function (data) {
    .....
    }

    Kindly waiting for your response.

    Thanks,
    Santosh


  4. Santosh Umarani 81 Reputation points
    2022-01-25T08:39:43.313+00:00

    Thank you YijingSun-MSFT for your response. I am writing the below code in view.

    $('#testTypeName').change(function () {
    $.ajax({
    type: "post",
    url: "/TestCases/GetVersionNumber",
    data: $("#testTypeName").val(),
    dataType: "json",
    success: function (data) {
    $("#testTypeName").selectItem=data;
    }
    });
    In controller I have this code;

    public ActionResult GetVersionNumber(string testTypeName)
    {

            string projectName = Request.QueryString["testTypeName"].ToString();
            string projectName1 = Request.QueryString["TestTypeName"].ToString();
    
            return null;
        }
    

    I am not getting the selected value in "testTypeName" in Controller. I am not getting what mistake I am doing.
    Can you please do the needful to get it resolved.

    Kindly waiting for your response.

    Thanks,
    Santosh

    0 comments No comments

  5. Santosh Umarani 81 Reputation points
    2022-01-25T08:54:13.683+00:00

    This is how I am using dropdownlist:

    @azzedinehtmlsql .DropDownList("TestTypeName", new SelectList((List<string>)ViewData["TestTypes"]), new { id = "testTypeName" })