improved the browse ui a little, it still sux tho

Src/VideoGameQuotes.Web/Controllers/ApiController.cs

@@ -135,13 +135,13 @@ namespace VideoGameQuotes.Web.Controllers {
 			return new StatusOverrideResult(Json(this.CreateJsonErrorResponse(message ?? "Invalid request"))) { StatusCode = statusCode };
 		}
 
-		private ActionResult GetRecords<TDto>(Func<IApiService, IEnumerable<TDto>> recordGetter, string key) {
+		private ActionResult GetRecords<TDto>(Func<IApiService, IEnumerable<TDto>> recordGetter) {
 			if (!ModelState.IsValid) {
 				return Error(HttpStatusCode.BadRequest);
 			}
 
 			try {
-				return Json(this.CreateJsonResponse(data: new Dictionary<string, object> { { key, recordGetter(apiService) } }));
+				return Json(this.CreateJsonResponse(data: new { records = recordGetter(apiService) }));
 			} catch (ApiException e) {
 				return Error(HttpStatusCode.BadRequest, e.Message);
 			} catch {
@@ -150,23 +150,23 @@ namespace VideoGameQuotes.Web.Controllers {
 		}
 
 		public ActionResult Game(ApiModel model) {
-			return GetRecords(service => service.GetGames(model), "games");
+			return GetRecords(service => service.GetGames(model));
 		}
 
 		public ActionResult System(ApiModel model) {
-			return GetRecords(service => service.GetSystems(model), "systems");
+			return GetRecords(service => service.GetSystems(model));
 		}
 
 		public ActionResult Category(ApiModel model) {
-			return GetRecords(service => service.GetCategories(model), "categories");
+			return GetRecords(service => service.GetCategories(model));
 		}
 
 		public ActionResult Publisher(ApiModel model) {
-			return GetRecords(service => service.GetPublishers(model), "publishers");
+			return GetRecords(service => service.GetPublishers(model));
 		}
 
 		public ActionResult Quote(ApiModel model) {
-			return GetRecords(service => service.GetQuotes(model), "quotes");
+			return GetRecords(service => service.GetQuotes(model));
 		}
 	}
 }

Src/VideoGameQuotes.Web/Services/QuoteService.cs

@@ -172,7 +172,7 @@ namespace VideoGameQuotes.Web.Services {
 			}
 
 			totalCount = quotes.Count();
-			return quotes.Skip(start - 1).Take(end - start + 1);
+			return quotes.OrderByDescending(quote => quote.Score).ThenBy(quote => quote.UpVotes).Skip(start - 1).Take(end - start + 1);
 		}
 
 		

Src/VideoGameQuotes.Web/VideoGameQuotes.Web.csproj

@@ -160,6 +160,7 @@
     <Content Include="media\images\search.png" />
     <Content Include="media\images\unknown.png" />
     <Content Include="media\images\vgquotes.png" />
+    <Content Include="media\js\browse.js" />
     <Content Include="media\js\jquery.cookie.js" />
     <Content Include="media\js\quoteform.js" />
     <Content Include="media\js\vgquotes.js" />

Src/VideoGameQuotes.Web/Views/Quote/DefaultBrowse.aspx

@@ -1,16 +1,14 @@
 <%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage" MasterPageFile="~/Views/Shared/Site.Master" %>
 <asp:Content runat="server" ID="Title" ContentPlaceHolderID="TitleContent">Browse</asp:Content>
 <asp:Content runat="server" ID="Main" ContentPlaceHolderID="MainContent">
-	<p>
+	<h2>Browse</h2>
-		Browse by:
-	</p>
 
 	<div id="browse-default-menu">
 		<ul>
-			<li><a href="#" id="browse-game">Game</a></li>
+			<li><a href="#" id="browse-game">Games</a></li>
-			<li><a href="#" id="browse-system">System</a></li>
+			<li><a href="#" id="browse-system">Systems</a></li>
-			<li><a href="#" id="browse-category">Category</a></li>
+			<li><a href="#" id="browse-category">Categories</a></li>
-			<li><a href="#" id="browse-publisher">Publisher</a></li>
+			<li><a href="#" id="browse-publisher">Publishers</a></li>
 		</ul>
 	</div>
 
@@ -24,112 +22,5 @@
 </asp:Content>
 
 <asp:Content ContentPlaceHolderID="DeferrableScripts" runat="server">
