如何从 C# 应用程序的 cshtml 视图向 JavaScript 传递值？

从 C# 应用程序的 cshtml 视图向 JavaScript 传递值

简介

在 ASP.NET MVC 应用程序中，使用 cshtml 视图渲染用户界面。JavaScript 模块可以与这些视图交互，执行各种操作。为了使 JavaScript 访问 cshtml 视图生成的数据，有几种方法可以将值从 C# 应用程序传递到 JavaScript。

方法

1. 使用 ViewData**

ViewData 是一个键值对集合，可在控制器操作中填充，然后在 cshtml 视图中访问。在 JavaScript 中，可以使用 data-* 属性访问 ViewData 值。

示例

home.cshtml

<p id="timer" data-end-date="@ViewData["endDate"]"></p>

JavaScript

// 获取 id 为 "timer" 的元素
const timerElement = document.getElementById("timer");

// 从 data-end-date 属性中获取 endDate 值
const endDate = timerElement.getAttribute("data-end-date");

2. 使用 ViewBag**

ViewBag 是一个动态对象，在控制器操作中初始化，然后在 cshtml 视图中访问。与 ViewData 类似，JavaScript 可以通过 data-* 属性访问 ViewBag 值。

示例

home.cshtml

<p id="timer" data-end-date="@ViewBag.EndDate"></p>

JavaScript

// 获取 id 为 "timer" 的元素
const timerElement = document.getElementById("timer");

// 从 data-end-date 属性中获取 endDate 值
const endDate = timerElement.getAttribute("data-end-date");

技巧

• 将日期序列化为 ISO 字符串： 如果将日期值传递给 JavaScript，请使用 ToString("o") 方法将其序列化为 ISO 字符串。
• 使用反斜杠转义字符： 如果值包含特殊字符，请使用反斜杠 (\) 转义它们以避免 JavaScript 解析错误。
• 验证值： 在 JavaScript 中处理值之前，请验证它们是否为预期类型和格式。
• 使用 JSON.stringify()： 如果要将复杂对象传递给 JavaScript，请使用 JSON.stringify() 方法将其转换为 JSON 字符串。

结论

使用 ViewData 或 ViewBag 是在 C# 应用程序中将值从 cshtml 视图传递到 JavaScript 的常用方法。通过了解这些方法，您可以创建更具动态性和交互性的 Web 应用程序。

常见问题解答

1. 什么是 ViewData 和 ViewBag？

   ViewData 和 ViewBag 都是用于在控制器操作和 cshtml 视图之间传递数据的对象。

2. 如何使用 data- 属性访问 JavaScript 中的值？*

   通过 getAttribute("data-property-name") 方法可以访问 data-* 属性中的值。

3. 如何将日期值传递给 JavaScript？

   使用 ToString("o") 方法将日期值序列化为 ISO 字符串。

4. 如何验证 JavaScript 中的值？

   使用 typeof() 操作符或正则表达式验证值的类型和格式。

5. 如何将复杂对象传递给 JavaScript？

   使用 JSON.stringify() 方法将复杂对象转换为 JSON 字符串。