-
-
Save mangowi/5b4694b270bf13b616be62313e8537ae 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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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>© @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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (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 }); | |
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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