169 Create View 02

填写数据后，点击Create显示如下：

因此我们需要在新建一个HttpPost的Create方法

PersonController.cs

using Microsoft.AspNetCore.Mvc;
using ServiceContracts;
using ServiceContracts.DTO;
using ServiceContracts.Enums;

namespace CRUDExample.Controllers
{
    public class PersonController : Controller
    {
        //private fields
        private readonly IPersonsService _personsService;
        private readonly ICountriesService _countriesService;

        //constructor
        public PersonController(IPersonsService personsService, ICountriesService countriesService)
        {
            _personsService = personsService;
            _countriesService = countriesService;
        }

        [Route("persons/index")]
        [Route("/")]
        public IActionResult Index(string searchBy, string? searchString,
            string sortBy = nameof(PersonResponse.PersonName), 
            SortOrderOptions sortOrder = SortOrderOptions.ASC)
        { 
            //Search
            ViewBag.SearchFields = new Dictionary<string, string>()
            {
                { nameof(PersonResponse.PersonName),"Person Name" },
                { nameof(PersonResponse.Email),"Email" },
                { nameof(PersonResponse.DateOfBirth),"Date of Birth" },
                { nameof(PersonResponse.Gender),"Gender" },
                { nameof(PersonResponse.CountryId),"Country" },
                { nameof(PersonResponse.Address),"Address" },
                { nameof(PersonResponse.ReceiveNewsLetters),"Receive News Letters" },
            };
            //List<PersonResponse> persons = _personsService.GetAllPersons();
            List<PersonResponse> persons = _personsService.GetFilteredPersons(searchBy, searchString);
            ViewBag.CurrentSearchBy = searchBy;
            ViewBag.CurrentSearchString = searchString;

            //Sort
            List<PersonResponse> personsSorted = _personsService.GetSortedPersons(persons, sortBy, sortOrder);
            ViewBag.CurrentSortBy = sortBy;
            ViewBag.CurrentSortOrder = sortOrder.ToString();
            return View(personsSorted);
            
            //return View(persons);
        }

        //处理Get请求，显示Create页面
        //Executes when the user clicks on "Create Person" hyperlink (while opening the create view)
        [Route("persons/create")]
        [HttpGet]
        public IActionResult Create()
        {
            List<CountryResponse> countries = _countriesService.GetAllCountries();
            ViewBag.Countries = countries;
            return View();
        }

        //处理Post请求
        [Route("persons/create")]
        [HttpPost]
        public IActionResult Create(PersonAddRequest personAddRequest)
        {
            if (!ModelState.IsValid)
            {
                List<CountryResponse> countries = _countriesService.GetAllCountries();
                ViewBag.Countries = countries;
                ViewBag.Errors = ModelState.Values.SelectMany(v => v.Errors).Select(msg => msg.ErrorMessage);
                return View();
            }

            //call the service method
            PersonResponse personResponse = _personsService.AddPerson(personAddRequest);

            //navigate to Index() action method (it makes another get request to "persons/index")
            return RedirectToAction("Index", "Person");
        }
    }
}

Create.cshtml中Create按钮下方添加Validation错误提示

@{
    ViewBag.Title = "Create Person";
}

<a href="~/persons/index" class="link-hover">Back to Persons List</a>

<h2>Create Person</h2>

<div class="w-50">
    <form action="~/persons/create" method="post">
        @*PersonName*@
        <div class="form-field flex">
            <div class="w-25">
                <label for="PersonName" class="form-label pt">Person Name</label>
            </div>
            <div class="flex-1">
                <input type="text" id="PersonName" name="PersonName" class="form-input" />
            </div>
        </div>
        @*Email*@
        <div class="form-field flex">
            <div class="w-25">
                <label for="Email" class="form-label pt">Email</label>
            </div>
            <div class="flex-1">
                <input type="email" id="Email" name="Email" class="form-input" />
            </div>
        </div>
        @*DateOfBirth*@
        <div class="form-field flex">
            <div class="w-25">
                <label for="DateOfBirth" class="form-label pt">Date Of Birth</label>
            </div>
            <div class="flex-1">
                <input type="date" id="DateOfBirth" name="DateOfBirth" class="form-input" />
            </div>
        </div>
        @*Gender*@
        <div class="form-field flex">
            <div class="w-25">
                <label for="Gender" class="form-label pt">Gender</label>
            </div>
            <div class="flex-1">
                <input type="radio" id="Male" name="Gender" value="Male" class="ml"/>
                <label for="Male">Male</label>
                <input type="radio" id="Female" name="Gender" value="Female" class="ml"/>
                <label for="Female">Female</label>
                <input type="radio" id="Other" name="Gender" value="Other" class="ml"/>
                <label for="Other">Other</label>
            </div>
        </div>
        @*Country*@
        <div class="form-field flex">
            <div class="w-25">
                <label for="CountryId" class="form-label pt">Country</label>
            </div>
            <div class="flex-1">
                <select name="CountryId" id="CountryId" class="form-input">
                    <option value="">Please Select</option>
                    @foreach (CountryResponse country in ViewBag.Countries)
                    {
                        <option value="@country.CountryId">@country.CountryName</option>
                    }
                </select>
            </div>
        </div>
        @*Address*@
        <div class="form-field flex">
            <div class="w-25">
                <label for="Address" class="form-label pt">Address</label>
            </div>
            <div class="flex-1">
                <textarea id="Address" name="Address" class="form-input"></textarea>
            </div>
        </div>
        @*ReceiveNewsLetters*@
        <div class="form-field flex">
            <div class="w-25">
                
            </div>
            <div class="flex-1">
                <input type="checkbox" id="ReceiveNewsLetters" name="ReceiveNewsLetters" value="true" />
                <label for="ReceiveNewsLetters" class="form-label">ReceiveNewsLetters</label>
            </div>
        </div>
        @*SubmitButton*@
        <div class="form-field flex">
            <div class="w-25">
            </div>
            <div class="flex-1">
                <button class="button button-green-back">Create</button>
                @if (ViewBag.Errors != null)
                {
                    <div class="text-red ml">
                        <ul>
                            @foreach (string error in ViewBag.Errors)
                            {
                                <li class="ml">@error</li>
                            }
                        </ul>
                    </div>
                }
            </div>
        </div>
        
        
    </form>
</div>

运行程序后，可以Create Person，如果提交的不符合验证，在Create按钮下方显示错误信息

Gitee获取源码：

https://gitee.com/huang_jianhua0101/asp.-net-core-8.git