图表显示会删除其他内容

本文关键字:其他 删除 显示 | 更新日期: 2023-09-27 18:21:19

我的页面有以下html标记和内容。

<h1>A H1 title</h1>
<p>paragraph something...</p>

当我运行它时,页面显示为预期的h1标题和段落。但是,当我在该页面上包含一个使用Razor标记的新图表时,它会删除/覆盖标题和段落内容,并且只在页面上显示图表。共享布局也不见了。如何显示内容、布局和图表?

<h1>This is a h1 title</h1>
<p>Paragraph something...</p>
@{
    var myChart = new Chart(width: 600, height: 400)
        .AddTitle("Chart Title")
        .AddSeries(
            name: "Employee",
            xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
            yValues: new[] { "2", "6", "4", "5", "3" })
        .Write();
}

图表显示会删除其他内容

您需要将图表代码放在一个单独的局部视图中,比如_Chart.cshtml(只包括@{ ..... }之间的代码。然后在主视图中,使用<img>元素来显示图表

_Chart.cshtml

@{
  var myChart = new Chart(width: 600, height: 400)
    .AddTitle("Chart Title")
    .AddSeries(
      name: "Employee",
      xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
      yValues: new[] { "2", "6", "4", "5", "3" })
    .Write();
}

yourView.cshtml

<h1>This is a h1 title</h1>
<p>Paragraph something...</p>
<p><img src="_Chart.cshtml" /> </p>