HighCharts не отображаются в режиме частичного просмотра

Question

мой контроллер

    public ActionResult Index()
    {

        if (Request.IsAjaxRequest())
        {
            List<double> nyValues = new List<double> { 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3 };
            List<ColumnSeriesData> nyData = new List<ColumnSeriesData>();
            nyValues.ForEach(p => nyData.Add(new ColumnSeriesData { Y = p }));
            ViewData["tokyoData"] = nyData;

            return PartialView("~/Views/Home/_Graph.cshtml");
        }
        else

        {
            List<double> tokyoValues = new List<double> { 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 };
            List<ColumnSeriesData> tokyoData = new List<ColumnSeriesData>();
            tokyoValues.ForEach(p => tokyoData.Add(new ColumnSeriesData { Y = p }));
            ViewData["tokyoData"] = tokyoData;

            return View();
        }
    }

и в представлении

<div class="graphDiv" id="MainGraph">
@{ Html.RenderPartial("_Graph");}
</div>

, а вызов ajax:

 @Ajax.ActionLink("Team", "Index", "Home", null, new AjaxOptions { HttpMethod = "GET", LoadingElementId = "divLoading", UpdateTargetId = "body", InsertionMode = InsertionMode.Replace, OnSuccess = "" }, new { })

Частичное представление не отображается в div.. Это просто пустая страница ... Любая помощь ... Заранее спасибо, пожалуйста.

Answer 1

проблема в нашем проекте заключалась в том, что старшие диаграммы запускают два события:

• DOMContentLoaded
• readystatechange

https://developer.mozilla.org/en-US/docs/Web/API/Document/readystatechange_event

Highcharts генерирует метод, который не запускается этими списками событий.Мы должны запустить функцию «CreateChart», когда Ajax преуспел.

if (document.addEventListener) 
{
  document.addEventListener("DOMContentLoaded", function() {
    createChartTargetChart(); //CreateChartFunction !!
  });
}
else if (document.attachEvent) 
{
  document.attachEvent("onreadystatechange", function() {
      if (document.readyState === "complete")
      {
        document.detachEvent("onreadystatechange", arguments.callee);
        createChartTargetChart(); //CreateChartFunction !!
      }
   });
}

Highsoft генерирует имя функции автоматически, в c # вы можете кодировать:

string divId = "xxx"; // = the containers target Id 
var functionName = $"createChart{divId}()";

Answer 2

Я думаю, что вы пытаетесь визуализировать диаграмму в частичном представлении и визуализировать это частичное представление в главном представлении.Чтобы правильно отобразить « PartialView » внутри « MainView » через AJAX-запрос, попробуйте следующее:

MainView:

@{ ViewBag.Title = "MainView"; }

<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>

<h2>MainView</h2>
<div class="graphDiv" id="MainGraph">
  @Ajax.ActionLink("Team", "GetChart", "Home", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "TargetForChart", InsertionMode = InsertionMode.Replace, OnSuccess = "" })
  <h2>The chart appears here:</h2>
  <div id="TargetForChart">

  </div>
</div>

PartialView:

<!-- Your chart html and js goes here -->

Контроллер:

public class HomeController : Controller
{
    public ActionResult MainView()
    {
        return View();
    }

    public PartialViewResult GetChart()
    {
        List<double> nyValues = new List<double> { 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3 };
        List<ColumnSeriesData> nyData = new List<ColumnSeriesData>();
        nyValues.ForEach(p => nyData.Add(new ColumnSeriesData { Y = p }));
        ViewData["tokyoData"] = nyData;
        return PartialView("_Graph");
    }
}

И до тех пор, пока ваше частичное представление содержит правильную логику, у него не будет никаких причин не отображать.Если вы продублировали логику инициализации для диаграммы как в MainView, так и в PartialView, я бы предложил вам удалить ее из MainView и хранить только в PartialView там, где он фактически будет отображаться.Следите за консолью, чтобы обнаружить и устранить все ошибки js.