简陋的 ASP.NET CORE 单页Web应用程序“框架”
我对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);
};
简陋的 ASP.NET CORE 单页Web应用程序“框架”的更多相关文章
- 从头编写asp.net core 2.0 web api 基础框架 (5) + 使用Identity Server 4建立Authorization Server (7) 可运行前后台源码
前台使用angular 5, 后台是asp.net core 2.0 web api + identity server 4. 从头编写asp.net core 2.0 web api 基础框架: 第 ...
- 从头编写 asp.net core 2.0 web api 基础框架 (1)
工具: 1.Visual Studio 2017 V15.3.5+ 2.Postman (Chrome的App) 3.Chrome (最好是) 关于.net core或者.net core 2.0的相 ...
- 【转载】从头编写 asp.net core 2.0 web api 基础框架 (1)
工具: 1.Visual Studio 2017 V15.3.5+ 2.Postman (Chrome的App) 3.Chrome (最好是) 关于.net core或者.net core 2.0的相 ...
- 从头编写 asp.net core 2.0 web api 基础框架 (3)
第一部分:http://www.cnblogs.com/cgzl/p/7637250.html 第二部分:http://www.cnblogs.com/cgzl/p/7640077.html 之前我介 ...
- 【转载】从头编写 asp.net core 2.0 web api 基础框架 (3)
Github源码地址:https://github.com/solenovex/Building-asp.net-core-2-web-api-starter-template-from-scratc ...
- 在 CentOS 7(Linux)上部署ASP.NET Core 2.2 Web应用程序(Tengine、Asp.Net Core MVC、Centos 7、MySql)
一.前言 1.简单记录一下Linux CentOS 7中安装与配置Tengine的详细步骤. 2.简单比较一下Tengine 和Nginx 3.搭建Asp.net Core和部署 Web程序 4.总结 ...
- 从头编写 asp.net core 2.0 web api 基础框架 (4) EF配置
第1部分:http://www.cnblogs.com/cgzl/p/7637250.html 第2部分:http://www.cnblogs.com/cgzl/p/7640077.html 第3部分 ...
- 【转载】从头编写 asp.net core 2.0 web api 基础框架 (4) EF配置
Github源码地址:https://github.com/solenovex/Building-asp.net-core-2-web-api-starter-template-from-scratc ...
- 从头编写 asp.net core 2.0 web api 基础框架 (2)
上一篇是: http://www.cnblogs.com/cgzl/p/7637250.html Github源码地址是: https://github.com/solenovex/Building- ...
随机推荐
- ASP.NET Core配置Kestrel 网址Urls
ASP.NET Core中如何配置Kestrel Urls呢,大家可能都知道使用UseUrls() 方法来配置. 今天给介绍全面的ASP.NET Core 配置 Urls,使用多种方式配置Urls.让 ...
- 论文笔记 Generative Face Completion
这篇paper将巧妙地将四个loss函数结合在一起,其中每一个loss的功能不同.但这篇paper不够elegant的地方也是loss太多!在本文中,我采用散文的写作方法谈谈自己对这篇paper的理解 ...
- Sql行列转换参考
行列转换:SELECT max(case type when 0 then jine else 0 end) a,max(case type when 1 then jine else 0 end) ...
- AI相关 TensorFlow -卷积神经网络 踩坑日记之一
上次写完粗浅的BP算法 介绍 本来应该继续把 卷积神经网络算法写一下的 但是最近一直在踩 TensorFlow的坑.所以就先跳过算法介绍直接来应用场景,原谅我吧. TensorFlow 介绍 TF是g ...
- 避免循环做SQL操作
经常犯的错误是把一个SQL 操作放置到一个循环中, 这就导致频繁的访问数据库,更重要的是, 这会直接导致脚本的性能低下.以下的例子, 你能够把一个循环操作重置为一个单一的SQL语句. foreach ...
- JAVAEE学习笔记
以后创建常量有三个名字:Constant SystemParas StaticValue 上限或者下限命名 max_ min_ 包含的范围命名 first l ...
- 增广拉格朗日乘子法（Augmented Lagrange Method）
转载自:增广拉格朗日乘子法(Augmented Lagrange Method) 增广拉格朗日乘子法的作用是用来解决等式约束下的优化问题, 假定需要求解的问题如下: minimize f(X) s.t ...
- 每篇半小时1天入门MongoDB——4.MongoDB索引介绍及数据库命令操作
准备工作 继续连接到mongo C:\Users\zouqi>mongo MongoDB shell version: 3.0.7 connecting to: test 查看数据库和集合 &g ...
- canvas学习总结五：线段的端点与连接点
我们在第三节中描述了线段的绘制,其中线段的属性lineWidth是用来改变线段的宽度.让我们来回忆下线宽的用法 function drawLine(){ cxt.lineWidth = 3; cxt. ...
- AngularJs + angular-ui-router + bootstrap 实现blog基础导航功能
AngularJs + angular-ui-router + bootstrap 实现blog基础导航功能 核心代码如下 1.index.html <!DOCTYPE html> < ...