c# - 使用 Javascript 在 MVC 中渲染部分 View

Question

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

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

我该怎么做？

这是我得到的:

我将顶栏和所有相关脚本放在_layout.cshtml中，与主视图相关的脚本转到Display.cshtml以及我想要显示的数据本身进入 Partial_ChartView.cshtml

应显示图表数据的部分 View 已加载到 Display.cshtml 中，如下所示:

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

部分 View Partial:ChartView.cshtml 如下所示:

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

相应的 Controller 包含以下代码:

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

创建一个新方法，返回仅包含您需要的数据的部分 View

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

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

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