Razor编程中@Html的方法使用大全

news2025/6/12 4:20:34

在这里插入图片描述

文章目录

    • 1. 基础HTML辅助方法
      • 1.1 Html.ActionLink()
      • 1.2 Html.RouteLink()
      • 1.3 Html.Display() / Html.DisplayFor()
      • 1.4 Html.Editor() / Html.EditorFor()
      • 1.5 Html.Label() / Html.LabelFor()
      • 1.6 Html.TextBox() / Html.TextBoxFor()
    • 2. 表单相关辅助方法
      • 2.1 Html.BeginForm() / Html.BeginRouteForm()
      • 2.2 Html.AntiForgeryToken()
      • 2.3 Html.ValidationMessage() / Html.ValidationMessageFor()
      • 2.4 Html.ValidationSummary()
      • 2.5 Html.DropDownList() / Html.DropDownListFor()
      • 2.6 Html.ListBox() / Html.ListBoxFor()
      • 2.7 Html.CheckBox() / Html.CheckBoxFor()
      • 2.8 Html.RadioButton() / Html.RadioButtonFor()
      • 2.9 Html.Password() / Html.PasswordFor()
      • 2.10 Html.Hidden() / Html.HiddenFor()
      • 2.11 Html.TextArea() / Html.TextAreaFor()
    • 3. 模型绑定相关方法
      • 3.1 Html.DisplayName() / Html.DisplayNameFor()
      • 3.2 Html.DisplayText() / Html.DisplayTextFor()
      • 3.3 Html.Value() / Html.ValueFor()
      • 3.4 Html.Name() / Html.NameFor()
      • 3.5 Html.Id() / Html.IdFor()
    • 4. 部分视图和布局方法
      • 4.1 Html.Partial()
      • 4.2 Html.RenderPartial()
      • 4.3 Html.Action()
      • 4.4 Html.RenderAction()
    • 5. 其他实用方法
      • 5.1 Html.Raw()
      • 5.2 Html.Encode()
      • 5.3 Html.AttributeEncode()
      • 5.4 Html.FormatValue()
      • 5.5 Html.EnableClientValidation() / Html.EnableUnobtrusiveJavaScript()
    • 6. 自定义HTML辅助方法
      • 6.1 创建扩展方法
      • 6.2 在视图中使用
    • 7. 高级用法
      • 7.1 模板辅助方法
      • 7.2 使用模板
      • 7.3 条件渲染
    • 总结

在这里插入图片描述

在ASP.NET MVC和Razor Pages中,@Html对象提供了许多有用的HTML辅助方法,用于生成HTML元素、表单控件、链接等。这些方法可以帮助开发者更高效地创建视图,并与模型绑定。以下是@Html常用方法的详细说明和代码示例。

1. 基础HTML辅助方法

1.1 Html.ActionLink()

生成一个超链接(<a>标签),指向指定的控制器动作。

@Html.ActionLink("链接文本", "ActionName", "ControllerName", new { id = 1 }, new { @class = "btn" })

参数说明:

  • 第一个参数:链接显示的文本
  • 第二个参数:动作方法名
  • 第三个参数:控制器名
  • 第四个参数:路由值对象
  • 第五个参数:HTML属性对象

1.2 Html.RouteLink()

基于路由名称生成超链接。

@Html.RouteLink("我的账户", "UserProfile", new { username = "john" })

1.3 Html.Display() / Html.DisplayFor()

显示模型属性的值,会自动选择合适的显示模板。

@Html.DisplayFor(model => model.Name)
@Html.Display("Name")

1.4 Html.Editor() / Html.EditorFor()

为模型属性生成编辑控件。

@Html.EditorFor(model => model.Email)
@Html.Editor("Email")

1.5 Html.Label() / Html.LabelFor()

生成<label>标签。

@Html.LabelFor(model => model.Name)
@Html.Label("Name", "用户名")

1.6 Html.TextBox() / Html.TextBoxFor()

生成文本输入框。

@Html.TextBoxFor(model => model.Name)
@Html.TextBox("Name", Model.Name, new { @class = "form-control" })

2. 表单相关辅助方法

2.1 Html.BeginForm() / Html.BeginRouteForm()

生成<form>标签。

@using (Html.BeginForm("Create", "Product", FormMethod.Post))
{
    <!-- 表单内容 -->
}

@using (Html.BeginRouteForm("Default", new { controller = "Account", action = "Login" }))
{
    <!-- 表单内容 -->
}

2.2 Html.AntiForgeryToken()

生成防伪令牌,用于防止CSRF攻击。

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <!-- 表单内容 -->
}

2.3 Html.ValidationMessage() / Html.ValidationMessageFor()

显示模型属性的验证错误信息。

@Html.TextBoxFor(model => model.Email)
@Html.ValidationMessageFor(model => model.Email)

2.4 Html.ValidationSummary()

显示所有验证错误的摘要。

@Html.ValidationSummary()
@Html.ValidationSummary(true) <!-- 只显示模型级错误 -->

2.5 Html.DropDownList() / Html.DropDownListFor()

生成下拉列表。

@Html.DropDownListFor(model => model.Country, 
    new SelectList(ViewBag.Countries, "Value", "Text"), 
    "选择国家",
    new { @class = "form-control" })

