Предоставление частичного представления в MVC с помощью Javascript

Question

У меня есть веб-сайт asp.net MVC, который состоит из верхней панели и основной области.

Через функцию js, я хочу, чтобы иметь возможность получать новые данные с моего контроллера и отображать эти данные в основной области моего сайта, но без повторной рендеринга области верхнего уровня.

Как это сделать?

Вот что я получил:

Я поставил topbar и все связанные с ним скрипты в _layout.cshtml, сценарии, связанные с MainView пойти в 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 });