# 2019/0618/MVC Part2 PhotoSharing Route & Sitemap & \_LayOut & AJAX 今日 倒數第二次 MVC課程 今日會把Part2 結束 \#09\_Route\_Sitemap ( Route ) --------------- 兩個重點 一個是路由 ![](/files/-LiBQiCNGCzfc8cGukE6) ![](/files/-LiBQnaXgxBMn0PCFf2N) 預設長這樣 接著我們自己定義一個 沒放在大括弧 { } 就要完全一樣照打不會自動去找 有點類似 donaname 可以讓懂得人也看不出你網站結構 網址沒有再分大小寫 Constraints 約束 ( 正負向表列 ### ##Expration expression Regular Expression {% embed url="" %} ^開頭$結尾 \[ ] 或 在 \[ ] 內多一個^是負向表列 ### ##接著要把url改為自訂的相對應內容 例如留言的url為留言的title 首先啟用自訂action 方法 再到controller 新增action 專門服務它 寫自訂 Find 只能找 key 所以要用where 如果title一樣怎辦 ， 結果說機率太小所以沒處理 記得要啟用 \[Route(@”photo/title/{title}”)] #### ###Chrome 如果 url 有特殊符號 就是被編碼掉了 如空白就是% SEO 排名會比較前面 以上為路游的介紹 #### ###App\_Start/RouteConfig.cs ``` using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Routing; namespace PhotoSharing { public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); /////////////////////////////// //5.1-3 在\App_Start\RouteConfig.cs啟用自訂ACTION 路由==> routes.MapMvcAttributeRoutes(); //啟用自訂Action當作路由方法 routes.MapMvcAttributeRoutes(); ///////////////////// routes.MapRoute( name: "PhotoRoute", url: "photos/{id}", defaults: new { controller = "Photos", action = "Display" } //constraints: new { id=@"^[1-3]$"} ); ///////////////////////// routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } ); } } } ``` #### ###Controller s/PhotosController.cs ``` using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using PhotoSharing.Models; using PhotoSharing.DAL; using System.Net; namespace PhotoSharing.Controllers { public class PhotosController : Controller { //2.2建立Data Context 來自 Photo Model 的 PhotoSharingContext PhotoSharingContext context = new PhotoSharingContext(); // GET: Photos //2.3-1 Index()回傳Photo public ActionResult Index() { ViewBag.Date = DateTime.Now; //用ViewBag帶入今日日期 return View(context.Photos.ToList()); } //2.3-2 Display(int id) 透過id參數回傳Photo,若找不到回傳HttpNotFound()helper public ActionResult Display(int? id) { ViewData["Date"] = DateTime.Now; //用ViewData帶入今日日期 if (id==null) { return new HttpStatusCodeResult(HttpStatusCode.BadRequest); } Photo photo = context.Photos.Find(id); if(photo==null) { return HttpNotFound("abcde"); } return View("Display", photo); } //2.3-7 建立GetImage(int id)回傳File(photo.PhotoFile, photo.ImageMimeType) //這不是View()Helper的ActionResult, 這是File()helper public FileContentResult GetImage(int id) { Photo photo = context.Photos.Find(id); return File(photo.PhotoFile, photo.ImageMimeType); } //2.3-3 GET:Create() 產生新增Photo作業,並回傳 new Photo()並產生CreatedDate屬性值= DateTime.Today public ActionResult Create() { Photo newPhoto = new Photo(); newPhoto.CreatedDate = DateTime.Today; return View("Create",newPhoto); } //2.3-4 Post:Create(Photo photo, HttpPostedFileBase image),使用HTTP POST,執行新增Photo回存作業,回傳RedirectToAction()helper // 如果ModelState.IsValid==false,回傳Photo給View, 反之執行新增Photo回存作業 // photo.ImageMimeType = image.ContentType; // photo.PhotoFile = new byte[image.ContentLength]; // image.InputStream.Read(photo.PhotoFile, 0, image.ContentLength); [HttpPost,ValidateAntiForgeryToken] public ActionResult Create(Photo photo,HttpPostedFileBase image) { photo.CreatedDate = DateTime.Today; if(ModelState.IsValid) { //有post照片才做照片上傳的處理 if (image!=null) { photo.ImageMimeType = image.ContentType; //抓照片型態 photo.PhotoFile = new byte[image.ContentLength]; //取得上傳照片的大小再轉byte陣列 image.InputStream.Read(photo.PhotoFile, 0, image.ContentLength); } context.Photos.Add(photo); context.SaveChanges(); return RedirectToAction("Index"); } else { return View("Create", photo); } } //2.3-5 Get:Delete(int id)產生刪除Photo作業,並回傳Photo(),若找不到回傳HttpNotFound()helper public ActionResult Delete(int? id) { if (id == null) { return new HttpStatusCodeResult(HttpStatusCode.BadRequest); } Photo photo = context.Photos.Find(id); if (photo == null) { return HttpNotFound(); } return View("Delete", photo); } //2.3-6 Post:建立DeleteConfirmed(int id)使用[ActionName("Delete")]屬性,透過HTTP POST,執行刪除Photo回存作業.回傳RedirectToAction()helper [HttpPost,ValidateAntiForgeryToken] [ActionName("Delete")] public ActionResult DeleteConfirmed(int? id) { Photo photo = context.Photos.Find(id); context.Photos.Remove(photo); context.SaveChanges(); return RedirectToAction("Index"); } //3.13-3 在PhotoController中的_PhotoGallery Action上標註排除使用Filter [ValueReporter(IsCheck=false)] //3.6.在PhotoController.cs建立[ChildActionOnly] _PhotoGallery action,用於Partial View public ActionResult _PhotoGallery(int number=0) { List photos; if (number == 0) { //Lambda photos = context.Photos.OrderByDescending(p => p.CreatedDate).ThenBy(p => p.PhotoID).ToList(); //LINQ //photos = (from p in context.Photos // orderby p.CreatedDate descending, p.PhotoID ascending // select p).ToList(); //SQL //Select * from photo //order by CreatedDate desc,p.PhotoID } else { photos = context.Photos.OrderByDescending(p => p.CreatedDate).ThenBy(p => p.PhotoID).Take(number).ToList(); //LINQ //photos = (from p in context.Photos // orderby p.CreatedDate descending, p.PhotoID ascending // select p).Take(number).ToList(); //SQL //Select top 2 * from photo //order by CreatedDate desc,p.PhotoID } return PartialView("_PhotoGallery", photos); } //4.1建立ExceptionDemo Action引發錯誤 //[HandleError(View="ExceptionError")] public ActionResult ExceptionDemo() { int i = 0; int j = 10 / i; return View(); } //4.5建立SlideShow Action並自訂NotImplementedException錯誤 [HandleError(View="ExceptionError")] public ActionResult SliderShow() { throw new NotImplementedException("這一個SliderShow的功能還沒有做好哦!!!"); } //5.1-2 建立自訂路由的ACTION:DisplayByTitle(PhotoController.cs) [Route(@"photo/title/{title}")] public ActionResult DisplayByTitle(string title) { if (title == null) { return new HttpStatusCodeResult(HttpStatusCode.BadRequest); } Photo photo = context.Photos.Where(p=>p.Title==title).FirstOrDefault(); if(photo==null) { return HttpNotFound("abcde"); } return View("Display", photo); } } } ``` #### ###老師步驟 ``` //5.1 設定自訂路由 //5.1-1 在\App_Start\RouteConfig.cs自訂photo路由PhotoRoute //5.1-1.1 測試 //5.1-1.2 測試後加上下段,將constraints限制存取的id導到錯誤處理頁面 // // < error statusCode="404" redirect="/404.html" /> // //5.1-2 建立自訂路由的ACTION:DisplayByTitle(PhotoController.cs) //5.1-3 在\App_Start\RouteConfig.cs啟用自訂ACTION 路由==> routes.MapMvcAttributeRoutes(); //5.1-3.1 測試 //5.1-4 在_PhtotGallery PartialView加上@Html.ActionLink("詳細資料byTitle", "DisplayByTitle", new { Title = item.Title }) //5.1-4.1 測試 //5.2 加入Navigation //5.2.1 NuGet下載MvcSiteMapProvider.MVC5 // ********需先把EntityFramework降版至6.1.3再安裝MvcSiteMapProvider.MVC5，裝完後根目錄下會有sitemap檔 //5.2-2 自訂mvcSiteMapNode(Mvc.sitemap檔) //5.2-3 顯示Menu及SiteMapPath(Photo\Index.cshtml) ``` ## #09\_Route\_Sitemap ( Sitemap ) 下個例子要講layout Navbar 有很多個做法 老師介紹他覺得還不錯的 Sitemap 在 webform 有控制項 但在mvc首先要安裝插鍵 但要先把entityframework 降版 6.1.3 寫mvc要知道有些功能通常都有元件 Mvc sitemap provider 可以只裝mvc5的版本 把它當像是webform裡面的sitemap來用就好 一個xml檔案 接著做個簡單的例子 #### ###Mvc.sitemap ``` ``` 有層級關係 指定controllername跟actionname 這個講完後會補充 error hander 時提到的slider showS 做好後 現在先讀出來 到 views -> photos -> index.cshtml @Html.mvcsitemap().menu() @Html.mvcsitemap().sitemappath() 有bug 沒解決 下課休息 剛剛的問題是發生在Routerconfig 錯了 400 request 就錯了 ![](/files/-LiBXJcjKULoorkKOwIJ) 直接打/photos不帶任何參數就可以 ![](/files/-LiBXC4LWMVJg1uj8P1U) url沒有分大小寫 所以要自訂自己的router 千萬不要跟 controllername一樣不然就沒意義 等等在 layout 解決 Navbar 其實就是用 ul 實現的所以現在就先用 ul 做 @Menu 後面的參數 多載很多 必須要知道到底在調整啥 現在先以 (三參數做示範 開始節點 子節點 階層調整成需求的 就可以上 class 這個sitemap先壓縮起來這其實只是鋪耿要給layout用的 下午例子要去layout跟menu一起講 下午還要講 ajax ?? #### ###Mvc.sitemap #### ###Views/photos/index.cshtml ``` @{ ViewBag.Title = "討論區"; }
選單:@Html.MvcSiteMap().Menu(false,false,false) 目前所在位置:@Html.MvcSiteMap().SiteMapPath()

