使用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 });