-	<script type="text/javascript">//<![CDATA[
+	<script type="text/javascript" src="/media/js/browse.js"></script>
-		$(document).ready(function() {
-			var $browseMenu = $("#browse-default-menu");
-			var $container = $("#browse-default-container");
-			var $content = $("#browse-default-content");
-
-			var games = [], systems = [], publishers = [], categories = [];
-
-			var renderData = function(data, cellRenderer, cellsPerRow) {
-				var $table = $("<table/>"), $row = $("<tr/>");
-				for (var i = 0, len = data.length; i < len; i++) {
-					if (i % cellsPerRow === 0) {
-						if (i > 0) {
-							$table.append($row);
-						}
-
-						$row = $("<tr/>");
-					}
-
-					$row.append($("<td/>").html(cellRenderer(data[i], i)));
-				}
-
-				if (data.length > 0) {
-					$table.append($row);
-				}
-
-				$content.append($table);
-			};
-
-			var gameCellRenderer = function() {
-				var $template = $("<a/>");
-				return function(game, count) {
-					return $template
-						.clone()
-						.attr("href", "/browse/game/" + game.Id)
-						.text(game.Name);
-				};
-			}();
-
-			var systemCellRenderer = function() {
-				var $template = $("<a/>");
-				return function(system, count) {
-					return $template
-						.clone()
-						.attr("href", "/browse/system/" + system.Id)
-						.attr("title", system.Name)
-						.text(system.Abbreviation);
-				};
-			}();
-
-			$("#show-default-menu").click(function() {
-				$content.empty();
-				$container.hide();
-				$browseMenu.show();
-				return false;
-			});
-
-			$("#browse-game").click(function() {
-				$browseMenu.hide();
-				$container.show();
-				var cellsPerRow = 8;
-
-				if (games.length === 0) {
-					$.ajax("/api/game/all", {
-						data: { sort: "alphabetical" },
-						success: function(data, status, $xhr) {
-							if (data.Error !== null) {
-								alert(data.Error);
-								return;
-							}
-
-							games = data.Data.games;
-							renderData(games, gameCellRenderer, cellsPerRow);
-						}
-					});
-				} else {
-					renderData(games, gameCellRenderer, cellsPerRow);
-				}
-
-				return false;
-			});
-
-			$("#browse-system").click(function() {
-				$browseMenu.hide();
-				$container.show();
-				var cellsPerRow = 12;
-
-				if (systems.length === 0) {
-					$.ajax("/api/system/all", {
-						data: { sort: "alphabetical" },
-						success: function(data, status, $xhr) {
-							if (data.Error !== null) {
-								alert(data.Error);
-								return;
-							}
-
-							systems = data.Data.systems;
-							renderData(systems, systemCellRenderer, cellsPerRow);
-						}
-					});
-				} else {
-					renderData(systems, systemCellRenderer, cellsPerRow);
-				}
-
-				return false;
-			});
-		});
-	//]]></script>
 </asp:Content>

Src/VideoGameQuotes.Web/media/js/browse.js

@@ -0,0 +1,87 @@
+(function($, window, undefined){
+	$(document).ready(function() {
+		var $browseMenu = $("#browse-default-menu");
+		var $container = $("#browse-default-container");
+		var $content = $("#browse-default-content");
+
+		var data = {
+			game: [],
+			system: [],
+			publisher: [],
+			category: []
+		};
+
+		var renderData = function(data, itemRenderer) {
+			var $list = $("<ol/>"), $item = $("<li/>");;
+			$.each(data, function() {
+				$list.append($item.clone().append(itemRenderer(this)));
+			});
+
+			$content.append($list);
+		};
+
+		var getDataAndRender = function(type, itemRenderer) {
+			return function() {
+				var render = function() {
+					$browseMenu.hide();
+					$container.show();
+					renderData(data[type], itemRenderer);
+				};
+				
+				if (data[type].length === 0) {
+					var $link = $(this);
+					$.ajax("/api/" + type + "/all", {
+						data: { sort: "alphabetical" },
+						success: function(response, status, $xhr) {
+							if (response.Error !== null) {
+								alert(response.Error);
+								return;
+							}
+
+							data[type] = response.Data.records;
+							render();
+						},
+						beforeSend: function() { $link.toggleClass("loading-link"); },
+						complete: function() { $link.toggleClass("loading-link"); }
+					});
+				} else {
+					render();
+				}
+				
+				return false;
+			};
+		};
+		
+		var itemRendererByName = function(type) {
+			var $template = $("<a/>");
+			return function(dto, count) {
+				return $template
+					.clone()
+					.attr("href", "/browse/" + type + "/" + dto.Id)
+					.text(dto.Name);
+			};
+		};
+
+		var systemItemRenderer = function() {
+			var $template = $("<a/>");
+			return function(dto, count) {
+				return $template
+					.clone()
+					.attr({ href: "/browse/system/" + dto.Id, title: dto.Name })
+					.text(dto.Abbreviation);
+			};
+		}();
+		
+		$("#show-default-menu").click(function() {
+			$content.empty();
+			$container.hide();
+			$browseMenu.show();
+			return false;
+		});
+
+		$("#browse-game").click(getDataAndRender("game", itemRendererByName("game")));
+		$("#browse-system").click(getDataAndRender("system", systemItemRenderer));
+		$("#browse-category").click(getDataAndRender("category", itemRendererByName("category")));
+		$("#browse-publisher").click(getDataAndRender("publisher", itemRendererByName("publisher")));
+	});
+}(jQuery, window));

Src/VideoGameQuotes.Web/media/js/vgquotes.js

@@ -37,15 +37,9 @@
 	
 	$.fn.clearModelErrors = function() {
 		this
-			.find(".field-validation-error")
+			.find(".field-validation-error").remove().end()
-			.remove()
+			.find(".input-validation-error").removeClass("input-validation-error").end()
-			.end()
+			.find(".error-summary").empty().hide();
-			.find(".input-validation-error")
-			.removeClass("input-validation-error")
-			.end()
-			.find(".error-summary")
-			.empty()
-			.hide();
 			
 		return this;
 	};
@@ -58,7 +52,7 @@
 					return;
 				}
 				
-				callback.call(null, data.Data[type + "s"][0]);
+				callback.call(null, data.Data.records[0]);
 			};
 		};