討論區

@Html.ActionLink("新增留言", "Create")

@Html.Action("_PhotoGallery", "Photos")
``` #### ###老師步驟 ``` //5.1 設定自訂路由 //5.1-1 在\App_Start\RouteConfig.cs自訂photo路由PhotoRoute //5.1-1.1 測試 //5.1-1.2 測試後加上下段,將constraints限制存取的id導到錯誤處理頁面 // // < error statusCode="404" redirect="/404.html" /> // //5.1-2 建立自訂路由的ACTION:DisplayByTitle(PhotoController.cs) //5.1-3 在\App_Start\RouteConfig.cs啟用自訂ACTION 路由==> routes.MapMvcAttributeRoutes(); //5.1-3.1 測試 //5.1-4 在_PhtotGallery PartialView加上@Html.ActionLink("詳細資料byTitle", "DisplayByTitle", new { Title = item.Title }) //5.1-4.1 測試 //5.2 加入Navigation //5.2.1 NuGet下載MvcSiteMapProvider.MVC5 // ********需先把EntityFramework降版至6.1.3再安裝MvcSiteMapProvider.MVC5，裝完後根目錄下會有sitemap檔 //5.2-2 自訂mvcSiteMapNode(Mvc.sitemap檔) //5.2-3 顯示Menu及SiteMapPath(Photo\Index.cshtml) ``` Layout 相當於 webform 的 masterpage \#10\_LayOut Shared 是大家都要用到的東西就會放在這 Partialview 錯誤頁面 等等 … \_有底線的沒辦法直接存取 所有的 View都在 @RenderBody() 裡面 接著真正的做一個空的 \_layout ViewBag.Title 通常表示那個 view 的資訊 Bundle 在講 ?? @styles.Render 用html5語意標籤來寫可以增加 seo 排名 接著調整樣式 利用 bs 3 重點來了 要把 @Html.ActionLink 改為 @sitemap 這時候問題來了 ul 如果用 sitemap 並沒辦法套用 class 那就要用 jq dom 塞 … ( 如果不是預設的內容就要用 jq 塞 接著測試 新增 TestBoostrap.cshtml @{Layout=”\_MainLayout.cshtml”} 各自view所做的樣式修改 最好是留在各自的view內 然後利用@section CSS{\} 到原本的layout內利用 @RenderSection(“CSS”,false) @RenderSection(“Script”,false) false不需要每一個view都有那個區塊 ### ##指定預設\_Layout ( 正負面表列 #### ###Views/\_ViewStart.cshtml ``` @{ //Layout = "~/Views/Shared/_Layout.cshtml"; Layout = "~/Views/Shared/_MainLayout.cshtml"; } ``` #### ###View/Shared/\_MainLayout.cshtml ``` @*//6.1-1-1@ViewBag.Title*@ @ViewBag.Title | 高屏澎東分署股份有限公司 @*//6.1-1-1@ViewBag.Title*@ @*6.2.4 將自訂CSS Section插入Layout*@ @RenderSection("CSS", false) @*//6.1-1-2 製作
裡的Navbar*@
WDA @*@Html.ActionLink("應用程式名稱", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })*@
@*
  • @Html.ActionLink("首頁", "Index", "Home")
  • @Html.ActionLink("關於", "About", "Home")
  • @Html.ActionLink("連絡人", "Contact", "Home")
  • @Html.ActionLink("討論區", "Index", "Photos")
