.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> |
運行效果
留言
張貼留言