Skip to content

Instantly share code, notes, and snippets.

@jayhjkwon
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.
Using both server side rendering and client rendering for faster response with ASP.NET MVC and html5 pushstate from Backbone.js
<!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>
@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>
(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 });
})();
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;
}
}
}
@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>
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; }
}
}
<?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