*@ @Html.MvcSiteMap().Menu()
@*6.1-1-3...........................................*@
@RenderBody()
@*6.1-1-4............................................*@

目前所在位置:@Html.MvcSiteMap().SiteMapPath()

© @DateTime.Now.Year - 高屏澎東分署股份有限公司

@*6.2.3 在layout View(Shared\_MainLayout.cshtml)使用BootStrap/Jquery JS*@ @*6.2.5 將自訂Scripts Section插入Layout*@ @*//6.5.3 更新(Shared\_MainLayout.cshtml),加入JQUERY, 產生
    • *@ @RenderSection("Script", false) ``` #### ###老師步驟 ``` //6.1 建立layout //6.1-1 建立layout View(Shared\_MainLayout.cshtml) // Templete:empty(without model) // 不要勾選Use a Layout Page // 修改內容(可參考_Layout.cshtml) //6.1-1-1 @ViewBag.Title //6.1-1-2 製作
    裡的Navbar //6.1-1-3
    @RenderBody()
    //6.1-1-4
    @Html.MvcSiteMap().SiteMapPath()
    //6.1-2 (_ViewStart.cshtml)設定預設的Layout //6.1-3 註解（photo/index.cshtml）原本 5.2-3的Menu及SiteMapPath //6.2.1 *Manage NuGet Package 加入BootStrap & Jquery(已存在則省略) //6.2.2 在layout View(Shared\_MainLayout.cshtml)使用BootStrap CSS // 在標籤內加入 // 1. //6.2.3 在layout View(Shared\_MainLayout.cshtml)使用BootStrap/Jquery JS // 在標籤前加入 // 1. // 2. //6.2.4 將自訂css Section插入Layout(Shared\_MainLayout.cshtml) // 在標籤內加入(6.2.2的後面) // @RenderSection("CSS", false) //6.2.5 將自訂Scripts Section插入Layout(Shared\_MainLayout.cshtml) // 在標籤上一行加入 // @RenderSection("Scripts", false) //6.3-1 加入TestBootStrap Action //6.3.2 在Photos裡建立Bootstrap View:TestBootStrap.cshtml,使用Bootstrap Grid System // Template:Empty (without model) // 勾選Use a Layout Page // 選擇_MainLayout.cshtml為主版 // 修改內容 //6.3.3 在TestBootStrap.cshtml View中定義Section // @section CSS{.......} //6.4.1 更新Create View,使用Bootstrap Form/Button //6.4.2 更新Create View,自訂SCRIPT,使用@section // @section Scripts{.......} //6.5.1 更新(Shared\_MainLayout.cshtml),SiteMap使用Bootstrap Navbar //6.5.2 更新(Shared\_MainLayout.cshtml),加入JQUERY, 產生