iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
1
Modern Web

打net core肉飯系列 第 7

[2020鐵人賽] Day7 - 模型(Model)(2/3)

這邊來介紹模型延伸-Model驗證,主要是檢查表單欄位值是否合法,以免跑到後面資料會有問題的一道防線,例如EMAIL的格式、欄位是否必填、至少填幾個字元、是否為數字等等...

  • 為model增加屬性
    我們可在上一章的Scott.cs檔中先引用System.ComponentModel.DataAnnotations,這個命名空間,才可以為每個屬性應套上attribute,常見的幾個如下所示:
  • Required:必填(最常用的項目)
  • Display:顯示名稱為
  • Range:資料範圍,像是最大值(Max)、最小值(min)
  • StringLength:字串最大長度
  • DataType:資料型別

簡單為Scott類別加幾個屬性如下:

    public class Scott
    {

        [Display(Name = "號碼")]
        public int ID { get; set; }
        [Required(ErrorMessage ="名字不可為空")]
        public string Name { get; set; }
        [Display(Name = "年齡")]
        public int Age { get; set; }
        [Display(Name = "地址")]
        public string Address { get; set; }
    }

接著,我們在上一章的controller新增一個名為Create的Action,右鍵->新增檢視->Create,接收前端Scott類別的物件,並在Create中加入ModelState.IsValid這個判斷式,才會進行Model驗證(後端做)

        [HttpPost]
        public IActionResult Create(Scott scottObj)
        {
            if (ModelState.IsValid)
            {
                //做存入資料庫的動作
                .......
                //導回首頁
                return RedirectToAction(nameof(Index));
            }
            return View(scottObj);
        }

接著來撰寫前端頁面,使用剛剛做好的Create.cshtml

    <form asp-action="create">
        <div asp-validation-summary="All"></div>
        <div>
            <label asp-for="Name"></label>
            <input asp-for="Name" />
            <span asp-validation-for="Name" data-valmsg-replace="false">*</span>
        </div>
        <div>
            <label asp-for="Age"></label>
            <input asp-for="Age" />
            <span asp-validation-for="Age" data-valmsg-replace="false">*</span>
        </div>
        <div>
            <label asp-for="Address"></label>
            <input asp-for="Address" />
            <span asp-validation-for="Address" data-valmsg-replace="false">*</span>
        </div>
        <div>
            <input type="submit" value="Save" />
        </div>
    </form>

接著就執行Debug mode,開啟我們剛剛的頁面,甚麼都不填入,按下Save按鈕,會發現在ModelState.IsValid回傳false,後端Model驗證成功!

自定義驗證
如果以上簡單的屬性無法滿足你的需求的話,當然也有為欄位套上自定義邏輯的Model驗證,但必須有前置準備。

  • 類別必須繼承ValidationAttribute
  • 改寫IsValid方法,成功回傳true,失敗則回傳false
    若今天我們寫來為Age加入不可超過50的判斷,要怎麼做呢?以下範例撰寫了一個CheckValidAge類別,主要驗證年齡不可超過50歲,我們也可以在建構子中寫入回傳的錯誤訊息。
public class CheckValidAge:ValidationAttribute
    {

        //ctor
        public CheckValidAge()
        {
            ErrorMessage = "年齡不可超過50歲";
        }

        public override bool IsValid(object value)
        {
            if (value==null)
            {
                return true;
            }

            int age = (int)value;
            if (age > 50)
            {
                return false;
            }
            else
            {
                return true;
            }

        }
    }

最後我們就可在Scott類別中的Age掛上[CheckValidAge]即可完成自定義驗證!

    public class Scott
    {

        [Display(Name = "號碼")]
        public int ID { get; set; }
        [Required(ErrorMessage ="名字不可為空")]
        public string Name { get; set; }
        [Display(Name = "年齡")]
        [CheckValidAge]
        public int Age { get; set; }
        [Display(Name = "地址")]
        public string Address { get; set; }
    }

參考資料
https://docs.microsoft.com/zh-tw/aspnet/core/mvc/models/validation?view=aspnetcore-3.1


上一篇
[2020鐵人賽] Day6 - 模型(Model)(1/3)
下一篇
[2020鐵人賽] Day8 - 模型(Model)(3/3)
系列文
打net core肉飯30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言