.NET Core第16天_AnchorTagHelper的使用

-
 
AnchorTagHelper(錨點標籤協助程式)
為將HTML<a>封裝後的定位標籤類別程式


AnchorTagHelper.cs

  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
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
#region 組件 Microsoft.AspNetCore.Mvc.TagHelpers, Version=5.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60
// C:\Program Files\dotnet\packs\Microsoft.AspNetCore.App.Ref\5.0.0\ref\net5.0\Microsoft.AspNetCore.Mvc.TagHelpers.dll
#endregion

using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.AspNetCore.Razor.TagHelpers;
using System.Collections.Generic;

namespace Microsoft.AspNetCore.Mvc.TagHelpers
{
    //
    // 摘要:
    //     Microsoft.AspNetCore.Razor.TagHelpers.ITagHelper implementation targeting <a>
    //     elements.
    [HtmlTargetElement("a", Attributes = "asp-action")]
    [HtmlTargetElement("a", Attributes = "asp-controller")]
    [HtmlTargetElement("a", Attributes = "asp-area")]
    [HtmlTargetElement("a", Attributes = "asp-page")]
    [HtmlTargetElement("a", Attributes = "asp-page-handler")]
    [HtmlTargetElement("a", Attributes = "asp-fragment")]
    [HtmlTargetElement("a", Attributes = "asp-host")]
    [HtmlTargetElement("a", Attributes = "asp-protocol")]
    [HtmlTargetElement("a", Attributes = "asp-route")]
    [HtmlTargetElement("a", Attributes = "asp-all-route-data")]
    [HtmlTargetElement("a", Attributes = "asp-route-*")]
    public class AnchorTagHelper : TagHelper
    {
        //
        // 摘要:
        //     Creates a new Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper.
        //
        // 參數:
        //   generator:
        //     The Microsoft.AspNetCore.Mvc.ViewFeatures.IHtmlGenerator.
        public AnchorTagHelper(IHtmlGenerator generator);

        public override int Order { get; }
        //
        // 摘要:
        //     The name of the action method.
        //
        // 備註:
        //     Must be null if Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper.Route or
        //     Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper.Page is non-null.
        [HtmlAttributeName("asp-action")]
        public string Action { get; set; }
        //
        // 摘要:
        //     The name of the controller.
        //
        // 備註:
        //     Must be null if Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper.Route or
        //     Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper.Page is non-null.
        [HtmlAttributeName("asp-controller")]
        public string Controller { get; set; }
        //
        // 摘要:
        //     The name of the area.
        //
        // 備註:
        //     Must be null if Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper.Route is
        //     non-null.
        [HtmlAttributeName("asp-area")]
        public string Area { get; set; }
        //
        // 摘要:
        //     The name of the page.
        //
        // 備註:
        //     Must be null if Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper.Route or
        //     Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper.Action, Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper.Controller
        //     is non-null.
        [HtmlAttributeName("asp-page")]
        public string Page { get; set; }
        //
        // 摘要:
        //     The name of the page handler.
        //
        // 備註:
        //     Must be null if Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper.Route or
        //     Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper.Action, or Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper.Controller
        //     is non-null.
        [HtmlAttributeName("asp-page-handler")]
        public string PageHandler { get; set; }
        //
        // 摘要:
        //     The protocol for the URL, such as "http" or "https".
        [HtmlAttributeName("asp-protocol")]
        public string Protocol { get; set; }
        //
        // 摘要:
        //     The host name.
        [HtmlAttributeName("asp-host")]
        public string Host { get; set; }
        //
        // 摘要:
        //     The URL fragment name.
        [HtmlAttributeName("asp-fragment")]
        public string Fragment { get; set; }
        //
        // 摘要:
        //     Name of the route.
        //
        // 備註:
        //     Must be null if one of Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper.Action,
        //     Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper.Controller, Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper.Area
        //     or Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper.Page is non-null.
        [HtmlAttributeName("asp-route")]
        public string Route { get; set; }
        //
        // 摘要:
        //     Additional parameters for the route.
        [HtmlAttributeName("asp-all-route-data", DictionaryAttributePrefix = "asp-route-")]
        public IDictionary<string, string> RouteValues { get; set; }
        //
        // 摘要:
        //     Gets or sets the Microsoft.AspNetCore.Mvc.Rendering.ViewContext for the current
        //     request.
        [HtmlAttributeNotBound]
        [ViewContext]
        public ViewContext ViewContext { get; set; }
        //
        // 摘要:
        //     Gets the Microsoft.AspNetCore.Mvc.ViewFeatures.IHtmlGenerator used to generate
        //     the Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper's output.
        protected IHtmlGenerator Generator { get; }

