表单 下拉框 多选列表 单选 radio 多选 checkbox

 

 

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using System.ComponentModel.DataAnnotations;

namespace MvcMovie.Models
{
    public class Student
    {
        public Student()
        {
        }
        public int Id { get; set; }
        [Required]
        public string? Name { get; set; }
        [Display(Name = "年齢")]
        [Range(18, 100)]
        public int Age { get; set; }
        [DataType(DataType.Date)]
        public DateTime? BirthDate { get; set; }
        [Required]
        [Display(Name = "性别")]
        public Gender Gender { get; set; } = Gender.男;
        public List<SelectListItem> Cities { get; set; } = new List<SelectListItem>
        {
            new SelectListItem{Value="01",Text="北京"},
            new SelectListItem{Value="02", Text="上海"},
            new SelectListItem{Value="03",Text = "深圳"}
        };
        /// <summary>
        /// 单选列表
        /// </summary>
        public string City { get; set; }
        /// <summary>
        /// 多选列表
        /// </summary>
        public List<string> CityMultiple { get; set; } = new List<string>();
        public List<SelectListItem> InterestSource { get; set; } = new List<SelectListItem>
         {
                new SelectListItem { Text = "游泳", Value = "01" },
                new SelectListItem { Text = "爬山", Value = "02" },
                new SelectListItem { Text = "电影", Value = "03" }
         };
        //[BindProperty]
        public List<string> Interest { get; set; } 
    }
}

@model Student

<form asp-action="Update">
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <label asp-for="City" class="Control-Lable">下拉框</label>
                <select asp-for="City" asp-items="Model.Cities">
                </select>
                <span asp-validation-for="City" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="CityMultiple" class="Control-Lable">多选列表</label>
                <select class="form-control" asp-for="CityMultiple" asp-items="Model.Cities">
                </select>
                <span asp-validation-for="CityMultiple" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Gender" class="Control-Lable">单选</label>
                <div class="radio-inline">
                    @foreach (var item in Html.GetEnumSelectList<Gender>())
                    {//横向显示
                        int value = Convert.ToInt32(item.Value);
                        bool isChecked = Convert.ToInt32(Model.Gender) == value;//初始值
                        <label><input checked="@isChecked" asp-for=Gender type="radio" value="@value" />@item.Text</label>
                    }
                </div>

               @* @foreach (var item in Html.GetEnumSelectList<Gender>())
                {//纵向显示
                    <div class="radio">
                        @{
                            int value = Convert.ToInt32(item.Value);
                            bool isChecked = Convert.ToInt32(Model.Gender) == value;//初始值
                            <label><input checked="@isChecked" asp-for=Gender type="radio" value="@value" />@item.Text</label>
                        }
                    </div>
                }*@

                <span asp-validation-for="Gender" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Gender" class="Control-Lable">多选</label>
                <div class="checkbox">
                    @foreach (var item in Model.InterestSource)
                    {
                        <label><input name=Interest type="checkbox" value="@item.Value" />@item.Text</label>
                    }
                </div>
            </div>

            <button type="submit" class="btn btn-primary">  提交</button>
        </div>
    </div>
</form>

 public class BootStrapController : Controller
    {
        public IActionResult Index()
        {
            Student student = new Student();
            return View(student);
        }
        [HttpPost]
        public IActionResult Update(Student student)
        {
            return RedirectToAction("Index");
        }
    }