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

@foreach (News item in @ViewBag.list) { <div> <div> <a href="/News/NewsDetail?id=@item.Id" >@item.NewsTitle</a> </div> <div> @item.PublishTime.ToShortDateString() </div> </div>

使用viewmodel

控制器中使用View的重载方法传递viewmodel

public IActionResult Index() { ViewData["title"]="好运来酒店"; return View(new NewsManager().GetNews(4)); }

视图中先声明后使用
Specify a model using the @model directive. Use the model with @Model:

@model list<News> ... @foreach (News item in @Model) { <div> <div> <a href="/News/NewsDetail?id=@item.Id" >@item.NewsTitle</a> </div> <div> @item.PublishTime.ToShortDateString() </div> </div>

修改后的首页

9.分部视图

创建分部视图
分部视图的创建和其他视图的创建没有任何区别，只是它作为其他视图的一部分来视图用。
避免视图代码的重复。

在其他视图中使用分部视图

引用分部视图使用特殊的标签 <partial />

@model List<News> <div> <div> <partial /> </div> <div> <div>您现在所在的位置:中式餐厅酒店&gt;新闻动态</div> <div> @foreach (News item in @Model) { <div> <div><a href="NewsDetail?id=@item.Id" >@item.NewsTitle</a></div> <div>@item.PublishTime.ToShortDateString()</div> </div> } </div> </div> </div>

10.使用Section布局定义

@RenderSection("js",required:false)

使用

@section js{ <script type="text/javascript"> function changeFontSize(fontSize) { //获取要变化的对象 var divContent = $(".row .m-4"); divContent.css("font-size",fontSize); } </script> }

11.表单验证

使用模型验证方式实现

添加验证特性

public partial class DishBook { public uint Id { get; set; } public string HotelName { get; set; } [Required(ErrorMessage = "{0}不能为空")] [Display(Name = "消费时间")] public DateTime? ConsumeTime { get; set; } [Required(ErrorMessage = "{0}不能为空")] [RegularExpression(@"^d+$", ErrorMessage = "请输入正确的{0}")] [Display(Name = "消费人数")] public uint? ConsumePersons { get; set; } public string RoomType { get; set; } [Required(ErrorMessage = "{0}不能为空")] [RegularExpression(@"^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])d{8}$", ErrorMessage = "请输入正确的{0}")] [Display(Name = "手机号码")] public string CustomerPhone { get; set; } [Required(ErrorMessage = "{0}不能为空")] [Display(Name = "姓名")] public string CustomerName { get; set; } [EmailAddress(ErrorMessage = "请输入正确的{0}")] [Display(Name = "电子邮件")] public string CustomerEmail { get; set; } public string Comments { get; set; } public DateTime BookTime { get; set; } public int? BookStatus { get; set; } // 扩展属性 [Required(ErrorMessage = "{0}不能为空")] [Remote(action:"CheckVcode",controller:"Dish")] [Display(Name = "验证码")] public string ValidationCode { get; set; } }

使用 Tag Helper 完成前端代码编写

@model DishBook @section js{ <partial /> <script src="http://www.jb51.net/article/~/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="http://www.jb51.net/article/~/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文件中添加区域项目路由规则

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!