Question

我想处理来自点击图块（名为tileClicked的事件）的事件，该事件将使用tileClicked中的事件数据并使用该数据重新加载当前视图。

例如，tileClicked可能包含tileId = 10。该数据将传递给本地控制器的ChangeOpenNowReport ActionResult，该代码以return View(viewName: "EmbedDashboard")结尾。目前，EmbedDashboard的第一次加载正常工作。

我在EmbedDashboard视图的脚本区域中有以下事件。当我执行tileClicked事件时，控制器从{ tile: tileId }代码获取正确的信息，但新视图未加载。

JS

dashboard.on("tileClicked", function (event) {
    var tileId = event.detail.tileId;
    var url = '@Url.Action("ChangeOpenNowReport", "Home")';
    $(document).load(url, { tile: tileId });
});

Home Controller：ChangeOpenNowReport

public async Task<ActionResult> ChangeOpenNowReport(string tile)
    { 
        ...
        return View(viewName: "EmbedDashboard", model: embedConfig);
    }

Answer 1

如果您想要替换视图中的数据，那么我建议使用部分视图和ajax。您可以在javascript中执行以下操作，这将触及控制器（将返回部分视图），然后使用局部视图填充容器（在本例中名为reportContainer）：

using System;
using System.Threading;
using System.Threading.Tasks;
using static System.Console;

class Test
{
    static readonly object obj = new object();

    static void Print(string s, ConsoleColor bc = ConsoleColor.Black)
    {
        lock (obj)
        {
            BackgroundColor = bc;
            ForegroundColor = ConsoleColor.White;
            Write(s);
            ResetColor();
        }
    }

    static void Job(ConsoleColor bc, int n = 50)
    {
        for (long x = 0; x < n; x++)
        {
            Print($"{Thread.CurrentThread.ManagedThreadId} ", bc);
        }
    }

    private static async Task TestAsync(int n)
    {
        Task t = Task.Run(() => Job(ConsoleColor.DarkRed, n));
        Job(ConsoleColor.DarkGreen);
        await t;
        Job(ConsoleColor.DarkBlue);
    }

    static void Main()
    {
        int n = 10;
        Print($"When n = {n}.\n");
        TestAsync(n).GetAwaiter().GetResult();

        n = 90;
        Print($"\n\n\nWhen n = {n}.\n");
        TestAsync(n).GetAwaiter().GetResult();
    }
}

此脚本将点击HomeController的ChangeOpenNowReport操作，该操作应返回部分视图。控制器操作如下：

dashboard.on("tileClicked", function (event) {
    var tileId = event.detail.tileId;

    $.ajax({
      url: "/Home/ChangeOpenNowReportPartial",
      data: {
        tile: tileId
      },
      cache: false,
      type: "POST",
      success: function (data) {
        $("#reportContainer").empty();
        $("#reportContainer").html(data);
      },
      error: function (response) {
        alert("error : " + response);
      }
    })
  });

这样做的另一个好处是，由于使用了ajax，因此不会重新加载页面。

请注意，这假设您的主视图中有一个ID为[HttpPost] public ActionResult ChangeOpenNowReportPartial(string tile) { ... return PartialView(viewName: "EmbedDashboard", model: embedConfig); }的div，其中包含报告的视图代码。如果您发布视图的代码，我可以再详细说明这个答案。

在Javascript事件后从Controller加载新页面

1 个答案: