簡陋的 ASP.NET CORE 單頁Web應用程式“架構”

最後更新：2017-08-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：netcore cti ref core 模式 rip mvc name menu

我對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=397860namespace 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 對應服務端的 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應用程式“架構”

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More