用动态包装 Razor 页面 HTML

Question

基本上我想在 Razor 页面的输出周围包装一些动态生成的 HTML。出于本示例的目的，我们假设 string wrapper 从数据库接收动态 HTML 字符串。但是它总是包括 <div id="content"></div>

考虑 example.cshtml.cs

中的这个 OnGetAsync 方法

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 核心 2.2 and/or javascript 完成此操作？

Answer 1

页面加载后，您可以使用 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>

}

用动态包装 Razor 页面 HTML

Wrap Razor Page with Dynamic HTML

javascript

c#

razor

asp.net-core

razor-pages