Skip to content

Instantly share code, notes, and snippets.

@jayhjkwon

jayhjkwon/About.cshtml

Last active December 14, 2018 17:10
Show Gist options
  • Save jayhjkwon/515e3818b2492d81d94e to your computer and use it in GitHub Desktop.
Save jayhjkwon/515e3818b2492d81d94e to your computer and use it in GitHub Desktop.
Download ZIP
Using both server side rendering and client rendering for faster response with ASP.NET MVC and html5 pushstate from Backbone.js
Raw
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="header navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li><a href="/home/contact" class="go-contact">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div class="content-container">
@RenderBody()
</div>
<hr />
<footer>
<p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/backbone")
@RenderSection("scripts", required: false)
</body>
</html>
Raw
About.cshtml
@model IEnumerable<WebApplication7.Controllers.User>
@{
ViewBag.Title = "About";
}
<h2>@ViewBag.Title.</h2>
<h3>@ViewBag.Message</h3>
<ul>
@foreach (var item in Model)
{
<li>@item.Name</li>
}
</ul>
Raw
app.js
(function () {
var App = {};
var Router = Backbone.Router.extend({
routes: {
'home/contact': 'moveContact'
},
moveContact: function () {
$.getJSON("/contact-json").done(function (result) {
$('.content-container').html(result);
});
}
});
App.router = new Router;
var HeaderView = Backbone.View.extend({
el: '.header',
events: {
'click .go-contact' : 'goContact'
},
goContact: function (e) {
e.preventDefault();
App.router.navigate('home/contact', { trigger: true });
}
});
new HeaderView;
Backbone.history.start({ pushState: true, silent: true });
})();
Raw
BundleConfig.cs
using System.Web;
using System.Web.Optimization;
namespace WebApplication7
{
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new ScriptBundle("~/bundles/backbone").Include(
"~/Scripts/underscore.js",
"~/Scripts/backbone.js",
"~/Scripts/app.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
// Set EnableOptimizations to false for debugging. For more information,
// visit http://go.microsoft.com/fwlink/?LinkId=301862
BundleTable.EnableOptimizations = false;
}
}
}
Raw
Contact.cshtml
@model IEnumerable<WebApplication7.Controllers.User>
@{
ViewBag.Title = "Contact";
}
<h2>@ViewBag.Title.</h2>
<h3>@ViewBag.Message</h3>
<ul>
@foreach (var item in Model)
{
<li>@item.Name</li>
}
</ul>
Raw
HomeController.cs
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace WebApplication7.Controllers
{
public class HomeController : Controller
{
private static List<User> _users;
public HomeController()
{
if (_users == null)
{
_users = new List<Controllers.User>();
_users.Add(new User { Id = 1, Name = "Sujin" });
_users.Add(new User { Id = 2, Name = "Uyoung" });
_users.Add(new User { Id = 3, Name = "Hyojung" });
}
}
public ActionResult Index()
{
return View();
}
public ActionResult About()
{
ViewBag.Message = "Always rendered from server";
return View(_users);
}
public ActionResult Contact()
{
ViewBag.Message = "Rendered from server";
return View(_users);
}
[Route("contact-json")]
public JsonResult ContactJSON()
{
ViewBag.Message = "Rendered from client";
string result = RazorViewToString.RenderRazorViewToString(this, "Contact", _users);
return Json(result, JsonRequestBehavior.AllowGet);
}
}
public static class RazorViewToString
{
public static string RenderRazorViewToString(this Controller controller, string viewName, object model)
{
controller.ViewData.Model = model;
using (var sw = new StringWriter())
{
var viewResult = ViewEngines.Engines.FindPartialView(controller.ControllerContext, viewName);
var viewContext = new ViewContext(controller.ControllerContext, viewResult.View, controller.ViewData, controller.TempData, sw);
viewResult.View.Render(viewContext, sw);
viewResult.ViewEngine.ReleaseView(controller.ControllerContext, viewResult.View);
return sw.GetStringBuilder().ToString();
}
}
}
public class User
{
public int Id { get; set; }
public string Name { get; set; }
}
}
Raw
package.json
<?xml version="1.0" encoding="utf-8"?>
<packages>
<package id="Antlr" version="3.4.1.9004" targetFramework="net451" />
<package id="Backbone.js" version="1.1.2" targetFramework="net451" />
<package id="bootstrap" version="3.0.0" targetFramework="net451" />
<package id="jQuery" version="1.10.2" targetFramework="net451" />
<package id="jQuery.Validation" version="1.11.1" targetFramework="net451" />
<package id="Microsoft.AspNet.Mvc" version="5.1.2" targetFramework="net451" />
<package id="Microsoft.AspNet.Razor" version="3.1.2" targetFramework="net451" />
<package id="Microsoft.AspNet.Web.Optimization" version="1.1.3" targetFramework="net451" />
<package id="Microsoft.AspNet.WebPages" version="3.1.2" targetFramework="net451" />
<package id="Microsoft.jQuery.Unobtrusive.Validation" version="3.1.2" targetFramework="net451" />
<package id="Microsoft.Web.Infrastructure" version="1.0.0.0" targetFramework="net451" />
<package id="Modernizr" version="2.6.2" targetFramework="net451" />
<package id="Newtonsoft.Json" version="5.0.6" targetFramework="net451" />
<package id="Respond" version="1.2.0" targetFramework="net451" />
<package id="underscore.js" version="1.5.1" targetFramework="net451" />
<package id="WebGrease" version="1.5.2" targetFramework="net451" />
</packages>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment