Show Hide DropDownList based on RadioButtonList selection using jQuery in ASP.Net MVC

smcdevelopments
 
on Sep 16, 2021 09:31 PM
Sample_191650.zip
371 Views

In my asp.MVC application I have created two combo boxes as Manager and TopManager.

I have loaded Manager list to the Temp list and another Temp list to the Top managers list.

@using Asp_PASMVC.Infrastructure
@{
    List<SelectListItem> Employees = (List<SelectListItem>)TempData.Peek("EmployeeList");
    List<SelectListItem> TopEmp = (List<SelectListItem>)TempData.Peek("TopEmpDroDown");
    if (Employees.Exists(x => x.Value == "1"))
    {
        Employees.Where(x => x.Value == "1").First().Selected = true;

    }
    if (TopEmp.Exists(x=> x.Value =="1"))
    {
        TopEmp.Where(x => x.Value == "1").First().Selected = true;
    }
    string UserLvel = TempData.Peek("UserLevelClaims").ToString();

}

Here is the View 

<li style="padding-bottom:15px">
    @using (Html.BeginCollectionItem("ApprovalPartyList"))
    {
        <div class="row">
            <div class="col-md-3 col-sm-6">
                <div class="form-group row">
                    For Manager
                    <div class="col-sm-8">
                        @Html.RadioButtonFor(m => m.Approve_Type, false)
                    </div>
                </div>
            </div>
            @if (UserLvel != "1")
            {
                <div class="col-md-4 col-sm-6">
                    <div class="form-group row">
                        For Top Manager
                        <div class="col-sm-8">
                            @Html.RadioButtonFor(m => m.Approve_Type, true)
                        </div>
                    </div>

                </div>
            }
        </div>
        <br />
        <div class="row">
            <div class="col-md-6 col-sm-6">
                <div class="form-group row">
                    Select the Approver
                    <div class="col-sm-8">
                        @Html.DropDownListFor(model => model.Approver_Id, Employees, new { @class = "js-dropdown" })
                        @Html.ValidationMessageFor(model => model.Approver_Id, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
        </div>
        <button type="button" class="btn btn-danger" onclick="$(this).parent().remove();">Delete</button>
    }
</li>
<script>
    $('.js-dropdown').select2({
        width: '100%', // need to override the changed default

    });
</script>

The issue is combo box only shows the Manager list (I have assigned ), I want it to change If Radio button Manager selected the combo box should load the 'Employees' and If 'Top Manager' Selected, Should load the 'TopEmp' list to the combo box.

This is my unfinished script. 

<script>
    $('#Approve_Type').change(function () {
        if ($(this).val() == false) 
        {
            alert('', 'Manager Selected');          
        } else {
            alert('', 'TopManager Selected');
        }
    });
</script>

alert should replace with the code which i pass to the combobox list. I cannot complete the code

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Sep 18, 2021 01:42 AM

Hi smcdevelopmen...,

Check the example.

Model

public class Infrastructure
{
    public bool Approve_Type { get; set; }
    public int Approver_Id { get; set; }
}

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        List<SelectListItem> employees = new List<SelectListItem>();
        employees.Add(new SelectListItem { Text = "Emp 1", Value = "1" });
        employees.Add(new SelectListItem { Text = "Emp 2", Value = "2" });
        employees.Add(new SelectListItem { Text = "Emp 3", Value = "3" });
        employees.Add(new SelectListItem { Text = "Emp 4", Value = "4" });
        TempData["EmployeeList"] = employees;

        List<SelectListItem> topEmpDroDown = new List<SelectListItem>();
        topEmpDroDown.Add(new SelectListItem { Text = "Emp 1", Value = "1" });
        topEmpDroDown.Add(new SelectListItem { Text = "Emp 3", Value = "2" });
        TempData["TopEmpDroDown"] = topEmpDroDown;

        TempData["UserLevelClaims"] = 2;
        return View();
    }
}

View

@model ComboBox_RadioButton_Selection_MVC.Models.Infrastructure
@{
    Layout = null;

    List<SelectListItem> Employees = (List<SelectListItem>)TempData.Peek("EmployeeList");
    List<SelectListItem> TopEmp = (List<SelectListItem>)TempData.Peek("TopEmpDroDown");
    if (Employees.Exists(x => x.Value == "1"))
    {
        Employees.Where(x => x.Value == "1").First().Selected = true;
    }
    if (TopEmp.Exists(x => x.Value == "1"))
    {
        TopEmp.Where(x => x.Value == "1").First().Selected = true;
    }
    string UserLvel = TempData.Peek("UserLevelClaims").ToString();
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style></style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.js-dropdown').select2({ width: '100%' });
            $('[id*=ddlTopEmployees]').select2().next().hide();

            $('[id*=Approve_Type]').change(function () {
                $('[id*=ddlEmployees]').select2().next().hide();
                $('[id*=ddlTopEmployees]').select2().next().hide();
                if ($(this).val() == "False") {
                    $('[id*=ddlEmployees]').select2({ width: '100%' }).next().show();
                } else {
                    $('[id*=ddlTopEmployees]').select2({ width: '100%' }).next().show();
                }
            });
        });
    </script>
</head>
<body class="container">
    <li style="padding-bottom:15px">
        @using (Html.BeginForm("Index", "Home", FormMethod.Post))
        {
            <div class="row">
                <div class="col-md-3 col-sm-6">
                    <div class="form-group row">
                        For Manager
                        <div class="col-sm-8">
                            @Html.RadioButtonFor(m => m.Approve_Type, false)
                        </div>
                    </div>
                </div>
                @if (UserLvel != "1")
                {
                    <div class="col-md-4 col-sm-6">
                        <div class="form-group row">
                            For Top Manager
                            <div class="col-sm-8">
                                @Html.RadioButtonFor(m => m.Approve_Type, true)
                            </div>
                        </div>
                    </div>
                }
            </div>
            <br />
            <div class="row">
                <div class="col-md-6 col-sm-6">
                    <div class="form-group row">
                        Select the Approver
                        <div class="col-sm-8">
                            @Html.DropDownListFor(model => model.Approver_Id, Employees, new { @id = "ddlEmployees", @class = "js-dropdown" })
                            @Html.DropDownListFor(model => model.Approver_Id, TopEmp, new { @id = "ddlTopEmployees", @class = "js-dropdown" })
                            @Html.ValidationMessageFor(model => model.Approver_Id, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>
            </div>
        }
    </li>
</body>
</html>

Screenshot