Razor视图中的@:和<text>语法

本文介绍了在MVC项目中如何利用Razor引擎进行HTML与C#代码的混编,包括变量声明、foreach嵌套if循环、js与C#交互等技巧,让开发者在Razor中实现更简洁的代码编写。

在MVC项目中新建视图的时候默认支持ASPX引擎和Razor引擎,如果选择ASPX引擎,那它跟webform项目中的*.aspx前台页面没区别,如果选择Razor引擎,那我们可以用更少的代码来实现相同的功能(与使用ASPX引擎相比较),我们不用在HTML中明确地标记出服务模块的结束标志,因为Razor解析器足够聪明,它可以自己推断出来。

HTML代码与C#代码混编

1、在前台声明和使用C#变量
如果想在前台声明C#变量,那声明C#变量的代码必须写在@{ }代码块中,使用@+C#变量名就能取得C#变量的值,注意前后必须有空格,否则会被当做普通字符输出。

混编代码:
在这里插入图片描述
浏览器截图:
在这里插入图片描述
2、前台利用foreach循环输出
@+C#变量名,表示获取C#变量的值;@+C#语句,表示执行C#代码。
item变量是在C#代码中声明的,所以要想调用C#变量item的值必须使用@item。

混编代码:
在这里插入图片描述
浏览器截图:
在这里插入图片描述
3、前台利用foreach嵌套if循环输出(连续)
当前台的C#代码有多行时,如果这些代码是连续的中间没有HTML代码隔断,那只需要开头的一个@符号即可。

混编代码:
在这里插入图片描述
浏览器截图:
在这里插入图片描述
4、前台利用foreach嵌套if循环输出(不连续)
当前台的C#代码有多行时,如果这些代码是不连续的,中间被HTML代码隔断,那HTML代码之后的被隔断的C#代码开头需要加上@符号。
Razor用来隐式鉴别一个代码段什么时候结束的方法是寻找代表内容块开始的标记或元素内容。例如,在上面的例子中Razor自动地把ifelse中的
<label></label>模块当作一个HTML内容块,因为它看到开始的<label>标记序列并且知道这在C#中是无效的。
然而不是所有的内容块都以标记元开始,在这种情况下Razor解析器不能隐式检测出内容块,这就需要Razor通过在代码块中使用“@:字符序列”来显式指明内容块的开始。
如果当item==”北京”时输出“item (首都)”这个字符序列,其他情况输出“item”,不能依靠简单地去掉@来实现:
在这里插入图片描述
因为C#代码不支持这种写法,代码如下:

if(item == "北京")
{
    item (首都)
}
else
{
    item
}

这时就用到@:了,如果想输出“item (首都)”,就写成“@:item (首都)”,此时@:之后的“item (首都)”被当做普通HTML代码处理。
这种写法之所以成立,是因为HTML代码支持这种写法,代码如下:

<div>
item (首都)
</div>

混编代码:
在这里插入图片描述
浏览器截图:
在这里插入图片描述
5、前台利用foreach嵌套if循环输出(不连续)
前台C#语句中声明的变量,也可以被前台调用。
如果既想输出item的值,又想输出一些普通字符串,那“@:字符序列”同样可以满足你的要求。

混编代码:
在这里插入图片描述
浏览器截图:
在这里插入图片描述
6、@:输出多行内容

在没有被外部HTML元素包装的情况下,如果需要输出多行内容时,可以使用多个“@:字符序列”来实现。

混编代码:
在这里插入图片描述
浏览器截图:
在这里插入图片描述

7、使用<text>元素显式标识内容
<text>标签是一个Razor特殊处理的元素。Razor将<text>块的内部内容视为内容块,不呈现包含那些内容的<text>标签,这使呈现没有被HTML元素包装的多行内容块更方便。当前台代码中有多个“@:字符序列”时,可用<text></text>来替换。

混编代码:
在这里插入图片描述
浏览器截图:
在这里插入图片描述

js代码与C#代码混编

1、js中嵌套C#的if结构
混编代码:
在这里插入图片描述
浏览器截图:
在这里插入图片描述
2、js中自有的if结构
当if语句的判断条件用到字符串类型的C#变量的值时,需要额外加上”“,否则C#变量的值会被当做js中的变量名,从而引发错误。
js中用到bool类型的C#变量的值时,也需要额外加上”“,否则报错:True is not definedFalse is not defined,因此推断js中用到char、DateTime等其他类型的C#变量的值时,均需要额外加上”“,先把C#变量的值变为普通字符串,然后才能进行其他操作。int、float不需要额外加上”“。

不加”“的混编代码:
在这里插入图片描述

不加”“的浏览器截图:
”“

加”“的混编代码:
在这里插入图片描述

”“的浏览器截图:
在这里插入图片描述
3、js中嵌套C#的foreach(){ if(){ } }结构
混编代码:
在这里插入图片描述
浏览器截图:
在这里插入图片描述

