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

我认为你试图在局部视图中渲染图表并在主视图中渲染局部视图。为了通过AJAX请求在“ MainView ”中正确呈现“ PartialView ”，请尝试以下操作：

的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错误。

Answer 2

我们项目的问题是，高图触发了两个事件：

DOMContentLoaded
readystatechange

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

Highcharts正在生成该事件侦听器不会触发的方法。 Ajax成功后，我们必须运行“ CreateChart”功能。

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}()";

HighCharts未在部分视图中显示

2 个答案: