在Javascript事件後從控制器加載新頁面

我想要處理來自點擊圖塊的事件（名爲tileClicked的事件），該事件將使用tileClicked中的事件數據並使用該數據重新加載當前視圖。在Javascript事件後從控制器加載新頁面

例如，tileClicked可能包含tileId = 10。該數據將傳遞到主控制器的ChangeOpenNowReportActionResult，該代碼以return View(viewName: "EmbedDashboard")結束。目前，EmbedDashboard的第一個負載正常工作。

我在EmbedDashboard視圖的腳本區域中有以下事件。當我執行tileClicked事件時，控制器從{ tile: tileId }代碼獲取正確的信息，但新視圖未加載。

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

首頁控制器：ChangeOpenNowReport

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

來源

2017-09-07 Doc Hoss

''（$ document）.load（url，{tile：tileId}）;'''將視圖結果全部替換爲全部文檔。這是你想要的嗎？使用div容器更改可能會解決問題 – SalmanAA

如果我可以將它加載到名爲'＃dashboardContainer'的容器中，那會很好。我只是沒有那麼幸運。 –

測試'''$（「＃dashboardContainer」）。load（url，{tile：tileId}）;''' – SalmanAA

如果你想在一個視圖替換數據，那麼我會建議使用的局部視圖和Ajax。你可以不喜歡在JavaScript以下，這將打擊該控制器（這將返回一個局部視圖），然後填充的容器（在這種情況下，一個名爲reportContainer）與局部視圖：

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

該腳本將達到HomeController的ChangeOpenNowReport操作應該返回一個局部視圖。控制器動作想以下幾點：

[HttpPost] 
public ActionResult ChangeOpenNowReportPartial(string tile) 
{ 
    ... 
    return PartialView(viewName: "EmbedDashboard", model: embedConfig); 
}

這樣的一個好處是，不會有任何頁面重新加載，因爲它與阿賈克斯進行。

請注意，這在您的主視圖中假定您有一個ID爲reportContainer的div，其中包含您的報告的查看代碼。如果您發佈視圖的代碼，我可以詳細闡述這個答案。

來源

2017-09-07 20:09:22 GregH

這個技巧。非常感謝你的幫助！ –

很高興我能幫到你。 – GregH

在Javascript事件後從控制器加載新頁面

回答

相關問題