每天学习一点点,成功增加一大步

Razor标记语言和HTML,js混编

C# xiaowu 415℃

Razor

Razor 是asp.net mvc下的一种前端标记语法类似jquery 以及PHP或者java的jsp中的标记语法,但是更加优雅和方便。逻辑都是后端代码。在这里我用的是C#,对于前端小白来说是很好理解的。具体的使用方法可以百度Razor教程 会有很多的基础教育平台。这不是本文讨论的重点。Razor在前端界面中需要和HTML或js混编,如果混编的格式不对会引起前端的页面的页面渲染混乱,或者js的失效。本文将和大家讨论怎么使用混编。欢迎各位道友讨论,斧正。

1.C#与Html混编

这个是大家都比较熟悉的混编方式 也是Razor的主要用法, 可以实行用后端的C#进行传值和简单的页面逻辑判断。比较优雅的实行mvc模式下的前端代码的编写。也使对前端的编码效率有了提升。
混编代码实例

效果


可以看出 一般比较长的C#代码可以用中括号{}包含起来编写 其中添加HTMl代码是没有影响的 但是要有明确的HTML开始符和结束符。
而Html语言中插入C#代码需要加入@关键字 不然会被当成一般字符识别使用

还有for循环


当前台的C#代码有多行时,如果这些代码是连续的中间没有HTML代码隔断,那只需要开头的一个@符号即可。

当然也可以在C#中向前台打印输出一些值 这就要用到 @:

总之 @: 负责打印 @负责输出变量 也可以 @:@变量名 这样的方式打印变量


2.js与Html混编

在js中 由于没有Html那样的开始标签和结束标签 在 C#中不能直接输入js代码 这样就没办法实行混编了 这个时候就是出马了
这也是我在网上找了好几篇文章才发现的新奇知识点(原谅我这个小白) 先上代码

model为空时js的代码为

model不为空时js的代码为

若不加上 标签 js代码就会被当成 C#代码执行 不仅不能达到我们的目的还会是我们的的js或C#代码失效和报错
这点有兴趣的道友可以验证一下就不列出错误代码了。

最后!注意 Razor会先执行C#代码 所以HTML和JS是无法对C#代码赋值和判断的 只有等到C#编译生成确切的标量值后才会执行JS和Html代码

转载请注明:隨習筆記 » Razor标记语言和HTML,js混编