0

I am facing issue implementing a back button feature in a ASP.NET MVC application.
This is my Home page View, for simplicity let us consider it has a div which has img element and div that renders PartialView2. PartialView2 is a partial view which generates list of tiles based on the data from the Model. 

View1:
<div> remainig page content </div>
    <div>
    <img src="/path/to/img_back" id="img" />
    <div id="1">
    Html.RenderAction("PartialView2", "Home");
    </div>
    </div>
<div> remainig page content </div> 


PartialView2:
@model ICollection<Model>
@{
foreach(item in Model) {
<div class="tile">
<!-- tiles data generated using model data that I get from controller --> 
</div>
}
}

HomeController:

//field
private Stack<ICollection<Model>> myStack = new Stack<ICollection<Model>>();

public PartialViewResult GetTiles(string id) {
 var nodes = new List<Model>();
 //make a call to database and generating the list of child nodes of type Model.
 // get the rows from the db which have parentid as the passed value.
 //for back button: myStack.push(nodes);
return PartialView("PartialView2",nodes);
}

//Method to call from jQuery on click of #img
public PartialViewResult BackButton() {
return PartialView("PartialView2",myStack.Pop());
}

When I click on a tile, I make a call to GetTiles method in the home controller through Jquery Ajax and populate the $("#1").html() with the result returned from the ajax call which is the same partial view.

When I click on #img I call BackButton() method from jQuery ajax to to load html of #1 div in the page.

Model:

string icon;
string title;
string parentid;
string id;
bool hasChildren;

With this design I only have the options to traverse the children and represent them as tiles but I need to implement a back button so as to traverse the parents. I have created a stack in the home controller and pushed the elements to the stack for each call to the GetTiles() method. But for every call to the controller, a new stack is instantiated. So my idea to have collection of models in the stack and on each call to back button pop the collection of Model and return it to the view is not working.

Can you guys please help me solve this issue? Any in-memory data structures to use to hold the parent models? Please let me know if I need to provide further information.

Hulk
  • 97
  • 3
  • 16
  • Implementing "back" behaviour is typically a *client-side solution* (e.g. using Ajax for the loading of pages and something like History.js, or just HTML5 browser state management, to manipulate the browser URL). You cannot do it server-side as the page loads are stateless. You would need to use cookies or other hidden state information information (e.g. embedded in the page) to even attempt this server-side. – iCollect.it Ltd Jul 17 '14 at 05:03
  • Thank you TrueBlueAussie for your reply. Here I am updating only a small portion of the page(only a div), can you please tell me in more detail about using browser history to get a particular div content? – Hulk Jul 17 '14 at 05:15
  • Have a look at the demoes of History.js on http://balupton.github.io/history.js/demo/ It will show how you can change the browser address dynamically and respond to address changes. On older browsers it changes the address `#` bookmark instead, but `History.js` hides that implementation detail and works on all browsers. – iCollect.it Ltd Jul 17 '14 at 05:33
  • @Neel I have started coding as there no alien attacks in New York. :) – Hulk Jul 17 '14 at 17:24

0 Answers0