CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc
TheDoc
TheDoc

Reputation: 718

Load new page from Controller after Javascript event

I want to handle an event from a clicked tile (event called tileClicked) that will use the event data from tileClicked and reload the current view with that data.

For instance, tileClicked may contain tileId = 10. That data will get passed to the Home controller's ChangeOpenNowReport ActionResult and that code ends with return View(viewName: "EmbedDashboard"). Currently, the first load of EmbedDashboard works correctly.

I have the following event in my script area in the EmbedDashboard view. When I execute the tileClicked event, the controller is getting the right information from the { tile: tileId } code, but the new view is not loading.

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

Upvotes: 1

Views: 738

Answers (1)

GregH
GregH

Reputation: 5461

If you're wanting to replace data in a view then I would suggest using a partial view and ajax. You could do something like the following in javascript which will hit the controller (which will return a partial view) then populate a container (named reportContainer in this case) with the partial view:

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

this script will hit the HomeController's ChangeOpenNowReport action which should return a partial view. The controller action would like the following:

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

an added benefit of this is that there will be no page reload since it is done with ajax.

note that this assumes in your main view that you have a div with id reportContainer which houses your view code for the report. If you post the code for your view, I can elaborate on this answer a little more.

Upvotes: 2

Related Questions