基于.NET Core 3.1 网站开发和部署的方法(7)

@model DishBook @section js{ <partial /> <script src="https://www.jb51.net/~/lib/My97DatePicker/WdatePicker.js"></script> } <div> <div> <partial /> </div> <div> <div>您现在所在的位置:中式餐厅酒店&gt;在线预订</div> <form asp-controller="Dish" asp-action="Booking" method="post"> <div> <label for="HotelName">酒店名称：</label> <select> <option value="天津南开店">天津南开店</option> <option value="天津和平店">天津和平店</option> <option value="北京朝阳店">北京朝阳店</option> </select> </div> <div> <span><label asp-for="ConsumeTime"></label> ：</span> <div> <input asp-for="ConsumeTime"> <span>*</span> <span asp-validation-for="ConsumeTime"></span> </div> </div> <div> <span><label asp-for="ConsumePersons"></label>：</span> <div> <input type="text" asp-for="ConsumePersons"> <span>*</span> <span asp-validation-for="ConsumePersons"></span> </div> </div> <div> <label for="RoomType"> 选择包间类型： </label> <select> <option value="包间">包间</option> <option value="散座">散座</option> </select> </div> <div> <span>您的<label asp-for="CustomerName"></label>：</span> <div> <input asp-for="CustomerName"> <span>*</span> <span asp-validation-for="CustomerName"></span> </div> </div> <div> <span><label asp-for="CustomerPhone"></label>：</span> <div> <input asp-for="CustomerPhone"> <span>*</span> <span asp-validation-for="CustomerPhone"></span> </div> </div> <div> <span><label asp-for="CustomerEmail"></label>：</span> <div> <input asp-for="CustomerEmail"> <span asp-validation-for="CustomerEmail"></span> </div> </div> <div> <label for="Comments"> 备注事项： </label> <textarea cols="20" rows="4" placeholder="备注"></textarea> </div> <div> <span><label asp-for="ValidationCode"></label>：</span> <div> <input asp-for="ValidationCode"> <span>*</span> <span asp-validation-for="ValidationCode"></span> </div> </div> <div> <img alt="验证码图片" title="看不清？点击换一个" src='@Url.Action("ValidationCode","Dish")' /> </div> <div> <input type="submit" value="马上预定" /> </div> </form> </div> </div>

引入jQuery验证插件

这个是插件MVC项目时，模板自动生成的

@section js{ <partial /> <script src="https://www.jb51.net/~/lib/My97DatePicker/WdatePicker.js"></script> }

Tag Helper自动根据数据类型生成对应的输入框类型
可以手动设置 type 来覆盖

验证码提交到服务器验证
使用 [Remote] 特性
详细文档参考：

The jQuery Validate remote method expects a JSON response:

true means the input data is valid.

false, undefined, or null means the input is invalid. Display the default error message.

Any other string means the input is invalid. Display the string as a custom error message.

注意：The [Remote] attribute is in the Microsoft.AspNetCore.Mvc namespace.

五、使用区域项目完成后台管理系统

1.创建区域项目

建立区域项目目录结构

- Project name Areas Admin //分区项目1 Controllers Views Services //分区项目2 Controllers Views

添加路由规则

在Startup.cs文件中添加区域项目路由规则

app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "Admin", pattern: "{area:exists}/{controller=Home}/{action=Index}/{id?}" ); endpoints.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}" ); });

测试页面
如果有和主项目同名的控制器使用区域特性区分