CODEWITHSUNDEEP
javascripthtmljqueryasp.net-mvcsession
AMDI
AMDI

Reputation: 973

Facing issue in retrieving data when user clicks on browser back button in MVC5

I am working on page when user submits data and retrieves html data which contains hyperlinks. Now when the user clicks on the link, he will be navigated to another page and when the user clicks on browser back button, I want to show earlier displayed html data. In order to achieve this, I tried to store the value in session and retrieve it when user clicks back browser button.

But I am facing issues

  1. I tried to capture browser back button and display the session stored variable and I am not sure why this is not getting triggered.

    $(window).on('hashchange', function () { $("#spanId").html("test"); });

  2. Html data stored in session variable is not displaying properly like "<" is showing as "&lt" and all the data is showing as string instead of html content.

    $(document).ready(function () {

         $("#spanId").html("@Session["Data"]");

          $("#btnSubmit").click(function () {
               var data = {
                     "Date": $.datepicker.formatDate("mm-dd-yy", DateVal),
                     "Type": $('#type').val(),
                 }

                 $.ajax({
                     type: 'POST',
                     dataType: "json",
                     contentType: "application/json; charset=utf-8",
                     data: JSON.stringify(data),
                     url: '@Url.Action("GetReportdata", "Reports")',
                     success: function (result) {
                         $("#spanId").html(content);
                       },
                     error: function (xhr, ajaxOptions, thrownError) {

                     }
                 });
         });

 });

 Please let me know if there is any other way to handle this and help me resolves this issue.

Upvotes: 1

Views: 362

Answers (2)

AMDI
AMDI

Reputation: 973

I found an event to handle browser back button:

  if (window.performance && window.performance.navigation.type == 

    window.performance.navigation.TYPE_BACK_FORWARD) {
    
         $("#spanId").html("@Session["Data"]");
    }

This can be used to repopulate data.

Upvotes: 1

react_or_angluar
react_or_angluar

Reputation: 1574

There might be another way of solving this on the server side, but this should work.

$(document).ready(function () {
     $("#spanId").html(decodeHtml("@Session["Data"]"));
     $("#btnSubmit").click(function () {
           var data = {
                "Date": $.datepicker.formatDate("mm-dd-yy", DateVal),
                "Type": $('#type').val(),
            }
            $.ajax({
                 type: 'POST',
                 dataType: "json",
                 contentType: "application/json; charset=utf-8",
                 data: JSON.stringify(data),
                 url: '@Url.Action("GetReportdata", "Reports")',
                 success: function (result) {
                     $("#spanId").html(decodeHtml(content));
                 },
                 error: function (xhr, ajaxOptions, thrownError) {
                 }
             });
     });

 });

function decodeHtml(encodedHtml) {
    return encodedHtml.replace(/&amp;/g,'&')
        .replace(/&lt;/g,'<').replace(/&gt;/g,'>');
}

Upvotes: 1

Related Questions