我对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. flask简单web应用

    推荐一个学习python的网站,个人觉得在这里面收获挺大的,希望对后来学习flask的小伙伴们有帮助.http://www.pythondoc.com/ 用flask框架实现第一个web应用 首先需要 ...

  2. jquery 表格行计算

    表格行计算 总金额: function jisuanTrJinE(obj){ var curTab = $(obj).closest("table"); var curTr = $ ...

  3. 【Android Developers Training】 89. 最大化的使用谷歌云消息（Google Cloud Messaging）

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  4. Thrift总结(二)创建RPC服务

    前面介绍了thrift 基础的东西,怎么写thrift 语法规范编写脚本,如何生成相关的语言的接口.不清楚的可以看这个<Thrift总结(一)介绍>.做好之前的准备工作以后,下面就开始如何 ...

  5. phpcmsV9常用标签

    头部: <title>{if isset($SEO['title']) && !empty($SEO['title'])}{$SEO['title']}{/if}{$SEO ...

  6. 工厂方法模式（Java与Kotlin版）

    前文推送 设计模式 简单工厂模式(Java与Kotlin版) Kotlin基础知识 Kotlin入门第一课:从对比Java开始 Kotlin入门第二课:集合操作 Kotlin入门第三课:数据类型 初次 ...

  7. iOS- 解决iOS10 App启动时放大铺满App Icon的问题

    0.前言 iOS10 App启动时放大铺满App图标 iPad Application shows app icon as launch screen in iOS 10 如图,点击APP后APP图标 ...

  8. CentOS上安装Hadoop2.7，添加数据节点，运行wordcount

    安装hadoop的步骤比较繁琐,但是并不难. 在CentOS上安装Hadoop2.7 1. 安装 CentOS,注:图形界面并无必要 2. 在CentOS里设置静态IP,手工编辑如下4个文件 /etc ...

  9. 构建混合应用方式之 - Azure混合连接

    前面介绍了通过WCF中继构建混合应用的方式,由于对WCF的依赖,使得其使用有一定的局限性,基本上只适用于本地服务是WCF的.NET应用.而混合连接则弥补了这一块的缺陷,除了支持原有WCF中继的功能之外 ...

  10. Vue 实际项目中你可能会遇见的坑

    纸上得来终觉浅,绝知此事要躬行! Vue的文档和教程看的太多,小的demo做的多,也不如自己实际的进行一个完整项目的开发.只有做了才知道原来问题这么多,这里列举了一些你做demo教程可能不会遇见的坑. ...