How to reference dropdown in MVC Application

Question

Please assist, I am trying to reference dropdown that I've coded in controller and used viewBag to get it in the view, but now I need to reference the view in my JQuery function.

Controller.cs

// GET: GLBMembers/Create
public IActionResult Create()
{
    List<string> regions = new List<string>()
        {
            "Pretoria",
            "Johannesburg",
            "West Rand",
            "Ekurhuleni",
            "Sedibeng"
        };

    ViewBag.region = new SelectList(regions);

    List<string> designation = new List<string>()
        {
            "Chairperson",
            "Deputy Chairperson",
            "Member"
        };

    ViewBag.designation = new SelectList(designation);

    List<string> hours = new List<string>()
        {
            "One Hour",
            "Two Hours",
            "Three Hours",
            "Daily Rate"
        };

    ViewBag.hours = new SelectList(hours);

    return View();
}

View.cshtml

    <div class="form-group row">
        <div class=" form-group col-sm-3">
            <label asp-for="designation" class="col-sm-4 col-form-label"></label>

        @Html.DropDownList("designation",
        ViewBag.designation, "---select designation---",htmlAttributes: new { @class = "form-control"})

            <span asp-validation-for="designation" class="text-danger"></span>
        </div>
       
        <div class="form-group col-sm-3">

            <label asp-for="workDate" class="col-sm-6 col-form-label"></label>
            <input asp-for="workDate" class="form-control  {0:d MMM yyyy" />
            <span asp-validation-for="workDate" class="text-danger"></span>
        </div>

        <div class="form-group col-sm-3">
            <label asp-for="hours" class="col-sm-8 col-form-label"></label>

            @Html.DropDownList("Hours",
            ViewBag.Hours, "---select duration---", htmlAttributes:new { @class = "form-control" })
            <span asp-validation-for="hours" class="text-danger"></span>
        </div>

My jQuery code is:

<script>
    $(document).ready(function () {

    var designation = $("designation").val();
   var rate = $("Hours").val();
   var amount = 0;
   $("designation").change(function () {
       GetAmount();
     });
    });

   function GetAmount() {

       if ((designation === "Chairperson") && (rate === "One Hour")) {
           amount = 800;
          
      } else if ((designation === 'Chairperson') && (rate === "Two Hours")) {
            amount = 801;

       } else if ((designation === "Chairperson") && (rate === "Three Hours")) {
           amount = 1000;

       } else {
         amount = 10000;
      }

      return $("#amount").val() = amount;
        
    }
   });

I am trying to display the value in amount input textbox. The amount would be based on user designation and the rate per hour.

enter image description here

Answer 1

Try the below code:

1. Add input for amount :

    <label asp-for="amount" class="col-sm-8 col-form-label"></label>
   
    <input asp-for="amount" type="text" class="form-control" />
   

2.Modify the <script> like :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<script>
   
        $(document).ready(function () {
        
        $("#designation").change(function () {

             designation= $(this).find("option:selected").text();
          
        });
       
        
       
        $("#Hours").change(function () {

            rate = $(this).find("option:selected").text();
            
            GetAmount();
        });

       
        var amount = 0;
     

    function GetAmount() {

        if ((designation === "Chairperson") && (rate === "One Hour")) {
            amount = 800;

        } else if ((designation === 'Chairperson') && (rate === "Two Hours")) {
            amount = 801;

        } else if ((designation === "Chairperson") && (rate === "Three Hours")) {
            amount = 1000;

        } else {
            amount = 10000;
        }

           
            $('#amount').val(amount);
            }

    });

</script>

result: