Changing a div that contains a view link

Question

I've written some code to load a section of my application between views. While my code works, I'm wondering if there is a better way to do it. (partial views perhaps?) I currently load the views, then show/hide them depending on a button click.

<div id="wrapper">
@*Sidebar*@
@Html.Partial("_AdministrationSidebar")
@*PAGE CONTENT*@
<div id="page-content-wrapper">
<div id="manage" style="clear: both;"></div>
<div id="edit" style="clear: both;"></div>
<div id="create" style="clear: both;"></div>
</div>@*page-content-wrapper*@
</div>@*wrapper End*@
<script>
$(document).ready(function () {
 $("#manage").load("RolesAdmin/Manage/");
});
function editItem(Id) {
 $("#edit").load("RolesAdmin/Edit/" + Id);
 $("#manage").hide();
 $("#edit").show();
}
function createItem(Id) {
 $("#create").load("RolesAdmin/Create/" + Id);
 $("#manage").hide();
 $("#create").show();
}
function manageItem() {
 $("#manage").show();
 $("#create").hide();
 $("#edit").hide();
}
</script>

Answer 1

This is a nice simple approach to an SPA. I assume you are returning partial pages from your actions.

A slight improvement would be to hide all pages before showing. This way you don't have to touch the other functions when adding a new page.

Add a class to the page divs, like class='partial-page'. Then in your show page function:

function createItem(Id) {
 $(".partial-page").hide();
 $("#create").load("RolesAdmin/Create/" + Id);
} 

You could also make things more generic and allow for a query string. e.g.

function showPage(url, param){
 $(".partial-page").hide();
 if ($.isPlainObject(param) {
 $("#create").load(url + '?' + $.param(param));
 }
 else {
 $("#create").load(url + '/' + param);
 }
}
function createItem(Id) {
 showPage("RolesAdmin/Create", id)
}
function showSomeOtherPage(id, name) {
 // RolesAdmin/SomeOtherPage?id=123&name=freddy
 showPage("RolesAdmin/SomeOtherPage", {id:id, name:name})
}

Further, you can support the back button by using jquery.history.js