首页 > 代码库 > 简陋的 ASP.NET CORE 单页Web应用程序“框架”

简陋的 ASP.NET CORE 单页Web应用程序“框架”

2024-11-20 20:48:38   203人阅读

我对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="http://www.mamicode.com/~/js/jquery-1.7.1.min.js"></script>    <script src="http://www.mamicode.com/~/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 = http://www.mamicode.com/@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=397860namespace Fonshen.SPA.Controllers{    public class HomeController : Controller    {        // GET: /<controller>/        public IActionResult Index()        {            var data = http://www.mamicode.com/new"index"            };            return this.Page(data);        }        public IActionResult About(int id)        {            var data = http://www.mamicode.com/new"about",                page = id            };            return this.Page(data);        }        public IActionResult Contact()        {            var data = http://www.mamicode.com/new"contact"            };            return this.Page(data);        }    }}

三、3个Action 对应3个 Js 渲染文件

// /js/Home/Index.js 文件负责渲染 Index Action// Page.Data 对应服务端的 dataPage.Render = function () {    Page.Body.html("Index:" + Page.Data.content);};// /js/Home/About.js 文件 负责渲染 About ActionPage.Render = function () {    Page.Body.html("About->第" + Page.Data.page + "页");};// /js/Home/Contact.js 文件 负责渲染 Contact ActionPage.Render = function () {    Page.Body.html("Contact:" + Page.Data.content);};

简陋的 ASP.NET CORE 单页Web应用程序“框架”


联系
我们