如何在 MVC 应用程序中引用下拉列表

Question

请协助，我正在尝试引用我在控制器中编码的下拉列表并使用 viewBag 将其获取到视图中，但现在我需要在 JQuery 函数中引用视图，

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

我的 JQuery 代码是：

    <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;***
            
        }

       });
   
   </script>`
```
I am trying to display the value in amount input textbox. The amount would be based on user designation and the rate per hour.



```
**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;***
            
        }

       });
   
   </script>
```
`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](https://i.stack.imgur.com/rnaEg.jpg)````

Answer 1

尝试以下代码：

1. 添加金额输入：

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

2.修改

<script>

，如：

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

结果：