        //
        // 備註:
        //     Does nothing if user provides an href attribute.
        public override void Process(TagHelperContext context, TagHelperOutput output);
    }
}



新增AnchorController.cs跟相應Index檢視

AnchorController.cs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Net5App6.Controllers
{
    public class AnchorController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Index.cshtml

1
2
3
4
5
<div>
    <a asp-controller="Home">定位點至Home</a>
    <br>
    <a asp-controller="Student">定位點至Student</a>
</div>

新增AnchorViewModel.cs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Net5App6.Models
{
    public class AnchorViewModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}


asp-controller : 
於定位標籤上使用asp-controller屬性後可生成對應URL地址
該值最終會放置於<a> tag的href 屬性中
運行效果:預設只有設定Controller名稱就會自動導向對應Index的檢視








asp-action:可以指定對應要跳轉導向至哪個action，
指定的action method必須存在於asp-controller控制器中或目前控制器當中。
AnchorController.cs

./Views/Anchor/Index.cshtml

1
2
3
4
5
6
7
<div>
    <a asp-controller="Home">定位點至Home預設Index</a>
    <br>
    <a  asp-action="show">定位點至當前控制器(Anchor)的Show</a>
    <br>
    <a asp-controller="Student" asp-action="show">定位點至Student的Show</a>
</div>

所以當預設我們只有指定asp-action的時候會抓當前檢視所隸屬的Controller為誰作優先
以上面例子跑到瀏覽器執行狀況就會以Anchor控制器下的Show為優先。




asp-host : 可以指定主機名稱、域名

asp-protocol :  於<a> tag中可以藉由asp-host來指定URL協定要是http或https，預設沒有指定會採用80的http。


./Views/Anchor/Index.cshtml

1
2
3
<div>
    <a asp-controller="Student" asp-action="show" asp-host="kytest" asp-protocol="https">定位點至Student的Show</a>
</div>





asp-route : 路由模板
可以預先在特定Controller的action method上面透過
[Route("路由模板字串" , Name="別名")]來縮短在檢視中呼叫要多寫asp-controller 、 asp-acton等屬性，直接asp-route="別名"即可導向對應路由指定的action。
(PS:asp-route不可以跟 asp-controller 、asp-action 、asp-page、asp-page-handler同時並存，一次只能選擇要用asp-route或asp-controller 、asp-action...等。)


AnchorController.cs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Net5App6.Controllers
{
    public class AnchorController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        [Route("/Student/Show", Name = "stu_show")]
        public IActionResult Show()
        {
            return View();
        }
    }
}

./Views/Anchor/Index.cshtml

1
2
3
4
5
<div>
    <a asp-controller="Student" asp-action="show" >定位點至Student的Show</a>
    <br>
    <a asp-route="stu_show">定位點至Student的Show(透過asp-route)</a>
</div>




asp-route-{value}:URL訪問帶有參數的路由模板形式，{value}代表參數的名稱也就是URL 問號
後面的參數。

./Views/Anchor/Index.cshtml

1
2
3
4
5
6
<div>

    <a asp-controller="Anchor" asp-action="PlayerInfo" asp-route-name="戴姿穎">導向PlayerInfo</a>
    <br />
    <a asp-controller="Anchor" asp-action="ClassInfo" asp-route-class_name="一年8班" asp-route-teacher="王政忠" >導向ClassInfo</a>
</div>


AnchorController.cs

 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
34
35
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Net5App6.Controllers
{
    public class AnchorController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        [Route("/Student/Show", Name = "stu_show")]
        public IActionResult Show(string name)
        {
            return View();
        }

        public IActionResult PlayerInfo(string name)
        {
            ViewBag.Name = name;
            return View();
        }

        public IActionResult ClassInfo(string class_name, string teacher)
        {
            ViewBag.class_name = class_name;
            ViewBag.teacher = teacher;
            return View();
        }
    }
}

