Динамически добавлять html элементов на страницу Razor, Asp. Net Core

Question

Я хотел бы динамически добавлять элементы на страницу Razor в Asp. Net Ядро, подобное этому:

@using System
@{
    string Greeting = $"Yo Dawg! {DateTime.Now.ToString()}";
    string GreetingElement = $"<p id='second'>2nd: {Greeting}</p>";
}
<div>
  @*I understand how to do this:*@
  <p id="first">1st: @Greeting</p>

  @*I cannot figure out how to do something like this:*@
  @GreetingElement
</div>

Приведенные выше результаты на этом источнике страницы:

  <p id="first">1st: Yo Dawg! 3/26/2020 9:22:05 AM</p>

  &lt;p id=&#x27;second&#x27;&gt;2nd: Yo Dawg! 3/26/2020 9:22:05 AM&lt;/p&gt;
</div>

И я хочу иметь это:

  <p id="first">1st: Yo Dawg! 3/26/2020 9:22:05 AM</p>

  <p id="second">2nd: Yo Dawg! 3/26/2020 9:22:05 AM</p>

</div>

Answer 1

Я обнаружил, что могу выполнить эту функцию с частичным представлением следующим образом:

test.cs html:

@model album_tree_view_test.Pages.TestModel

<div>
  <p id="first">1st: @Model.Greeting</p>

  @{
    await Html.RenderPartialAsync("_yo-dawg-partial");
    // Model gets passed to partial view without referencing it.
  }
</div>

test.cs html .cs:

using Microsoft.AspNetCore.Mvc.RazorPages;
using System;

namespace album_tree_view_test.Pages
{
    public class TestModel : PageModel
    {
        public string Greeting { get; set; }
        public string Marker { get; set; }

        public TestModel()
        {
            Greeting = $"Yo Dawg! {DateTime.Now.ToString()}";
            Marker = "2nd";
        }

        public void OnGet()
        {
        }
    }
}

_yo-dawg-part.cs html:

@model album_tree_view_test.Pages.TestModel
<p id="@Model.Marker">@Model.Marker: @Model.Greeting</p>

Источник сгенерированной бритвы (отрывок):

<p id="first">1st: Yo Dawg! 3/26/2020 1:13:11 PM</p>

<p id="2nd">2nd: Yo Dawg! 3/26/2020 1:13:11 PM</p>

Теперь я могу использовать это функционально генерировать узлы древовидной модели рекурсивно, что и было целью моего вопроса.

Answer 2

Вам нужно экранировать специальные символы, попробуйте изменить это:

string GreetingElement = $"<p id='second'>2nd: {Greeting}</p>";

для этого:

string GreetingElement = $"<p id='second'>2nd: {Greeting}</p>";

Это может быть полезно: https://www.rapidtables.com/web/html/html-codes.html