我对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. arcgis api for js入门开发系列十二地图打印（GP服务）

    上一篇实现了demo的地图统计图,本篇新增地图打印,截图如下: (1)地图打印实现的思路如下:首先在创建好地图打印GP模型,设置好模型的参数:其次是验证模型运行模型:然后是发布地图打印的GP服务:最后 ...

  2. C#继承的执行顺序

    自己对多态中构造函数.函数重载执行顺序和过程一直有些不理解,经过测试,对其中的运行顺序有了一定的了解,希望对初学者有些帮助. eg1: public class A { public A() { Co ...

  3. javascript四舍五入tofixed

    //toFixed() 方法可把 Number 四舍五入为指定小数位数的数字. $("#renjunlirun").val(zongLiRun.toFixed(2));//金额

  4. webpack自动生成页面

    在项目中我们会不断的添加,优化代码,每次添加优化之后都需要打包进行再次上传更新.这时问题就回来了,每次打包出来js,css文件的名字都是一样的,在首页index.html的引用也不会变,这样老用户在访 ...

  5. jquery获取当前选项的属性值a

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  6. 日常API之百度翻译

    百度翻译是什么,可以吃吗?相信很多人都熟悉,它是我们生活中必不可少的一只东东. 但是,百度翻译开发平台只有每月只能翻译200万个字符,多出的要按照49.00/百万字符来算.对于我酱紫的乞丐程序员来说, ...

  7. 利用MUI滑动进行利息计算（移动端APP显示）

    在开发移动端的应用时,会用到很多的手势操作,比如滑动.长按等,为了方便开放者快速集成这些手势,mui内置了常用的手势事件,其中滑动应用是比较常见的应用操作,本篇文章将讲述如何利用滑动改变对应值进行计算 ...

  8. PHP xmapp 下面安装 Composer-Setup.exe

    1.打开PHP配置文件E:\xampp\php\php.ini确认以下模块已开启(移除前面的分号). extension=php_openssl.dll, (php.ini文档里面开启一次就OK了) ...

  9. linux命令行解刨

    linux命令需要在命令行界面上操作(windows的cmd也是一个命令行界面).只有在了解命令行界面含义才能知道我们输入这些命令意义是什么,为什么要输入这些命令. 首先我们要知道怎么找出linux输 ...

  10. Vulkan Tutorial 25 Images

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 Introduction 到目前为止,几何图形使用每个顶点颜色进行着色处理,这是一个 ...