運行效果

藉此可觀察當要傳遞多個參數則要多自訂asp-route-{value}多一些，而在實務上可能也會感覺太冗長。

asp-all-route-data : 是針對多參數的一個key-value集合容器來一次大量參數設置，因此就不需要再tag自動太多屬性。

比方像上面要傳送班級跟導師名兩個參數就可以改寫
./Views/Anchor/Index.cshtml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
@{
    var url_params = new Dictionary<string, string>()
{
        {"class_name","一年8班" },
        {"teacher","王政忠" }
    };
}

<div>

    <a asp-controller="Anchor" asp-action="ClassInfo" asp-route-class_name="一年8班" asp-route-teacher="王政忠">導向ClassInfo</a>
    <br />
    <a asp-controller="Anchor" asp-action="ClassInfo" asp-all-route-data="url_params">導向ClassInfo(asp-all-route-data)</a>
</div>





asp-fragment : 有想要追加到URL片段的部分可以透過此屬性設置，增加#後頭的部分。
(於同一個頁面在做定位的部分)




AnchorTagHelper 跟 ViewModel搭配使用

./Views/Anchor/Index.cshtml

1
2
3
4
5
@model AnchorViewModel

<div>
    <a asp-route-id="@Model.Id" >@Model.Name</a>
</div>

AnchorController.cs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
using Microsoft.AspNetCore.Mvc;
using Net5App6.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Net5App6.Controllers
{
    public class AnchorController : Controller
    {
        public IActionResult Index()
        {
            var anchor_model = new AnchorViewModel()
            {
                Id = 1,
                Name = "Kevin"
            };
            return View(anchor_model);
        }
    }
}








留言

張貼留言

這個網誌中的熱門文章

何謂淨重(Net Weight)、皮重(Tare Weight)與毛重(Gross Weight)

