How to retain an injected partial view after page refresh in asp.net mvc

Question

I am using ASP.NET MVC 4 and jQuery. I have a button control on my view. When it is clicked it "injects" a partial view into my view. When I refresh the page then the partial view is gone.

My HTML markup:

<button id="RetrieveButton" type="button">Retrieve</button>

<div id="RuleDetails">
     <div class="main-content">
          <p>Some text.</p>
     </div>
</div>

My jQuery to return the partial view with an AJAX call to return the HTML:

$('#RetrieveButton').click(function () {
     $.ajax(
     {
          type: 'POST',
          url: '@Url.Action("GetRuleDetails")',
          data: {
               systemCode: $('#SystemCodes').val()
          },
          dataType: "html",
          success: function (result) {
               alert('success');
               var domElement = $(result);
               $("#RuleDetails").html(domElement);
          },
          error: function (result) {
               alert('error');
          }
     });
});

My action method:

public ActionResult GetRuleDetails()
{
     RuleViewModel viewModel = new RuleViewModel();

     return PartialView("_RuleInformation", viewModel);
}

My partial view:

@model MyProject.ViewModels.Rules.RuleViewModel

<div class="main-content">
     <h2>Rule Details</h2>
</div>

I need this "injected" partial view to remain there if I were to refresh the page. Currently it "resets" if I were to refresh it, and the partial that was injected is gone.

Answer 1

It will not render that partial view again as it is does not remembers clicked state of button.

One of the ways to achieve what you are looking for is by using sammy.js

On click of button you can set the hashurl using sammy.js (e.g.: '#/partialview') and on page refresh hashurl part stays intact (but does not go to server). And then you can manipulate the client code accordingly

1. Take sammy.js reference in your page.

2. Intialize sammy like below

        var app = $.sammy('body', function (context){
   
              this.get('#/PartialView1', function () {
                   fnLoadPartialView();
               });
   
   });
   

3. change Retrieve to with href='PartialView1'

4. function fnLoadPartialView (){
            $.ajax(
        {
             type: 'POST',
             url: '@Url.Action("GetRuleDetails")',
             data: {
                  systemCode: $('#SystemCodes').val()
             },
             dataType: "html",
             success: function (result) {
                  alert('success');
                  var domElement = $(result);
                  $("#RuleDetails").html(domElement);
             },
             error: function (result) {
                  alert('error');
             }
        });
   
               }
   

5.

$('#RetrieveButton').click(function () {
     fnLoadPartialView ();
});