如何使用 Razor 页面从 ASP.net 核心简单 Web 应用程序的配置中读取 json 对象数组

How to read array of json objects from configuration in ASP.net Core simple web app using Razor pages

我是 .Net 新手,使用 .Net 核心创建简单的 Web 应用程序。它目前使用 Razor 页面作为视图及其静态内容。

这是项目结构,

现在,我正在根据一些 JSON 配置将此页面的内容动态化。因此,我只是将内容添加到 appsetting.json 文件以读取 json 并将其传递给如下所示的视图,根据 Microsoft 的文档。

以下是我的 appsettings.json,如果我在此处更改此 VideoProperties url,它将反映在整个应用程序的任何位置。

{
  "AllowedHosts": "*",
  "Logging": {
    "LogLevel": {
      "Default": "Warning"
    }
  },
    "MyVars": [
      {
        "name": "abcd",
        "avatar": "abcd",
        "media": "abcd",
        "category": "abcd",
        "subCategory": "abcd",
        "order": 30,
        "slide": 30
      },
      {
        "name": "abcd",
        "avatar": "abcd",
        "media": "abcd",
        "category": "abcd",
        "subCategory": "abcd",
        "order": 30,
        "slide": 30
      },
      {
        "name": "abcd",
        "avatar": "abcd",
        "media": "abcd",
        "category": "abcd",
        "subCategory": "abcd",
        "order": 30,
        "slide": 30
      },
      {
        "name": "abcd",
        "avatar": "abcd",
        "media": "abcd",
        "category": "abcd",
        "subCategory": "abcd",
        "order": 30,
        "slide": 30
      },
      {
        "name": "abcd",
        "avatar": "abcd",
        "media": "abcd",
        "category": "abcd",
        "subCategory": "abcd",
        "order": 30,
        "slide": 30
      }
    ],
    "VideoProperties": {
      "EmployeeSpeaksVideoUrl": "abcd1P7vBCYAuFczLD6pojJu0a3xYdbdsDhLj",
      "AppSupportVideoUrl": "abcd1nfi9DvdNOlE2tj2CLUdweIpkT8vyfBnh",
      "ClientSpeaksVideoUrl": "abcd1wvLgpCUJg6cTatI5TjIa-eNBI88JcXlt",
      "CloudVideoUrl": "abcd1ipwoyeGjhq8ouwgfx_NsyS2Xd3ZFCnnK",
      "CovidVideoUrl": "abcd1wvLgpCUJg6cTatI5TjIa-eNBI88JcXlt",
      "FunAtWorkVideoUrl": "abcd14wLg8pM2xNtnd5ZZewism8snlLe9A4Ab",
      "KidsAtWorkVideoUrl": "abcd1PuJVNuaxhfvuG7RMqEwVrzJ1VwsEvjIw",
      "BirthdayVideoUrl": "abcd1JjYoe9TGhWU04qzydyz6OtL2ZT6LS8rB",
      "PongalVideoUrl": "abcd10IKZpaAKCLeiyJ2sTAzdESzzyro0DSGx",
      "WomensDayVideoUrl": "abcd1NLe_TNIin9rcekGUtVEpCpoy_4Cl_SFh",
      "NavratriVideoUrl": "abcd19NyLjLLtPBvz-0iYvMsxt9RQrFko8uSd",
      "ChristmasVideoUrl": "abcd1Siwptmm5r_0p7Y6MR6Y6YbCe_zcJ12fS",
      "AnnualPicnicVideoUrl": "abcd1Dd3atu0vRgGQqVFDJ3ZjiH3YNjdBg_4B",
      "CSRVideoUrl": "abcd1wRmwtnesLkFruwVy-BRjCf-8omWeMtcm",
      "GlanceVideoUrl": "abcd1wvLgpCUJg6cTatI5TjIa-eNBI88JcXlt",
      "HRVideoUrl": "abcd1OA0MyrJz3Ti1HYUH4b3R2Q2yxJsGngig",
      "IntroVideoUrl": "abcd14wLg8pM2xNtnd5ZZewism8snlLe9A4Ab",
      "ITSupportVideoUrl": "abcd1XITYeIFwFaleKiO1Hf3E4u5NnYavSvuz",
      "ProductVideoUrl": "abcd1EgQtDl8nO4xe9ePycMbK42d7Q6pOd_Vi",
      "SecurityVideoUrl": "abcd1XITYeIFwFaleKiO1Hf3E4u5NnYavSvuz",
      "TestingVideoUrl": "abcd12Mx7mJN6tgr7Z80uinPd89BhTuIaZTc7",
      "USVideoUrl": "abcd1wvLgpCUJg6cTatI5TjIa-eNBI88JcXlt"
    }
  }

