ASP.NET 中的下拉列表-解网

问：

我正在尝试使用以下计算来制作价格计算器：

最终价格=原价（1-百分比）（100-特价） /100

我降低了价格部分，降低了特价部分，但是当它归结为百分比（这是通过在下拉列表上选择颜色建立的百分比）时，我不明白如何让 html 上的列表与 C# 中的模型一起使用。

我对 ASP.NET 和编码很陌生，我根本不明白这是如何工作的。

在程序的 Index.cshtml 部分中，我键入了如下列表：

<label asp-for="Color">The color of tag:</label>
<select name="colors" id="color">
<option value="red">Red</option>
<option value="orange">Orange</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
</select>

我正在尝试给每种颜色一个百分比，以便应该在模型上进行的计算正常工作，但我不知道该怎么做。我的导师建议我将其添加到模型中：

public string Color {get; set;}

但真的不知道目的是什么。我不知道是我想多了，还是只是我经验不足。请帮忙。

C# asp.net 列表下拉列表 HTML 列表

<select class="colors" id="color">
<option value=0.1 style="background-color:red;">Red</option>
<option value=0.2 style="background-color:orange;">Orange</option>
<option value=0.3 style="background-color:yellow;">Yellow</option>
<option value=0.4 style="background-color:green;">Green</option>
</select>

然后你可以通过 $（“#color”）.val（）获取该值。

如果你的意思是从模型中获取值并将其传递给后端，这里是代码示例：

index.cshtml

...
<select class="colors" id="color">
    <option value=0 style="background-color:none;">Select the percentage</option>
</select>
...
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- Including jQuery library -->
<script>

    $(document).ready(function () {

        InitDrop();
        $('#color').change(function () {
            GetRecordsList();
        });
    })

    function InitDrop() {
        $.ajax({
            url: '/SelectList/GetRecords',
            type: 'Get',
            datatype: 'json',
            data: {
                forPer: $("#color").val()
            },
            success: function (data) {
                $.each(data, function (i, item) {
                    $("#color").append('<option value=' + item.percentage + ' style="background-color:' + item.color + ';"' + '>' + item.color + '</option>');
                });
            }
        });
    }

    function GetRecordsList() {
        $.ajax({
            url: '/SelectList/GetRecords',
            type: 'Get',
            datatype: 'json',
            data: {
                forPer: $("#color").val()
            },
            success: function (data) {
                $.each(data, function (i, item) {
                    //Your own function here
                });
            }
        });

    }

</script>

Test.cs ---这是在模型文件夹下，模型应包含所需的属性。

using Microsoft.AspNetCore.Mvc;

namespace WebApplicationPercentage.Models
{
    public class Test
    {
        public double percentage { get; set; }
        public string? color { get; set; }
    }
}

选择列表控制器 .cs

using Microsoft.AspNetCore.Mvc;
using WebApplicationPercentage.Models;

namespace WebApplicationPercentage.Controllers
{
    public class SelectListController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        [HttpGet]
        public IActionResult GetRecords(double forPer)
        {
            // Replace with your actual data retrieval logic from the database
            List<Test> mockData = new List<Test>();
            Test p1 = new Test();
            p1.percentage = 0.1;
            p1.color = "red";
            Test p2 = new Test();
            p2.percentage = 0.2;
            p2.color = "orange";
            Test p3 = new Test();
            p3.percentage = 0.3;
            p3.color = "yellow";
            mockData.Add(p1);
            mockData.Add(p2);
            mockData.Add(p3);

            var List = new List<Test>();
            Console.WriteLine(forPer);
            if (forPer == 0)
            {
                List = mockData;
            }
            else
            {
                List = mockData.Where(a => a.percentage == forPer).ToList();
            }
            return Json(List);
        }
    }
}

这是页面

你可以从后端看到价值

上一个：嵌套 HTML 有序列表从 1.1 开始

下一个：带有嵌套计数器的有序列表，但并非总是如此

ASP.NET 中的下拉列表

Dropdown lists in ASP.NET

评论