首页 > 解决方案 > Razor Pages - 如果值匹配,如何将模型数据添加到硬编码选择选项

问题描述

我的 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();

是否可以将 Quantity 添加到选择选项的匹配硬编码值中?(我假设 000000001585 与型号产品代码匹配。)

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

提前致谢。

标签: c#htmlasp.net-corerazorrazor-pages

解决方案


您可以使用 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}
        };

    }
}

结果:

在此处输入图像描述


推荐阅读