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

Question

是否可以将 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 一起使用。

Answer 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")

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

Answer 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) {

            }
        });