我对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应用程序“框架”的更多相关文章

  1. 从头编写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 基础框架: 第 ...

  2. 从头编写 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的相 ...

  3. 【转载】从头编写 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的相 ...

  4. 从头编写 asp.net core 2.0 web api 基础框架 (3)

    第一部分:http://www.cnblogs.com/cgzl/p/7637250.html 第二部分:http://www.cnblogs.com/cgzl/p/7640077.html 之前我介 ...

  5. 【转载】从头编写 asp.net core 2.0 web api 基础框架 (3)

    Github源码地址:https://github.com/solenovex/Building-asp.net-core-2-web-api-starter-template-from-scratc ...

  6. 在 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.总结 ...

  7. 从头编写 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部分 ...

  8. 【转载】从头编写 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 ...

  9. 从头编写 asp.net core 2.0 web api 基础框架 (2)

    上一篇是: http://www.cnblogs.com/cgzl/p/7637250.html Github源码地址是: https://github.com/solenovex/Building- ...

随机推荐

  1. python+NLTK 自然语言学习处理二：文本

    在前面讲nltk安装的时候,我们下载了很多的文本.总共有9个文本.那么如何找到这些文本呢: text1: Moby Dick by Herman Melville 1851 text2: Sense ...

  2. js调试模式控制台输出信息

    js调试模式控制台输出信息.console.log

  3. .NET Core 2.0 Preview2 发布汇总

    前言 关于 ASP.NET Core 2.0 的新功能可以查看我的这篇博客. 这篇文章是 Priview2中的一些改进. .NET Core 2.0 - Preview2 Azure 的改进 Dock ...

  4. 关于cookie与session的理解

    服务器端并不能捕获客户端的浏览器关闭事件,因此你关闭浏览器以后,服务器端那个Session还是存在的,要超时以后才被回收,启动一个新的浏览器会启动一个新的session,所以他不认你了session永 ...

  5. 【LeetCode】141. Linked List Cycle

    题目: Given a linked list, determine if it has a cycle in it. Follow up:Can you solve it without using ...

  6. JavaScript中的排序

    <script> //1. 冒泡排序 function bubbleSort(arr) { var len = arr.length; for (var i = 0; i < len ...

  7. jq-animate

    jq-animate: <!doctype html> <html> <head> <meta charset="utf-8"> & ...

  8. 处理浏览器兼容 各个浏览器的标识 hack

    Firefox 浏览器 @-moz-document url-prefix() { .selector { property: value; } } 支持所有Gecko内核的浏览器 (包括Firefo ...

  9. Linux实战教学笔记13:定时任务补充

    第十三节 定时任务补充 标签(空格分隔): Linux实战教学笔记 ---[更多资料点我查看][1] 1,生产环境常用Crontab专业实例 1.1书写crontab定时任务多个基本要领 1.1.1 ...

  10. AngularJS4.0环境搭建详解--windows系统环境

    第一步:安装NodeJS 下载最新版的NodeJS并安装,安装完成后打开CMD命令行,输入以下命令: node -v 若返回类似版本号则代表NodeJS安装成功,如下: 第二部 安装npm 新版的No ...