iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
自我挑戰組

.NET Core MVC網頁應用開發系列 第 17

.NET Core第17天_LabelTagHelper的使用

  • 分享至 

  • twitterImage
  •  

LabelTagHelper的使用
對應於HTML tag的封裝,用於給予對應的顯示名稱。
當中的for屬性會關聯於的Id屬性值一致,使彼此關聯可以用TAB標註。

新增好一個LabelController跟相應Index檢視
LabelController.cs

using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

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

./Views/Label/Index.cshtml

@model LabelViewModel
<div>
    <label asp-for="Name"></label>
    <input type="text" asp-for="Name" />
</div>

<div>
    <label asp-for="Age"></label>
    <input type="text" asp-for="Age" />
</div>

新增LabelViewModel

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Net5App6.Models
{
    public class LabelViewModel
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }
}

預設顯示效果
https://ithelp.ithome.com.tw/upload/images/20210917/20107452VwplU2DP00.png

這裡若想更改顯示中文可以去調整ViewModel上面透過Display的Data Annotation來做調整為中文顯示

LabelViewModel.cs

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

namespace Net5App6.Models
{
    public class LabelViewModel
    {
        [Display(Name="姓名")]
        public string Name { get; set; }
        [Display(Name = "年齡")]
        public int Age { get; set; }
    }
}

本篇已同步發表至個人部落格
https://coolmandiary.blogspot.com/2021/08/net-core17labeltaghelper.html


上一篇
.NET Core第16天_AnchorTagHelper的使用
下一篇
.NET Core第18天_InputTagHelper的使用
系列文
.NET Core MVC網頁應用開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言