分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

第一个MVC程序(下)

发布时间:2023-09-06 01:54责任编辑:董明明关键词:MVC

高亮验证区域

创建样式文件:wwwroot-->css文件夹右击-->添加新建项

样式文件的内容为:

.field-validation-error { ???color: #f00;}.field-validation-valid { ???display: none;}.input-validation-error { ???border: 1px solid #f00; ???background-color: #fee;}.validation-summary-errors { ???font-weight: bold; ???color: #f00;}.validation-summary-valid { ???display: none;}  

 在RsvpForm视图的头部添加对样式文件的引用:

<head> ???<meta name="viewport" content="width=device-width"/> ???<title>RsvpForm</title> ???<link href="~/css/Styles.css" rel="stylesheet" /></head> 

 对于

 <input asp-for="Phone" />
等效于
<input type="text" data-val="true" data-val-required="please enter your phone number"
id="phone" name="Phone" value="" />  

 当验证错误时,相当于添加样式如下:

<input type="text" class="input-validation-error" data-val="true" 
data-val-required="please enter your phone number" id="phone" name="Phone" value="" /> 

重新运行程序,测试数据验证效果如下:

欢迎视图添加样式

<html ><head> ???<meta name="viewport" content="width=device-width"/> ???<title>Index</title> ???<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" /></head><body> ???<div class="text-center"> ???????@ViewBag.Greeting World (from the view) ???????<h3>we are going to have an exceting party!</h3> ???????<h4>And you are invited</h4> ???????<a class="btn btn-primary" asp-action="RsvpForm">RSVP Now</a> ???</div></body></html>

效果图如下:

  

  

第一个MVC程序(下)

原文地址:https://www.cnblogs.com/imstrive/p/9038705.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved