Используйте указанную c часть кода (img sr c), которую я сгенерировал, используя foreach l oop на странице, которую я открывал, используя asp -route-id и asp -page

Question

Это, вероятно, действительно просто, и я ищу наиболее интересное место, когда ищу ответы в Интернете, поэтому извиняюсь за нелюбовь вопроса. Вот так ...

Я занимаюсь разработкой ASP. NET Базового веб-приложения (с использованием страниц Razor) и использую Entity Framework Core в Visual Studio 2019. Я создал страницу, которая генерирует кучу различные изображения и кнопки в карусели OWL2 с использованием foreach на основе моей модели:

<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;

et c ...

Это все работает нормально. Однако, когда пользователь нажимает на кнопку, т.е.

<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>

, я хотел бы иметь возможность взять точное изображение, которое было сгенерировано случайным образом, и использовать его на открывшейся странице.

it будет выглядеть примерно так:

<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 sr c. Поэтому я следовал логике c и также включил для этого тег asp -helper-ie, то есть asp -route-ImgType = "@ jobTitleModel.ImageType.ImageTypeOption" .

Итак, моя структура ссылок выглядела следующим образом:

<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 Page в качестве ссылки в ссылке и отредактировал Index.cs html .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.cs html я добавил:

@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"/>

И эй Presto! !! это сработало.

Answer 1

Я хочу, чтобы он работал так же, как помощник asp -route-ID, но я думаю, что это будет неправильно, поскольку он добавит его в 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>

Кроме того, если вы не хотите передавать данные randomImg в виде строки запроса или параметра маршрута в URL, вы можете опубликовать сгенерированный Id img через скрытую форму, как показано ниже.

Метод обработчика ShowImg

public IActionResult OnPostShowImg()
{
    //code logic here

    return Page();
}

Запуск отправки формы при нажатии <a> tag

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