使用Javascript在MVC中渲染部分视图

Question

我有一个由topbar和主要区域组成的asp.net MVC网站。

通过js函数，我希望能够从Controller检索新数据并在网站的主要区域中显示这些数据，而无需重新渲染topbar区域。

我该怎么做呢？

这是我得到的：

我将_layout.cshtml和所有相关脚本放在_layout.cshtml ，与主_layout.cshtml相关的脚本转到了Display.cshtml ，而我要显示的数据本身放在Partial_ChartView.cshtml

应该显示我的图表数据的局部视图像这样在Display.cshtml加载：

@model MobileReports.Models.ReportViewModel
@{
    ViewBag.Title = "Display";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@{Html.RenderPartial("Partial_ChartView");}

局部视图Partial:ChartView.cshtml如下所示：

@model MobileReports.Models.ReportViewModel
<div id="chartContainer">@Model.Chart</div>

相应的控制器包含以下代码：

public ActionResult Display(Guid? id)
{
    ReportViewModel viewModel = new ReportViewModel();
    Guid validId = (Guid)id;
    viewModel.Chart = GetChart(guid);
    viewModel.ChartData = GetData(guid);
    return PartialView(viewModel);
}

当我在../Report/Display中打开页面时，页面似乎正确呈现。

现在，我想添加一个调用具有特定值的Display（id）的脚本。 然后，我只想重新渲染主要区域（在div #chartContainer内部）以显示现在应该在模型中的新数据。 我该怎么做呢？

Answer 1

创建一个新方法，该方法返回仅包含所需数据的局部视图

public ActionResult Chart(GUID id)
{
  .....
  return PartialView(someModel);
}

然后使用jquery .load替换div的内容

$('#chartContainer').load('@Url.Action("Chart", "Report")', { id: YourGUIDValue });