2.6 Html.ListBox() / Html.ListBoxFor()

生成多选列表框。

@Html.ListBoxFor(model => model.SelectedSkills, 
    new MultiSelectList(Model.AllSkills, "Id", "Name"))

2.7 Html.CheckBox() / Html.CheckBoxFor()

生成复选框。

@Html.CheckBoxFor(model => model.IsActive)
@Html.CheckBox("IsActive", Model.IsActive)

2.8 Html.RadioButton() / Html.RadioButtonFor()

生成单选按钮。

@Html.RadioButtonFor(model => model.Gender, "Male") 男
@Html.RadioButtonFor(model => model.Gender, "Female") 女

2.9 Html.Password() / Html.PasswordFor()

生成密码输入框。

@Html.PasswordFor(model => model.Password)
@Html.Password("Password", "", new { @class = "form-control" })

2.10 Html.Hidden() / Html.HiddenFor()

生成隐藏字段。

@Html.HiddenFor(model => model.Id)
@Html.Hidden("Id", Model.Id)

2.11 Html.TextArea() / Html.TextAreaFor()

生成多行文本框。

@Html.TextAreaFor(model => model.Description, 5, 20, null)
@Html.TextArea("Description", Model.Description, 5, 20, new { @class = "form-control" })

3. 模型绑定相关方法

3.1 Html.DisplayName() / Html.DisplayNameFor()

显示属性的显示名称(考虑[Display]特性)。

@Html.DisplayNameFor(model => model.Name)

3.2 Html.DisplayText() / Html.DisplayTextFor()

显示属性的文本值。

@Html.DisplayTextFor(model => model.Name)

3.3 Html.Value() / Html.ValueFor()

获取属性的格式化值。

@Html.ValueFor(model => model.Price)

3.4 Html.Name() / Html.NameFor()

获取属性的名称(用于name属性)。

<input type="text" name="@Html.NameFor(model => model.Name)" />

3.5 Html.Id() / Html.IdFor()

获取属性的ID(用于id属性)。

<label for="@Html.IdFor(model => model.Name)">用户名</label>

4. 部分视图和布局方法

4.1 Html.Partial()

渲染部分视图。

@Html.Partial("_LoginPartial")
@Html.Partial("_Address", Model.Address)

4.2 Html.RenderPartial()

与Partial()类似,但直接写入响应流,性能更好。

@{ Html.RenderPartial("_Header"); }

4.3 Html.Action()

调用子动作并渲染结果。

@Html.Action("LatestNews", "News")

4.4 Html.RenderAction()

与Action()类似,但直接写入响应流。

@{ Html.RenderAction("Menu", "Navigation"); }

5. 其他实用方法

5.1 Html.Raw()

输出原始HTML,不进行HTML编码。

@Html.Raw("<strong>加粗文本</strong>")

5.2 Html.Encode()

对字符串进行HTML编码。

@Html.Encode("<script>alert('xss')</script>")

5.3 Html.AttributeEncode()

对属性值进行编码。

<div title="@Html.AttributeEncode(Model.Tooltip)"></div>

5.4 Html.FormatValue()

格式化值。

@Html.FormatValue(Model.Price, "{0:C}")

5.5 Html.EnableClientValidation() / Html.EnableUnobtrusiveJavaScript()

启用客户端验证和不显眼的JavaScript。

@{
    Html.EnableClientValidation();
    Html.EnableUnobtrusiveJavaScript();
}

6. 自定义HTML辅助方法

你可以创建自己的HTML辅助方法扩展。

6.1 创建扩展方法

public static class HtmlHelperExtensions
{
    public static MvcHtmlString SubmitButton(this HtmlHelper htmlHelper, string buttonText)
    {
        var builder = new TagBuilder("input");
        builder.MergeAttribute("type", "submit");
        builder.MergeAttribute("value", buttonText);
        builder.AddCssClass("btn btn-primary");
        return MvcHtmlString.Create(builder.ToString());
    }
}

6.2 在视图中使用

@Html.SubmitButton("提交表单")

7. 高级用法

7.1 模板辅助方法

@Html.DisplayForModel()  <!-- 显示整个模型 -->
@Html.EditorForModel()   <!-- 编辑整个模型 -->

7.2 使用模板

@Html.DisplayFor(model => model, "CustomTemplate")

7.3 条件渲染

@if (Html.HasRazorSyntax())
{
    <p>当前是Razor视图</p>
}

总结

@Html辅助方法提供了强大的功能来生成HTML元素并与模型交互。合理使用这些方法可以:

  1. 提高开发效率
  2. 增强代码可维护性
  3. 实现强类型绑定
  4. 自动处理验证和格式化
  5. 保持一致的UI风格

在实际开发中,推荐优先使用强类型的For方法(如TextBoxForLabelFor等),因为它们提供了编译时检查,减少了运行时错误的可能性。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2407172.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…

宇树科技,改名了!

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…

uniapp 开发ios, xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…

【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…

代码规范和架构【立芯理论一】(2025.06.08)

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…

解读《网络安全法》最新修订,把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…

计算机基础知识解析:从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…

FFmpeg:Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…