简陋的 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- ...
随机推荐
- 从Java虚拟机的内存区域、垃圾收集器及内存分配原则谈Java的内存回收机制
一.引言: 在Java中我们只需要轻轻地new一下,就可以为实例化一个类,并分配对应的内存空间,而后似乎我们也可以不用去管它,Java自带垃圾回收器,到了对象死亡的时候垃圾回收器就会将死亡对象的内存回 ...
- 【Android Developers Training】 12. 支持不同屏幕
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- 【Android Developers Training】 76. 用Wi-Fi创建P2P连接
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- 【WPF】在新线程上打开窗口
当WPF应用程序运行时,默认会创建一个UI主线程(因为至少需要一个),并在该UI线程上启动消息循环.直到消息循环结束,应用程序就随即退出.那么,问题就来了,能不能创建新线程,然后在新线程上打开一个新窗 ...
- Spring MVC 项目搭建 -6- spring security 使用自定义Filter实现验证扩展资源验证，使用数据库进行配置
Spring MVC 项目搭建 -6- spring security使用自定义Filter实现验证扩展url验证,使用数据库进行配置 实现的主要流程 1.创建一个Filter 继承 Abstract ...
- 新技能get√10个PS加速小技巧让你的PS不再卡
如果你在处理较大尺寸的图片.使用像HDR.图像合成或者3D和视频等类似的功能,优化Photoshop的性能是非常关键的.这篇文章中,我会为大家介绍几种提高Photoshop性能的建议,使其在你的电脑上 ...
- Unity 游戏框架搭建 (三) MonoBehaviour单例的模板
上一篇文章讲述了如何设计C#单例的模板.也随之抛出了问题: 如何设计接收MonoBehaviour生命周期的单例的模板? 如何设计? 先分析下需求: 1.约束脚本实例对象的个数. 2.约束 ...
- MySQL快速入门 基本技能篇
写在之前的话: 之前一直在用MSSERVER,刚用MySQL时有很多的不适应.就此小结一下工作中遇到的问题和场景,文中出现的局限性欢迎指出 MySQL有客户端式(SQLyog),可托拉拽和写代码:或者 ...
- VB6之HOOK技术
代码背景,自身程序的窗口上有一个TextBox,Hook住WH_CALLWNDPROC用来截获EN_CHNAGE即文本变更的消息. *这个其实用SetWindowLong和CallWindowProc ...
- usaco 2002 月赛 Fiber Communications 题解
Description Farmer John wants to connect his N (1 <= N <= 1,000) barns (numbered 1..N) with a ...