CSHTML与JavaScript的结合使用

CSHTML（C# Server Pages）是一种在ASP.NET中使用的模板引擎，它允许开发人员在网页中嵌入C#代码。而JavaScript是一种脚本语言，常用于在网页中实现交互和动态效果。本文将介绍如何在CSHTML页面中使用JavaScript，并提供一些示例代码。

1. 在CSHTML页面中引入JavaScript

在CSHTML页面中引入JavaScript可以通过<script>标签实现。以下是一个例子：

<!DOCTYPE html>
<html>
<head>
    <title>CSHTML与JavaScript</title>
    <script src="script.js"></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

在上面的例子中，<script>标签中的src属性指定了要引入的JavaScript文件的路径。你也可以直接在<script>标签中编写JavaScript代码，如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>CSHTML与JavaScript</title>
</head>
<body>
    <script>
        // JavaScript代码
    </script>
</body>
</html>

2. 在CSHTML页面中嵌入C#代码

CSHTML页面允许在网页中嵌入C#代码。你可以使用@符号将C#代码嵌入到CSHTML文件中。以下是一个例子：

<!DOCTYPE html>
<html>
<head>
    <title>CSHTML与JavaScript</title>
    <script src="script.js"></script>
</head>
<body>
    欢迎使用CSHTML与JavaScript
    <p>
        当前时间：@DateTime.Now
    </p>
</body>
</html>

在上面的例子中，使用@符号将DateTime.Now嵌入到了<p>标签中，这样就可以在网页中显示当前时间。

3. 在JavaScript中调用C#代码

在CSHTML页面中，你可以使用<script>标签中的JavaScript代码来调用嵌入的C#代码。以下是一个例子：

<!DOCTYPE html>
<html>
<head>
    <title>CSHTML与JavaScript</title>
    <script src="script.js"></script>
</head>
<body>
    欢迎使用CSHTML与JavaScript
    <p id="demo"></p>

    <script>
        var currentTime = '@DateTime.Now';
        document.getElementById('demo').innerHTML = '当前时间：' + currentTime;
    </script>
</body>
</html>

在上面的例子中，使用@DateTime.Now将当前时间嵌入到了JavaScript代码中，并将其赋值给了currentTime变量。然后，使用document.getElementById方法获取到<p>标签的元素，并将当前时间设置为其内容。

4. 使用JavaScript进行计算

有时，我们可能需要在CSHTML页面中使用JavaScript进行一些计算。以下是一个使用JavaScript计算圆的面积的示例：

<!DOCTYPE html>
<html>
<head>
    <title>CSHTML与JavaScript</title>
    <script src="script.js"></script>
</head>
<body>
    欢迎使用CSHTML与JavaScript

    <label for="radius">请输入圆的半径：</label>
    <input type="text" id="radius">
    <button onclick="calculateArea()">计算面积</button>
    <p id="area"></p>

    <script>
        function calculateArea() {
            var radius = document.getElementById('radius').value;
            var area = Math.PI * radius * radius;
            document.getElementById('area').innerHTML = '圆的面积为：' + area;
        }
    </script>
</body>
</html>

在上面的例子中，使用<input>标签获取用户输入的圆的半径。当用户点击"计算面积"按钮时，会调用calculateArea函数。该函数从<input>标签中获取半径的值，并使用数学公式Math.PI * radius * radius计算圆的面积。最后，将计算结果显示在<p>标签中。

5. 关于计算相关的数学公式

以上示例中涉及到了计算圆的面积，这涉及到了圆的半径和数学公式。下面简要介绍一下相关的