我对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);
};