I'm getting back into web development, and I'm creating a mobile-friendly web app. I'm trying to make it SPA-like in the sense that I don't load new pages for each action the user takes. As my index.cshtml page will show, I have a header, and then I have a bunch of divs. Those divs serve as placeholders for each "page" in the app. Only one div is shown at a time. Is this an acceptable approach? Is there a better way that's considered best practice?
Index.cshtml:
@model PrestoDashboardWeb.Models.EntityContainer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link href="~/Content/jquery.mobile-1.3.2.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.mobile-1.3.2.min.js"></script>
<title>Presto</title>
</head>
<body>
<div data-role="header" data-theme="a">
<img src="~/Content/images/wizard1.ico" height="48" width="48" style="display: block; float: right;"/>
<h1 style="font-size: 32px">Presto</h1>
</div>
<div data-role="navbar" data-grid="d">
<ul> <!-- These are the different actions the user can take. -->
<li onclick="showApps()"><a href="#" class="ui-btn-active">Apps</a></li>
<li onclick="showServers()"><a href="#">Servers</a></li>
<li onclick="showVariableGroups()"><a href="#">Variables</a></li>
<li><a href="#">Resolve</a></li>
<li><a href="#">Installs</a></li>
<li><a href="#">Log</a></li>
<li><a href="#">Ping</a></li>
<li><a href="#">Global</a></li>
<li><a href="#">Security</a></li>
</ul>
</div><!-- /navbar -->
<!-- These are the placeholder divs. Only one is shown at a time. -->
<div data-role="header" data-theme="b">
<h1 id="selectedTab"><span>Apps</span></h1>
</div>
<div id="appList">
@Html.Partial("~/Views/PartialViews/AppList.cshtml", Model.Applications)
</div>
<div id="serverList">
@Html.Partial("~/Views/PartialViews/ServerList.cshtml", Model.Servers)
</div>
<div id="variableGroupList">
@Html.Partial("~/Views/PartialViews/VariableGroupList.cshtml", Model.VariableGroups)
</div>
<div id="app">
@Html.Partial("~/Views/PartialViews/App.cshtml")
</div>
</body>
<script>
$(function () {
showApps();
});
function showApps() {
hideAll();
$('#appList').show();
$('#selectedTab').text('Apps');
}
function showServers() {
hideAll();
$('#serverList').show();
$('#selectedTab').text('Servers');
}
function showVariableGroups() {
hideAll();
$('#variableGroupList').show();
$('#selectedTab').text('Variable Groups');
}
function hideAll() {
$('#appList').hide();
$('#serverList').hide();
$('#variableGroupList').hide();
$('#app').hide();
}
function showApp(id) {
hideAll();
$('#app').show();
window.appInitialize(id);
}
</script>
</html>
The user can select Apps, and this partial view will be displayed:
@model IEnumerable<PrestoCommon.Entities.Application>
<ul data-role="listview" data-autodividers="true" @*data-filter="true"*@ data-count-theme="c" data-inset="true" data-divider-theme="d">
@foreach (var app in Model)
{
<li onclick="showApp('@app.Id');"><a href="#">@app.Name</a></li>
}
</ul>
And if the user clicks an app from above, showApp() gets called (see index.cshtml, above) with the app ID getting passed to it. showApp() will then hide all the other divs and show the only the partial view that displays the app:
<script>
$(function() {
// Note: This will execute as soon as the main page is loaded.
});
function appInitialize(id) {
$('#selectedTab').text(id); // Show the name of the app in the header
$('#text-14').val(id); // Just show the ID for testing.
}
</script>
<form>
<div data-role="fieldcontain">
<label for="text-14">Text input:</label>
<input type="text" data-mini="true" name="text-14" id="text-14" value="">
</div>
</form>
This is me totally guessing at an approach to make the site look like the user is staying on a single page. I'm hoping for a sanity check to let me know that this is right or it's way off. And if there are any issues with the code itself, I'd love to know what can be improved.
