Razor Pages - 如果值匹配，如何将模型数据添加到硬编码选择选项答案

【问题标题】：Razor Pages - How to add model data to hardcoded select options if the value is matchingRazor Pages - 如果值匹配，如何将模型数据添加到硬编码选择选项
【发布时间】：2021-03-23 14:40:15
【问题描述】：

我的 Razor 页面上有一个硬编码的选择选项。

这里是选择部分：

<div class="form-group col-md-5 input-group">
                        <select class="custom-select" id="validationCustom04" required>
                            <option selected disabled value="">Choose...</option>
                            <option value="000000001585">2100 ZA</option>
                            <option value="000000001570">10 TL'lik Steam Bakiyesi</option>
                            <option value="000000001696">4300 ZA</option>
                            <option value="000000001572">400 Riot Points</option>
                            <option value="000000001573">840 Riot Points</option>
                            <option value="000000001574">Gameforge 6 TRY E-Pin</option>
                            <option value="000000001575">50 Hükümdarlık</option>
                            <option value="000000001582">10 TL Razer Gold Pin</option>
                            <option value="000000001583">25 TL Razer Gold Pin</option>
                            <option value="000000001705">20 TL'lik Steam Bakiyesi</option>
                            <option value="000000001706">9000 ZA</option>
                            <option value="0187022">10 TL Razer Gold Pin</option>
                            <option value="0186479">10 TL Steam Cüzdan Kodu</option>

                        </select>
                        <div class="invalid-feedback">
                            Please select a game.
                        </div>


                    </div>

这是我正在使用的示例模型：

public class GameBanksDto
    {
        [DisplayName("Product Code")] public string ProductCode { get; set; }

        [DisplayName("Description")] public string ProductDescription { get; set; }

        [DisplayName("Unit Price")] public double UnitPrice { get; set; }
        [DisplayName("Stock Quantity")] public int Quantity { get; set; }
    }

这是我传递给 Razor 页面的列表：

var gamestock = await _context.GameBanks
                .Where(m => m.used == 0)
                .Where(n => n.status == 0)
                .Where(p => p.status == 2)
                .GroupBy(g => new
                {
                    g.ProductCode,
                  
                })
                .Select(gcs => new GameBanksDTO
                {
                    ProductCode = gcs.Key.ProductCode,
                    Quantity = gcs.Count(g => g.Quantity)
                })
                .ToListAsync();

是否可以将数量添加到选择选项的匹配硬编码值中？（我假设 000000001585 与型号产品代码匹配。）

<option value="000000001585">2100 ZA *Stock Quantity:100*</option>

提前致谢。

【问题讨论】：

你想什么时候添加相应的数量来选择选项？应用程序运行或当你选择项目时？你为什么这样做？我认为无论是否应该这样做，都是一件复杂的事情并降低性能。
将你的“硬编码”值放在列表或字典或其他东西中，然后使用 @foreach() 将它们输出到 Razor 页面中
嗨@Cenk，如果我的回答可以帮助您解决问题，您能接受吗？如果没有，请您跟进让我知道吗？参考：How to accept as answer。谢谢。

标签： c# html asp.net-core razor razor-pages

【解决方案1】：

您可以使用 jQuery 更改硬编码值，如下所示：

<script>
 $(function () {
    $("#validationCustom04 > option").each(function () {
        var count = '@Model.GameBanksDto.Count';
        if (count != '') {
            var item = true;
            @for (var i = 0; i < Model.GameBanksDto.Count; i++) {
                    @: item = `@Model.GameBanksDto[i].ProductCode`;
                    @:if (item == this.value)
                    @: {
                         @: var value = this.text;
                         @: $(this).text(value +" Stock Quantity: "+ '@Model.GameBanksDto[i].Quantity')
                    @:}
            }
        }
    });

})
</script>

后端代码：

public class IndexModel : PageModel
{
    public List<GameBanksDto> GameBanksDto { get; set; }
    public void OnGet()
    {
       //for easy testing I hard coded the data
        GameBanksDto = new List<GameBanksDto>()
        {
            new GameBanksDto(){ProductCode="000000001585",Quantity=12},
            new GameBanksDto(){ProductCode="000000001570",Quantity=34},
            new GameBanksDto(){ProductCode="000000001696",Quantity=32},
            new GameBanksDto(){ProductCode="000000001572",Quantity=33}
        };

    }
}

结果：

【讨论】：