Question

我有一个单页的ASP.NET MVC 4应用程序，它应该显示图表。每个图表（dotnetHighcharts）都包含在一个具有自己模型的局部视图中。

现在我希望能够在一个页面上显示多个图表，每个图表都有自己的模型，在局部视图中呈现。

我的控制器如下所示：

public class ReportController : Controller
{
    [HttpGet]
    public ActionResult Display(Guid? id)
    {
        var viewModel = PrepareViewModel(id);
        return View(viewModel);
    }

    [HttpPost]
    public ActionResult DisplayChart(Guid? id)
    {
        var viewModel = PrepareViewModel(id);
        return PartialView("Partial_ChartView", viewModel);
    }
}

部分视图如下所示：

@model MobileReports.Models.ReportViewModel
@Model.Chart

主视图包含以下代码：

@model IEnumerable<MobileReports.Models.ReportViewModel> 
@{
    ViewBag.Title = "Display";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div id="chartContainer" style="float:left">
    @{Html.RenderPartial("Partial_ChartView");}
</div>
<div id="secondChartContainer" style="float:right">
    @{Html.RenderPartial("Partial_ChartView");}
</div>

模型本身只包含一个渲染图表和一些关于它的信息。

我的问题是，我不知道我做得对不对。主视图必须知道哪些图表已经显示在页面上，因此我不会两次显示相同的图表。在初始加载中，我不得不告诉部分视图哪些图表已经在页面上显示。我怎样才能做到这一点？

另外，如何在主视图上保留多个模型？

-edit -

控制器动作DisplayChart（Guid？id）在javascript函数的partialView中使用：

function displayNextReport() {
    // try to find a report that is not displayed already
    var diff = $(availableReports).not(displayedCharts).get();

    if (diff.length > 0) {

        // remove old chart data
        if ($("#chart_container").highcharts() !== undefined) {
            $("#chart_container").highcharts().destroy();
        }

        // load the new report
        $("#chart_container").load('@Url.Action("DisplayChart", "Report")', { id: diff[0] });
    }
}

注意：这不能立即使用。我需要传递一个参数，告诉DisplayChart（）方法接下来要加载哪个图表。为此，我需要知道目前哪些图表是显示的。

我的代码很可能非常错误并搞砸了。我认为最好只描述我想要实现的目标：我想要一个显示相同类型的多个部分视图的视图。每个局部视图必须知道当前正在显示的其他局部视图。多数民众赞成我想做的事情..

ASP.NET MVC4 - 同一类型的多个模型，在同一页面上具有部分视图

0 个答案: