第25個冬天

使用.net6 mvc 在此先來更改一下預設範本的HomeController.cs 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 using Microsoft.AspNetCore.Mvc ; using System.Diagnostics ; namespace BingoSys.Controllers { public class HomeController : Controller { public IActionResult Index () { return Redirect ( $ "/{Guid.NewGuid()}" ); } [HttpGet("/{roomId}")] public IActionResult Room ( string roomId) { ViewBag.roomId = roomId; return View (); } } } 預設加入直播房空間都需要有一個獨一無二的id,在此用guid來實踐 接著到微軟signalr的文檔介紹 https://dotnet.microsoft.com/en-us/apps/aspnet/signalr Get Started 點入後 https://learn.microsoft.com/zh-tw/aspnet/core/tutorials/signalr?view=aspnetcore-6.0&WT.mc_id=dotnet-35129-website&tabs=visual-studio 新增用戶端連結 SignalR 庫 這裡我們透過libman來安裝client端需要的signalr js libman install @microsoft/signalr@latest -p unpkg -d wwwroot/js/signalr --files dist/browser/signalr.js --fi

  開發環境使用vs2022  + .net6 新增好一個全新的MVC專案後 針對專案右鍵->加入->新增Scaffold項目->選擇MVC區域 命名為Admin Area部分在每一個 MVC 專案只允許有一層 Areas 目錄不可以有多層 在此做Home控制器及相應view的生成 之後若直接貿然運行就會看到錯誤 An unhandled exception occurred while processing the request. AmbiguousMatchException: The request matched multiple endpoints. Matches: .... 這邊因為同時存在兩個Home控制器導致有模玲兩可狀況 可以避免 Area 中使用相同的 Controller 名稱 或者進行Area的路由設定做區分 因此需要 在 Controller 加入 Area 屬性 ~\Areas\Admin\Controllers\HomeController.cs 1 2 3 4 5 6 7 8 9 10 11 12 13 using Microsoft.AspNetCore.Mvc ; namespace BingoSys.Areas.Admin.Controllers { [Area("Admin")] public class HomeController : Controller { public IActionResult Index () { return View (); } } } 加入 Area 路由設定 開啟 Program.cs 檔案，在既有的 MapControllerRoute 設定多擴充一組 Area 的路由設定 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 var builder = WebApplication.CreateBuilder(args); // Add services t

  在前面介紹到的無論單選鈕或複選框下拉選單，它們的v-model 綁定值通常是根據< input >元素的type來確定的，很難獲得一些較有彈性的動態值存取。 單、複選框(checkbox)值綁定(對於 HTML 中的複選框，只有兩種狀態：選取和未選取。) 可透過 true-value 來指定選取時的值， false-value 來指定未選取時的值 又細分靜態or動態值 checkbox綁定靜態值 用 true-value 綁定一個選中時的值，使用 false-value 綁定一個未選取時的值。 <!-- eslint-disable --> < template > < div class = "mt-3 p-3 w-25" > < div class = "mb-3" > < input type = "checkbox" v-model = "toggle" true-value = "yes" false-value = "no" /> </ div > < div class = "mb-3" > < input class = "btn btn-primary" type = "button" value = "提交" @ click = "process" /> </ div > </ div > </ template > < script setup > import { ref } from "vue" ; const toggle = ref(); const process = () => { consol