Обернуть страницу бритвой динамическим HTML - PullRequest
0 голосов
/ 18 января 2019

По сути, я хотел бы обернуть несколько динамически сгенерированных HTML вокруг вывода страницы Razor. Для целей этого примера предположим, что string wrapper получает динамическую строку HTML из базы данных. Однако это ВСЕГДА будет включать <div id="content"></div>

Рассмотрим этот OnGetAsync метод из example.cshtml.cs

public async Task<IActionResult> OnGetAsync()
{
        //wrapper will be dynamically assigned from database
        //but will also ALWAYS contain div id=content

        string wrapper = @"<html><head></head><body><h1>HELLO</h1>" &_
                "<div id="content"></div></body></html>"

        return Page();
    }

example.cshtml:

@page
@model ExampleModel

@section CSS {

    <style type="text/css">
        .midnight {
            color: #ccc;
        }
    </style>

}

<p>this is a test</p>

После выполнения return Page(); я бы хотел как-то взять полученный HTML-код и вставить его в код оболочки внутри div содержимого.

В идеале результирующий вывод будет выглядеть так:

<html>
   <head>
   </head>
   <body>
   <h1>HELLO</h1>
   <div id="content"> 
      <!-- injected from OnGetAsync() -->         
      <!-- omitted for brevity
           more code including @section CSS -->
      <p>this is a test</p>
      <!-- END injected from OnGetAsync() -->  
   </div>
   </body>
</html>

Как бы вы достигли этого с Razor Pages, asp.net core 2.2 и / или javascript?

1 Ответ

0 голосов
/ 18 января 2019

Вы можете использовать Jquery для перемещения текста в content div после загрузки страницы:

Код:

public string Content { get; set; } 

public async Task<IActionResult> OnGetAsync()
{
    //wrapper will be dynamically assigned from database
    //but will also ALWAYS contain div id=content

    string wrapper = @"<html><head></head><body><h1>HELLO</h1><div id='content'></div></body></html>";
    Content = wrapper;

    return Page();
}

Страница бритвы:

<p id="orginalConent">this is a test</p>

@Html.Raw(@Model.Content)

@section Scripts {
    <script>
        $(function () {
            var orginalConent = $("#orginalConent");
            $('#content').append($('<p>').text(orginalConent.text()));
            orginalConent.remove();           
        })

    </script>

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...