将此添加到 Startup.cs 文件

    public void ConfigureServices(IServiceCollection services)
    {
        services.Configure<CookiePolicyOptions>(options =>
        {
            // This lambda determines whether user consent for non-essential cookies is needed for a given request.
            options.CheckConsentNeeded = context => true;
            options.MinimumSameSitePolicy = SameSiteMode.None;
        });

        services.Configure<VideoProperties>(Configuration.GetSection("VideoProperties"));
        services.AddRazorPages();
    }

在我的 Index.cshtml 文件中,我正在使用

@page
@using Microsoft.Extensions.Options;
@inject IOptions<aspnet_core_dotnet_core.Models.VideoProperties> videoUrl
@model IndexModel
@{
    ViewData["Title"] = "Mive ";
}


<video width="100%" autoplay muted loop id="my-video" @*style="max-height: 550px;"*@>
    <source src=@videoUrl.Value.IntroVideoUrl type="video/mp4">
    Your browser does not support HTML5 video.
</video>

这很好..

我正在尝试以相同的方式读取 appsettings.json 中 json 个对象 (MyVars) 的数组,但我没有得到值。

我在 Startup.cs

中更新的配置
    public void ConfigureServices(IServiceCollection services)
    {
        services.Configure<CookiePolicyOptions>(options =>
        {
            // This lambda determines whether user consent for non-essential cookies is needed for a given request.
            options.CheckConsentNeeded = context => true;
            options.MinimumSameSitePolicy = SameSiteMode.None;
        });

        services.Configure<VideoProperties>(Configuration.GetSection("VideoProperties"));
        
        services.Configure<List<MyVars>>(options => Configuration.GetSection("MyVars").GetChildren());
        
        services.AddRazorPages();
    }

在我的代码中,

@page
@using Microsoft.Extensions.Options;
@inject IOptions<aspnet_core_dotnet_core.Models.VideoProperties> videoUrl
@inject IOptions<List<aspnet_core_dotnet_core.Models.CeiTour>> tours
@model IndexModel
@{
    ViewData["Title"] = "Mive ";
}


<video width="100%" autoplay muted loop id="my-video" @*style="max-height: 550px;"*@>
    <source src=@videoUrl.Value.IntroVideoUrl type="video/mp4">
    Your browser does not support HTML5 video.
</video>
<div>
    @foreach (var item in @tours.Value)
    {
        <div>@item.Avatar</div>
    }
</div>

我的模型,

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace aspnet_core_dotnet_core.Models
{
    public class MyVars
    {        
        public string Name { get; set; }
        public string Avatar { get; set; }
        public string Media { get; set; }
        public string Category { get; set; }
        public string SubCategory { get; set; }
        public long Order { get; set; }
        public long Slide { get; set; }
    }
}

我没有得到 .cshtml 文件中这个 for 循环的任何输出。我不确定这里出了什么问题。如何在 Razor 页面中获取 json 对象的数组,我还需要对同一页面使用 thois javascript。

这是一个工作演示:

改变

services.Configure<List<MyVars>>(options => Configuration.GetSection("MyVars").GetChildren());

services.Configure<List<MyVars>>(Configuration.GetSection("MyVars"));

Razor 页面:

@page
@inject IOptions<List<MyVars>> l
<div>
    @foreach (var item in l.Value)
    {
        <div>@item.Avatar</div>
    }
</div>

结果: