C#的Razor语法如何在视图中嵌入代码？-C#.Net教程-PHP中文网

C#的Razor语法如何在视图中嵌入代码？

小老鼠

发布： 2025-08-14 14:39:02

原创

247人浏览过

在razor视图中使用layout页面的方法是通过在视图顶部设置layout属性，1. 使用@{ layout = "~/views/shared/_layout.cshtml"; }指定共享布局文件；2. 确保\_layout.cshtml文件包含@renderbody()以渲染视图内容；3. 可通过viewbag传递数据到layout。使用html helpers可简化html生成，1. 调用内置helper如@html.textbox、@html.actionlink；2. 创建自定义helper扩展htmlhelper类；3. 在视图中通过@html.调用自定义helper。处理javascript时，1. 可在<script>标签中嵌入脚本并用@访问c#变量；2. 推荐将js代码分离到独立文件并通过<script src>引用；3. 使用$(document).ready()确保dom加载完成后再执行脚本，从而实现动态交互功能。

C#的Razor语法如何在视图中嵌入代码？

Razor语法在C#中提供了一种在视图中嵌入代码的简洁方式，它允许开发者无缝地将C#代码与HTML标记混合，从而动态生成网页内容。

解决方案：

Razor 使用

登录后复制

符号来区分 C# 代码和 HTML。在视图中，你可以使用

登录后复制

符号后跟 C# 表达式、代码块或控制结构。

表达式： 使用
```
@
```
登录后复制
符号后跟一个 C# 表达式，Razor 会计算该表达式并将结果输出到 HTML 中。
```
当前时间： @DateTime.Now 
```
登录后复制
代码块： 使用
```
@
```
登录后复制
符号后跟一对花括号
```
{}
```
登录后复制
来定义一个 C# 代码块。可以在代码块中编写多行 C# 代码。
```
@{
 var message = "Hello, Razor!";
 var greeting = $"{message}";
}
@greeting
```
登录后复制
控制结构： Razor 支持 C# 的控制结构，例如
```
if
```
登录后复制
、
```
else
```
登录后复制
、
```
for
```
登录后复制
、
```
foreach
```
登录后复制
和
```
while
```
登录后复制
。这些控制结构允许你根据条件动态生成 HTML。
```
@if (Model.IsAdmin)
{
 欢迎管理员！
}
else
{
 欢迎普通用户！
}

<ul>
 @foreach (var item in Model.Items)
 {
 <li>@item.Name</li>
 }
</ul>
```
登录后复制

HTML 属性中的 Razor： 你也可以在 HTML 属性中使用 Razor 表达式。

<input type="text" value="@Model.Name" />
<img src="@Url.Content("~/images/" + Model.ImageName)" alt="@Model.Description" />

登录后复制

代码段（Code Blocks）和变量声明： 在 Razor 视图的顶部，你可以使用
```
@
```
登录后复制
符号和大括号来定义代码段，用于声明变量和编写辅助方法。
```
@using MyProject.Models;  // 引入命名空间

@{
    ViewBag.Title = "Product Details";
    var product = (Product)Model; // 类型转换
}
```
登录后复制
转义
```
@
```
登录后复制
符号： 如果你需要在 HTML 中显示
```
@
```
登录后复制
符号，可以使用
```
@@
```
登录后复制
。
```
Email: @@example.com
```
登录后复制

Razor 引擎负责解析 Razor 视图，并将 C# 代码编译成动态生成的 HTML。这使得开发者可以轻松地创建动态和交互式的 Web 应用程序。

Razor 语法的优势在于其简洁性和易读性。它减少了在视图中编写大量 C# 代码的需要，并使代码更易于维护。

Razor 语法虽然强大，但过度使用可能会导致视图逻辑过于复杂。应该尽量保持视图的简洁，并将复杂的逻辑放在控制器或服务层中。

Razor 语法错误可能导致编译时或运行时错误。应该仔细检查 Razor 代码，并使用调试工具来查找和修复错误。

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

查看详情

Razor 语法是ASP.NET Core MVC和ASP.NET MVC中视图的核心。

如何在Razor视图中使用Layout页面？

Layout 页面定义了网站的通用布局，例如页眉、页脚和导航菜单。在 Razor 视图中，可以使用

登录后复制

符号和

Layout

登录后复制

属性来指定要使用的 Layout 页面。

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Home Page";
}

<h1>Welcome to my website!</h1>
<p>This is the content of the home page.</p>

登录后复制

_Layout.cshtml

登录后复制

文件通常位于

Views/Shared

登录后复制

目录下。它包含网站的通用 HTML 结构，以及用于呈现视图内容的

@RenderBody()

登录后复制

方法。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link rel="stylesheet" href="~/Content/bootstrap.css" />
    <link rel="stylesheet" href="~/Content/site.css" />
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                </button>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="~/Scripts/jquery-3.6.0.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
</body>
</html>

登录后复制

如何在Razor视图中使用HTML Helpers？

HTML Helpers 是用于在 Razor 视图中生成 HTML 标记的 C# 方法。它们可以简化 HTML 生成过程，并提高代码的可读性和可维护性。ASP.NET MVC 提供了许多内置的 HTML Helpers，例如

Html.TextBox

登录后复制

、

Html.DropDownList

登录后复制

和

Html.ActionLink

登录后复制

。

@Html.TextBox("FirstName", Model.FirstName)
@Html.DropDownList("Country", new SelectList(Model.Countries, "Id", "Name"))
@Html.ActionLink("Click Here", "Details", "Products", new { id = Model.ProductId }, null)

登录后复制

你也可以创建自定义的 HTML Helpers 来满足特定的需求。

public static class MyHtmlHelpers
{
    public static IHtmlString Image(this HtmlHelper helper, string src, string alt)
    {
        var img = new TagBuilder("img");
        img.Attributes.Add("src", src);
        img.Attributes.Add("alt", alt);
        return new HtmlString(img.ToString());
    }
}

登录后复制

然后在视图中使用：

@Html.Image("~/images/myimage.jpg", "My Image")

登录后复制

如何在Razor视图中处理JavaScript？

在 Razor 视图中，你可以使用

<script>

登录后复制

标签来嵌入 JavaScript 代码。你也可以使用

登录后复制

符号来将 C# 变量传递给 JavaScript 代码。

<script>
    var message = "@Model.Message";
    alert(message);
</script>

登录后复制

或者，将 JavaScript 代码放在单独的

.js

登录后复制

文件中，然后在 Razor 视图中引用该文件。这可以提高代码的可读性和可维护性。

<script src="~/Scripts/myscript.js"></script>

登录后复制

同时使用

$(document).ready()

登录后复制

确保在 DOM 加载完成后执行 JavaScript 代码。

$(document).ready(function() {
  // Your code here
});

登录后复制

以上就是C#的Razor语法如何在视图中嵌入代码？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

C# 如何从xml中反序列化出字典(Dictionary) 如何使用C#执行存储过程？需要哪些参数？ C# 如何将字典(Dictionary)序列化为xml C#中如何使用数据库的本地事务？示例代码是什么？ C# 如何在xml反序列化时指定默认值