4、js中自有的foreach(){ if(){ } }结构
js不能识别List< string>类型的数据,可以使用json数组来代替List< string>,前台对json数组进行循环操作即可。js中要用for(var index in array){ }来做循环操作,此处的index指的是数组索引值。

后台代码如下:
在这里插入图片描述
var array=@Html.Raw(@Model.CityListJson);的作用等价于本方法中注释掉的三行代码的作用,前台代码如下:
在这里插入图片描述
浏览器截图如下:
在这里插入图片描述

<!-- Pages/Portfolio.cshtml --> @page @model PersonalBlog.Pages.PortfolioModel @{ ViewData["Title"] = "作品展示"; } <div class="container py-5"> <div class="text-center mb-5"> <h1 class="display-4 fw-bold mb-3">我的作品</h1> <p class="lead mb-4">这里展示了我参与开发的各种项目产品,包括个人项目、开源贡献商业应用</p> <div class="d-flex justify-content-center gap-2 mb-4"> <button class="btn btn-outline-primary active filter-button" data-filter="all">全部</button> @foreach (var category in Model.ProjectCategories) { <button class="btn btn-outline-primary filter-button" data-filter="@category">@category</button> } </div> @if (Context.Session.GetString("IsAdmin") == "true") { <a asp-page="/Admin/Portfolio/Create" class="btn btn-success"> <i class="fas fa-plus me-1"></i> 添加新作品 </a> } </div> <div class="row"> @foreach (var project in Model.PortfolioItems) { <div class="col-lg-4 col-md-6 mb-4" data-categories="@string.Join(' ', project.TechStack)"> <div class="card h-100"> <div class="card-img-top position-relative"> <img src="@project.ImageUrl" class="card-img-top" alt="@project.Title"> <div class="project-overlay d-flex align-items-center justify-content-center"> <a href="@project.ProjectLink" target="_blank" class="btn btn-primary btn-lg rounded-circle m-1"> <i class="fas fa-link"></i> </a> <a href="#" class="btn btn-secondary btn-lg rounded-circle m-1"> <i class="fas fa-search"></i> </a> </div> </div> <div class="card-body"> <div class="d-flex justify-content-between align-items-center mb-3"> <h5 class="card-title mb-0">@project.Title</h5> <div class="dropdown"> <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"> <i class="fas fa-cog"></i> </button> <ul class="dropdown-menu dropdown-menu-end"> <li><a class="dropdown-item" href="@project.ProjectLink" target="_blank"><i class="fas fa-external-link-alt me-2"></i>访问项目</a></li> @if (Context.Session.GetString("IsAdmin") == "true") { <li><a class="dropdown-item" href="/Admin/Portfolio/Edit?id=@project.Id"><i class="fas fa-edit me-2"></i>编辑</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item text-danger" href="/Admin/Portfolio/Delete?id=@project.Id"><i class="fas fa-trash-alt me-2"></i>删除</a></li> } </ul> </div> </div> <p class="card-text">@project.ShortDescription</p> <div class="d-flex flex-wrap gap-2 mb-3"> @foreach (var tech in project.TechStack.Take(4)) { <span class="badge bg-primary">@tech</span> } @if (project.TechStack.Count > 4) { <span class="badge bg-secondary">+@(project.TechStack.Count - 4)更多</span> } </div> </div> <div class="card-footer bg-white border-0 pt-0 pb-3"> <div class="d-flex justify-content-between align-items-center"> <small class="text-muted">@project.CreatedAt.ToString("yyyy-MM-dd")</small> <a href="#" class="btn btn-sm btn-outline-primary">查看详情</a> </div> </div> </div> </div> } </div> @if (Model.PortfolioItems.Count == 0) { <div class="text-center py-5"> <i class="fas fa-box-open fa-4x text-secondary mb-3"></i> <h4 class="mb-2">暂无作品</h4> <p class="text-muted mb-4">您还没有添加任何作品</p> @if (Context.Session.GetString("IsAdmin") == "true") { <a asp-page="/Admin/Portfolio/Create" class="btn btn-primary"> <i class="fas fa-plus me-1"></i> 添加第一个作品 </a> } else { <p>请联系管理员添加作品</p> } </div> } </div> @section Scripts { <script> $(document).ready(function() { $(".filter-button").click(function() { const value = $(this).attr('data-filter'); // 移除所有按钮的active状态 $(".filter-button").removeClass("active"); $(this).addClass("active"); if (value === "all") { $('[data-categories]').show(); } else { $('[data-categories]').each(function() { if ($(this).attr('data-categories').includes(value)) { $(this).show(); } else { $(this).hide(); } }); } }); }); </script> <style> .card { transition: transform 0.3s; } .card:hover { transform: translateY(-5px); } .project-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.3s ease; } .card:hover .project-overlay { opacity: 1; } </style> }
最新发布
06-03
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值