.NET Core第18天_InputTagHelper的使用

 

InputTagHelper: 是針對原生HTML <input>的封裝



新增InputController.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
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 InputController : Controller
    {
        [HttpGet]
        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public IActionResult Index(InputViewModel model)
        {
            if (ModelState.IsValid)
            {
                string name = model.Name;
                int age = model.Age;
                bool sex = model.Sex;
                string strSex = model.Sex ? "男" : "女";

                return RedirectToAction("Response");
            }
            return View(model);
        }

        public IActionResult Response()
        {
            ViewBag.Info = "已完成提交";
            return View();
        }

    }
}



跟相應Index檢視

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
@model InputViewModel
    <form method="post">
        <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>
        <div>
            <label asp-for="Sex"></label>
            <input type="checkbox" asp-for="Sex" />
        </div>
        <div>
            <input type="submit" value="提交" />
        </div>
    </form>

和InputViewModel

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

namespace Net5App6.Models
{
    public class InputViewModel
    {
        [Display(Name = "姓名")]
        public string Name { get; set; }

        [Display(Name = "年龄")]
        public int Age { get; set; }

        [Display(Name = "性别")]
        public bool Sex { get; set; }
    }
}


運行起來效果




比較常用的input type
比方 checkbox 複選勾選框 跟 radio 單選框
這兩個在表單很常用到


這裡微調一下Index 檢視跟ViewModel

InputViewModel.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
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

namespace Net5App6.Models
{
    public class InputViewModel
    {
        [Display(Name = "姓名")]
        public string Name { get; set; }

        [Display(Name = "年龄")]
        public int Age { get; set; }

        [Display(Name = "性别")]
        public bool Sex { get; set; }
        [Display(Name = "運動嗜好")]
        public Hobby Hobby { get; set; }
    }

    public class Hobby
    {
        [Display(Name = "羽毛球")]
        public string Hobby1 { get; set; }

        [Display(Name = "桌球")]
        public string Hobby2 { get; set; }
    }
}


Index.cshtml

 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
@model InputViewModel
<form method="post">
    <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>
    <div>
        <label asp-for="Sex"></label><input type="radio" asp-for="Sex" checked="checked" value="true" /><input type="radio" asp-for="Sex" value="false" />
    </div>
    <div>
        <label asp-for="Hobby"></label>
        <span>
            <label asp-for="Hobby.Hobby1"></label>
            <input type="checkbox" asp-for="Hobby.Hobby1" />
        </span>
        <span>
            <label asp-for="Hobby.Hobby2"></label>
            <input type="checkbox" asp-for="Hobby.Hobby2" />
        </span>
    </div>
    <div>
        <input type="submit" value="提交" />
    </div>
</form>

運行效果





留言

這個網誌中的熱門文章

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

經得起原始碼資安弱點掃描的程式設計習慣培養(三)_7.Cross Site Scripting(XSS)_Stored XSS_Reflected XSS All Clients

(2021年度)駕訓學科筆試準備題庫歸納分析_法規是非題