在我使用 asp-route-id 和 asp-page 打开的页面中使用我使用 foreach 循环生成的特定代码部分 (img src)

Question

这可能真的很简单，我在网上寻找答案时完全在寻找破旧的地方，所以很抱歉这个问题很简单。开始了...

我正在开发一个 ASP.NET 核心 Web 应用程序（使用 Razor 页面）并在 Visual Studio 2019 年利用 Entity Framework 核心。我创建了一个生成一堆不同图像的页面和基于我的模型使用 foreach 的 OWL2 旋转木马中的按钮：

<div class="owl_@bandModel.BandId owl-carousel owl-theme owl-drag">

    @foreach (var jobTitleModel in bandModel.JobTitles)
    {
        @if (jobTitleModel.ImageType.ImageTypeOption != null)
        {
            switch (jobTitleModel.ImageType.ImageTypeOption)
            {
                case "Apron":
                    <div class="item">
                        @{int randomImg = random.Next(1, Apron);}
                        <img src="~/content/images/map/@jobTitleModel.ImageType.ImageTypeOption/img@(randomImg).svg" type="image/svg+xml" />
                        <a asp-page="/UIMain/Requirements/Index" asp-route-ID="@jobTitleModel.JobTitleId" class="btn btn-outline-primary mb-2 mt-1 btn-block">@jobTitleModel.JobTitle</a>

                    </div>
                    break;
                case "Casual":
                    <div class="item">
                        @{randomImg = random.Next(1, Casual);}
                        <img src="~/content/images/map/@jobTitleModel.ImageType.ImageTypeOption/img@(randomImg).svg" type="image/svg+xml" />
                        <a asp-page="/UIMain/Requirements/Index" asp-route-ID="@jobTitleModel.JobTitleId" class="btn btn-outline-primary mb-2 mt-1 btn-block">@jobTitleModel.JobTitle</a>
                    </div>
                    break;

等...

一切正常。但是，当用户单击按钮时，即

<a asp-page="/UIMain/Requirements/Index" asp-route-ID="@jobTitleModel.JobTitleId" class="btn btn-outline-primary mb-2 mt-1 btn-block">@jobTitleModel.JobTitle</a>

我希望能够拍摄随机生成的准确图像并在打开的页面上使用它。

看起来像这样：

<img src="~/content/images/map/Apron/img5.svg" type="image/svg+xml" />

所以我的问题是，这可以做到吗？我已经探索了 asp-all-route-data 助手，但我可以弄明白。我希望它以与 asp-route-ID 助手相同的方式工作，但我认为这是错误的，因为它将把它添加到 URL.

值得指出的是，这些图像没有任何数据库关联，我不得不从 wwwroot/contents 文件夹中随机添加它们（使用 img#）作为随机数，以确保他们每次看起来都不一样。

提前致谢。

（感谢韩非的解释和信心的提升，有时候有人说你可以按照你的想法做事会很有帮助）

编辑以显示我如何实施@FeiHan 的建议：

韩飞建议我使用：

<a asp-page="/UIMain/Requirements/Index" asp-route-ID="@jobTitleModel.JobTitleId" asp-route-ImgId="@randomImg" class="btn btn-outline-primary mb-2 mt-1 btn-block">@jobTitleModel.JobTitle</a>

要点是添加 asp-route-ImgId="@randomImg" 助手，然而，这不是我所需要的全部，因为我还需要将 ImageType 传递到 img src 中。所以我遵循了这个逻辑，还包括了一个 asp-helper-tag，即 asp-route-ImgType="@jobTitleModel.ImageType.ImageTypeOption" .

所以我的 link 结构如下所示：

<a asp-page="/UIMain/Requirements/Index" asp-route-ID="@jobTitleModel.JobTitleId" asp-route-ImgType="@jobTitleModel.ImageType.ImageTypeOption" asp-route-ImgId="@randomImg" class="btn btn-outline-primary mb-2 mt-1 btn-block">@jobTitleModel.JobTitle</a>

然后我转到 Requirements/Index 页面 作为 link 中的参考并编辑了 Index.cshtml.cs 包括：

namespace ProjectName.Pages.UIMain.Requirments
{
    public class IndexModel : PageModel
    {
        public string RndmImgSrc { get; set; }

        public async Task OnGetAsync(int? id, int? ImgId, string ImgType)
        {
                    RndmImgSrc = string.Format("/content/images/map/{0}/img{1}.svg", ImgType, ImgId);
//If you are a proper noob like me, a little heads-up here. You need to remove the "~" symbol from the begining of the URL (~/content/) as the Routing will add the current page route and wont refer to the wwwroot.
        }
    }
}

然后在Index.cshtml中添加：

@page "{ImgType?}/{ImgID?}/{ID?}" //This was just to tidy up the URL
@model ProjectName.Pages.UIMain.Requirments.IndexModel

<img src="@Model.RndmImgSrc" type="image/svg+xml" width="300"/>

嘿嘿！成功了。

Answer 1

I want it to work in the same way that the asp-route-ID helper does, but I think that this would be wrong because it will add it to the URL.

您正在使用标签导航到另一个页面，通过 URL 传递数据是可以的。您可以传递生成的 Img Id randomImg，如下所示。

<div class="item">
    @{int randomImg = random.Next(1, Apron);}
    <img src="~/content/images/map/@jobTitleModel.ImageType.ImageTypeOption/img@(randomImg).svg" type="image/svg+xml" />

    <a asp-page="/UIMain/Requirements/Index" asp-route-ID="@jobTitleModel.JobTitleId" asp-route-ImgId="@randomImg" class="btn btn-outline-primary mb-2 mt-1 btn-block">@jobTitleModel.JobTitle</a>
</div>

此外，如果您不想在 URL 中将数据 randomImg 作为查询字符串或路由参数传递，您可以 post 通过隐藏表单生成 img 的 Id，如下所示。

switch (jobTitleModel.ImageType.ImageTypeOption)
{
    case "Apron":
        <div class="item">
            @{int randomImg = random.Next(1, Apron);}
            <img src="~/content/images/map/@jobTitleModel.ImageType.ImageTypeOption/img@(randomImg).svg" type="image/svg+xml" />

            <form method="post" asp-page="/UIMain/Requirements/Index" asp-page-handler="ShowImg" asp-route-ID="@jobTitleModel.JobTitleId">
                <input type="hidden" name="ImgId" value="@randomImg" />
                <input type="submit" class="btnhidden" />
            </form>
            <a asp-page="/UIMain/Requirements/Index" asp-route-ID="@jobTitleModel.JobTitleId" asp-route-ImgId="@randomImg" class="btn btn-outline-primary mb-2 mt-1 btn-block" onclick="return myfunc(this)">@jobTitleModel.JobTitle</a>
        </div>
        break;

    case "Casual":
        <div class="item">
            @{randomImg = random.Next(1, Casual);}
            <img src="~/content/images/map/@jobTitleModel.ImageType.ImageTypeOption/img@(randomImg).svg" type="image/svg+xml" />
            <form method="post" asp-page="/UIMain/Requirements/Index" asp-page-handler="ShowImg" asp-route-ID="@jobTitleModel.JobTitleId">
                <input type="hidden" name="ImgId" value="@randomImg" />
                <input type="submit" class="btnhidden" />
            </form>
            <a asp-page="/UIMain/Requirements/Index" asp-route-ID="@jobTitleModel.JobTitleId" asp-route-ImgId="@randomImg" class="btn btn-outline-primary mb-2 mt-1 btn-block" onclick="return myfunc(this)">@jobTitleModel.JobTitle</a>
        </div>
        break;
}

处理程序方法 ShowImg

public IActionResult OnPostShowImg()
{
    //code logic here

    return Page();
}

点击 <a> 标签时触发表单提交

function myfunc(el) {
    $(el).prev().find("input[type='submit']").click();
    return false;
}

在我使用 asp-route-id 和 asp-page 打开的页面中使用我使用 foreach 循环生成的特定代码部分 (img src)

Use a specific part of code (img src) that I generated using a foreach loop in the page I open using asp-route-id and asp-page

html

image

entity-framework-core

asp.net-core

razor-pages