将 HTML 代码附加到现有的 Razor 部分

Posted 2023-02-21

【中文标题】将 HTML 代码附加到现有的 Razor 部分

【英文标题】：Append HTML code to a existing Razor section

【发布时间】：2012-10-01 23:02:17

【问题描述】：

是否可以将 html 代码附加到现有的剃须刀部分？

下面是我的场景：

我的 _layout.cshtml 包含如下内容：

@RenderSection("BottomSection", required: false)

在其中一个视图 - _article.cshtml 中，我定义了如下部分：

@section BottomSection

 <script src='~/Scripts/module/article_details.js' type='text/javascript'></script>
 <script src='~/Scripts/module/modal.js' type='text/javascript'></script>
 @MvcHtmlString.Create(Model.ExtraStuff)   

在一个名为 _counter.cshtml 的局部视图中，上面的视图使用了该视图；我想将更多 HTML 代码添加到同一部分，即 BottomSection。

我尝试在局部视图中再次声明 BottomSection 部分：

@section BottomSection
<text>More data</text>

但它没有成功。

有什么方法可以实现这一点 - 将更多代码动态附加到 MVC 4 中已定义的 razor 部分？ 请注意，部分视图不需要来自父视图/模型的任何数据。 我正在将 MVC 4 与 .Net Framework 4.0/VS2010 一起使用。

【参考方案1】：

我不知道如何将内容附加到部分（实际上我自己也想知道），但我知道一个可能会产生类似结果的技巧。可以使用 TempData 代替使用部分。 TempData 很像 ViewBag，但是一旦设置了变量，它就会为当前用户存在，直到有人尝试再次访问它（它可以通过对当前用户的一些连续请求而存在，因此建议格外小心）。下面是一个如何使用它的示例。

在布局中：

@Html.Raw(new MvcHtmlString((string)TempData["BottomSection"]));

在视图中：

@
    var bottomSection = (string)TempData["BottomSection"];
    if (bottomSection == null)
    
        bottomSection = "";
    
    bottomSection += "<script src='~/Scripts/module/article_details.js' type='text/javascript'></script>\n";
    bottomSection += "<script src='~/Scripts/module/modal.js' type='text/javascript'></script>\n";
    bottomSection += Model.ExtraStuff + "\n";
    TempData["BottomSection"] = bottomSection;

在局部视图中：

@
    var bottomSection = (string)TempData["BottomSection"];
    if (bottomSection == null)
    
        bottomSection = "";
    
    bottomSection += "More data";
    TempData["BottomSection"] = bottomSection;

这可以通过为这些伪部分编写帮助程序和\或通过将部分的内容移动到单独的部分（如下所示）来进一步改进。

bottomSection += Html.Partial("_StuffToAddToSection").ToString();

---

助手类：

public static class PseudoSectionsHelper

    public static MvcHtmlString AppendToPseudoSection<T>(this TempDataDictionary TempData, string sectionName, T model, Func<T, HelperResult> content, bool addNewLineCharacter = true)
        where T : class
    
        return AppendToPseudoSection(TempData, sectionName, content(model).ToString(), addNewLineCharacter);
    

    public static MvcHtmlString AppendToPseudoSection(this TempDataDictionary TempData, string sectionName, MvcHtmlString content, bool addNewLineCharacter = true)
    
        return AppendToPseudoSection(TempData, sectionName, content.ToString(), addNewLineCharacter);
    

    public static MvcHtmlString AppendToPseudoSection(this TempDataDictionary TempData, string sectionName, string content, bool addNewLineCharacter = true)
    
        var section = (string)TempData[sectionName];
        if (section == null)
        
            section = "";
        
        else if (addNewLineCharacter)
        
            section += "\n";
        
        section += content;
        TempData[sectionName] = section;
        // We return empty MvcHtmlString to be able to use this helper inline (without declaring code block @ some code...  in view)
        return new MvcHtmlString("");
    

    public static MvcHtmlString PseudoSection(this TempDataDictionary TempData, string sectionName)
    
        var section = (string)TempData[sectionName];
        return new MvcHtmlString(section);
    

使用示例

在布局中添加：

@TempData.PseudoSection("BottomSection")

在视图中：

@TempData.AppendToPseudoSection("BottomSection", Model, @<text>
    <script src='~/Scripts/module/article_details.js' type='text/javascript'></script>
    <script src='~/Scripts/module/modal.js' type='text/javascript'></script>
    @MvcHtmlString.Create(Model.ExtraStuff)
</text>)

或

@
    TempData.AppendToPseudoSection("BottomSection", Model, @<text>
        <script src='~/Scripts/module/article_details.js' type='text/javascript'></script>
        <script src='~/Scripts/module/modal.js' type='text/javascript'></script>
        @MvcHtmlString.Create(Model.ExtraStuff)
    </text>);

甚至

@TempData.AppendToPseudoSection("BottomSection", Html.Partial("BottomSectionScriptsAndStuff"))

部分：

@TempData.AppendToPseudoSection("BottomSection", "More data")

【讨论】：

使用 System.Web.HttpContext.Current.Items 代替 TempData 可能是一个更好的主意，因为只要您不阅读 TempData 就可以生存，这可能会导致奇怪的情况（例如您没有在一个页面上呈现的部分，在另一个页面上呈现）。

【参考方案2】：

也许我不明白你的问题，但你为什么不使用嵌套的局部视图？？？

例如：

部分视图1

`<script src='~/Scripts/module/article_details.js' type='text/javascript'></script>  
 <script src='~/Scripts/module/modal.js' type='text/javascript'></script>  
 @MvcHtmlString.Create(Model.ExtraStuff)
 @Html.RenderPartial("PartialView2",Model.ExtraStuff );`

部分视图2

`<text>More data</text>`

【讨论】：

拥有多个局部视图将解决该问题。但是，这最终会为我提供很多部分视图文件 - 违背了动态方法的目的。

【参考方案3】：

使用 Ajax，您可以加载局部视图并在目标分区中进行渲染。

尝试使用 jquery ajax

      $.ajax(
            type: 'GET',
            url: '@Url.Action("Action","Controller")',
            cache: false,
            timeout: 20000,
            contentType: "application/json; charset=utf-8",
            success: function (_results) 
                $("#TargetDiv").html(_results);
            ,
            error: function (_results) 

            
        );

【讨论】：

请告诉为什么这个解决方案是错误的。我已经尝试将新生成的 html 附加到已经渲染的视图中

感谢您的回复，但这不是我想做的。部分视图可以添加更多内容/脚本引用等。获取数据将添加往返请求，直到那时我的页面将无法正常工作！