-
圖片
當談到貨物的重量時，往往會分成所謂的淨重(Net Weight)與毛重(Gross Weight)。 會有以下公式關係存在 淨重=毛重-皮重(包裝物的重量) 毛重=淨重+皮重 淨重( Net Weight 縮寫為N.W.) 指物品本身的重量，不包括容器或包裝材料的重量。 凈重是國際貿易中最常見的計重辦法。 例如，如果運輸原材料，原材料的重量就是所運輸貨物的淨重。包裝原材料的容器或包裝不計入淨重。同樣地，當我們考慮一罐豆子時，罐子內所含物品的重量就算作淨重。因此，淨重將包括豆子、罐頭里的任何液體，以及保存豆子所含的物品。 大多數 以重量為計價的貨物買賣 ，採用此計價方法。 若合同中並未明確規範以何種方式計量和計價時，按慣例以凈重計價。 毛重( Gross Weight 縮寫G.W.) 貨物連同它的包裝的重量，是你托運的所有物品的總重量。 皮重(Tare Weight) 指商品外包裝材料的重量(即運輸包裝的重量)，不包括內包裝材料和襯墊物的重量。 比方一個空的貨櫃、容器、或任何包裝材料的重量。 Net Net Weight純淨重 (指從Net Weight中扣除內包裝後的重量) 進出口商品為了因應運輸及消費需求, 一般都有內包裝與外包裝。 一般在買賣合同與信用狀中,通常只要求於裝箱單上註明Gross Weight和Net Weight即可, 但有些L/C 要求 Net Net Weight,大多是海關徵收從量稅時的依據 運輸重量對於航運業或者航空運輸等各自都通用這些術語 為何特別在意重量? 主要就在於會影響像是傳輸安全乘載限制。 就運輸層面(不同方式的運輸) 航空運輸：對機長而言，毛重包括皮重、產品淨重以及飛機、燃料、乘客和機組人員的重量。 公路/鐵路運輸:對於火車車長而言，毛重包括產品淨重、皮重和運輸車輛的重量。 水路航運運輸：對船長而言，毛重就是淨重和皮重之和。 就公司ERP成本角度 成本一般都會採用 "淨重" 主要是因為若用毛重，可能會有輔材不可控因素存在 比方一個 5cm 固定塑膠件，今天用一個 10cm 紙箱測重，明天用一個 100cm 紙箱測重，那可能就容易導致ERP資料比較會失真。 就物流層面來探討 通常還會有一名詞即所謂「實際重量」(Actual Weight) 根據稱重(過磅)所得到的重量，實際重量分為實際毛重(Gross Weig...
閱讀完整內容

Architecture(架構) 和 Framework(框架) 有何不同?_軟體設計前的事前規劃的藍圖概念

-
圖片
一個應用程式(軟體) 不管是  互動拍照 也好、 投影也好、車牌偵測... 舞台演唱會後方電視牆的互動應用程序、 粒子特效、3D或2D遊戲  等等 開發者通常都需要在一開始做規劃 ㄟ  假設我今天要寫 跟影像有關 可能需要偵測、可能需要提取前景、可能需要偵測圓形 之類的 我有  emgucv 、AForge.Net、 opencv 等等可以用 但是 假設我今天要做的應用程序是需要有視窗介面的~~ emgucv 跟 C# windows form 媒合性 就很高 而且直接在 visual studio 做開發 opencv 我可能還需要依賴 Qt 之類等等  framework 假設我今天是要寫一個 演唱會電視牆互動粒子特效 可能就會挑   openframeworks  、 processing 、kinect 來寫互動 Achitecture  --->全稱 :  Software Architecture   軟體架構 Achitecture   由好多 framework 組成 軟體架構（Software Architecture）是一種軟體在開發前的設計藍圖， 用來告訴軟體的結構，功能，介面，用法，與其他系統的構連以及資料交換等等規範， 但它並沒有叫你要用什麼方式實作， 因此軟體架構通常會產生文件，圖樣，原型以及規格等， 就是沒有可用的程式碼，因為那不是軟體架構應該有的東西， 就像蓋房子時是給你藍圖，而不是一幢蓋好的房子。 軟體框架（Framework):是一個已經成形的方法，而且有程式碼實體 （例如鋼構工法也是要有鋼材才能做），並且會告訴你要如何使用它 （即 Framework Documentation，MSDN Library 即為一最佳例子）
閱讀完整內容

經得起原始碼資安弱點掃描的程式設計習慣培養(五)_Missing HSTS Header

-
圖片
  接續前幾篇系列 經得起原始碼資安弱點掃描的程式設計習慣培養(一)_OWASP Top 10(十大網站安全風險)_學習寫更安全程式碼的網站推薦 經得起原始碼資安弱點掃描的程式設計習慣培養(二)_8.Insecure Deserialization ：不安全的反序列化漏洞ASP.NET處理方式 經得起原始碼資安弱點掃描的程式設計習慣培養(三)_7.Cross Site Scripting(XSS)_Stored XSS_Reflected XSS All Clients 經得起原始碼資安弱點掃描的程式設計習慣培養(四)_1.Injection注入攻擊_SQL Injection)_order by 語句正確參數化套入 最近又遇到被若安掃描到高風險要修正的程式碼啦.... 一看這還真是搞不懂該怎麼修呢 HSTS(HTTP Strict Transport Security)  主要是一份國際標準規格 (RFC 6797) 的網際網路瀏覽安全機制， 用於宣告瀏覽器與伺服器之間通訊方式必須強制採用 TLS/SSL 加密通道。 只要從伺服器端送出一個 Strict-Transport-Security 標頭 (Header) 給瀏覽器，即可告知瀏覽器於未來的某段時間內一律使用 SSL 來和該網站連接 (設定可涵蓋所有子域名網站)， 一旦發生憑證失效情況，使用者將無法再瀏覽該網站，如此一來便可大幅減少中間人攻擊的問題發生。 再更白話一點 HSTS Header 就是負責將 http 強制轉為 https CheckMarx掃碼報告給的說明 ============================================================ 風險: 如果web config沒有設置HSTS表頭、"max-age"(有效期)不足一年， 或沒有設定"includeSubDomains"(包含所有子網域)，可能會使用戶容易遭受中間人攻擊。 發生原因: 許多使用者只要在瀏覽器的網址列輸入網域名稱(Domain Name)即可瀏覽網站， 並沒有輸入協定(Protocol)的名稱。 瀏覽器會自動假設使用者使用的是HTTP協定而不是有加密機制的HTTPS協定。 在第一次發出前往特定網站的請求時，攻擊者可以執行中間人攻擊並將用戶轉址到...
閱讀完整內容