我對ASP.NET CORE瞭解不多，不知道是不是重覆造輪子，也或者什麼也不是，這個Demo是這樣的： 1、非常簡單或者說原始；2、將單頁Web應用增加了一個頁（Page）概念（相當於MVC的 View） 3、Ajax無刷新跳轉到新 Page，並支持H5瀏覽器刷新 Page、前進後退到其它 Page ...
我對ASP.NET CORE瞭解不多，不知道是不是重覆造輪子，也或者什麼也不是，這個Demo是這樣的：
1、非常簡單或者說原始；
2、將單頁Web應用增加了一個頁（Page）概念（相當於MVC的 View）
3、Ajax無刷新跳轉到新 Page，並支持H5瀏覽器刷新 Page、前進後退到其它 Page
4、類 MVC 開發模式，Action 提供 Data，Js 渲染 View，Data 和 View 開發分離
完整代碼可以訪問 https://github.com/fonshen/Fonshen.SPA
都是很簡單的東西，好像沒什麼好說的，直接看核心應用代碼：
一、單頁的基礎頁面 /View/Shared/Default.cshtml 展示了一個菜單，點擊菜單無刷新切換到新欄目，新欄目可以刷新，後退前進
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<script src="~/js/jquery-1.7.1.min.js"></script>
<script src="~/js/Basic.js?92"></script>
</head>
<body>
<div id="header"></div>
<div id="menu">
<ul>
<li><a href="javascript:Page.Jump('/')">首頁</a></li>
<li><a href="javascript:Page.Jump('/Home/About/1')">關於第1頁</a></li>
<li><a href="javascript:Page.Jump('/Home/About/2')">關於第2頁</a></li>
<li><a href="javascript:Page.Jump('/Home/Contact')">聯繫</a></li>
</ul>
</div>
<div id="content"></div>
<div id="footer"></div>
<script>
Page.Data = @Html.Raw(ViewData["Page.Data"]);
</script>
</body>
</html>
二、控制器類，每一個 return this.Page(data) 的 Action 對應一個 Page
using Fonshen.SPA.Extensions;
using Microsoft.AspNetCore.Mvc;
// For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
namespace Fonshen.SPA.Controllers
{
public class HomeController : Controller
{
// GET: /<controller>/
public IActionResult Index()
{
var data = new
{
content = "index"
};
return this.Page(data);
}
public IActionResult About(int id)
{
var data = new
{
content = "about",
page = id
};
return this.Page(data);
}
public IActionResult Contact()
{
var data = new
{
content = "contact"
};
return this.Page(data);
}
}
}
三、3個Action 對應3個 Js 渲染文件
// /js/Home/Index.js 文件負責渲染 Index Action
// Page.Data 對應服務端的 data
Page.Render = function () {
Page.Body.html("Index:" + Page.Data.content);
};
// /js/Home/About.js 文件 負責渲染 About Action
Page.Render = function () {
Page.Body.html("About->第" + Page.Data.page + "頁");
};
// /js/Home/Contact.js 文件 負責渲染 Contact Action
Page.Render = function () {
Page.Body.html("Contact:" + Page.Data.content);
};
