在本章中,我们将使用Razor语法介绍ASP.NET网页的编程概念. ASP.NET是Microsoft在Web服务器上运行动态网页的技术.
本章的主要目的是制作您将熟悉将用于ASP.NET网页的编程语法.
您还将了解用C#编写的Razor语法和代码编程语言.
我们在前面的章节中已经看到了这种语法,但在本章中,我们将详细解释语法.
Razor语法是一种ASP.NET编程语法,用于创建动态网页C#或Visual Basic .NET编程语言.这个Razor语法自2010年6月开始开发,并于2011年1月发布用于Microsoft Visual Studio 2010.
Razor是一个用于将基于服务器的代码添加到网页的标记语法.
Razor具有传统ASP.NET标记的强大功能,但更容易学习,更容易使用.
Razor是一种服务器端标记语法,与ASP和PHP非常相似.
Razor支持C#和Visual Basic编程语言.
Razor语法基于ASP.NET,旨在创建Web应用程序.它具有传统ASP.NET标记的强大功能,但更易于使用,更易于学习.
Razor代码块包含在@ {...}
内联表达式(变量和函数)以@
开头
代码语句以分号结尾(;)
使用var关键字声明变量
字符串用引号括起来
C#代码区分大小写
C#文件的扩展名为.cshtml
让我们看一下以下示例 :
<!-- Single statement blocks --> @{ var total = 7; } @{ var myMessage = "Hello World"; } <!-- Inline expressions --> <p>The value of your account is: @total </p> <p>The value of myMessage is: @myMessage</p> <!-- Multi-statement block --> @{ var greeting = "Welcome to our site!"; var weekDay = DateTime.Now.DayOfWeek; var greetingMessage = greeting + " Today is: " + weekDay; } <p>The greeting is: @greetingMessage</p> <!DOCTYPE html> <html lang = "en"> <head> <meta charset = "utf-8" /> <title>Welcome to ASP.NET Web Pages Tutorials</title> </head> <body> <h1>Hello World, ASP.NET Web Page</h1> <p>Hello World!</p> </body> </html>
正如您在上面的示例中所看到的,在代码块中,每个完整的代码语句必须以分号结尾.内联表达式不以分号结尾.
让我们运行您的应用程序并在浏览器中指定以下url http://localhost:46023/firstpage 将看到以下输出.
您可以将值存储在变量中,包括字符串,数字和日期等.您可以使用var关键字创建新变量.您可以使用@直接在页面中插入变量值.让我们看看另一个简单的例子,我们将数据存储在另一个变量中.
<!-- Storing a string --> @{ var welcomeMessage = "Welcome to ASP.NET Web Pages!"; } <p>@welcomeMessage</p> <!-- Storing a date --> @{ var year = DateTime.Now.Year; } <!-- Displaying a variable --> <p>Current year is : @year!</p>
让我们运行你的应用程序并在浏览器中指定以下url http://localhost:46023/firstpage ,你会看到以下输出.
动态网页的一个关键功能是您可以根据条件确定要执行的操作.最常见的方法是使用 If和Else语句.让我们看看下面程序中显示的决策制作代码.
@{ var result = ""; if(IsPost){ result = "This page was posted using the Submit button."; } else{ result = "This was the first request for this page."; } } <!DOCTYPE html> <html> <head> <title></title> </head> <body> <form method = "POST" action = "" > <input type = "Submit" name = "Submit" value = "Submit"/> <p>@result</p> </form> </body> </html>
让我们运行你的应用程序并指定以下url : 在浏览器中 http://localhost:46023/firstpage ,您将看到以下输出.
现在让我们点击提交,您将看到它还会更新消息,如以下屏幕截图所示.
让我们看看另一个我们必须创建的例子简单添加功能,允许用户输入两个数字,然后添加它们并显示结果.
@{ var total = 0; var totalMessage = ""; if (IsPost){ // Retrieve the numbers that the user entered. var num1 = Request["text1"]; var num2 = Request["text2"]; // Convert the entered strings into integers numbers and add. total = num1.AsInt() + num2.AsInt(); totalMessage = "Total = " + total; } } <!DOCTYPE html> <html lang = "en"> <head> <title>My Title</title> <meta charset = "utf-8" /> <style type = "text/css"> body { background-color: #d6c4c4; font-family: Verdana, Arial; margin: 50px; } form { padding: 10px; border-style: dashed; width: 250px; } </style> </head> <body> <p>Enter two whole numbers and then click <strong>Add</strong>.</p> <form action = "" method = "post"> <p> <label for = "text1">First Number:</label> <input type = "text" name = "text1" /> </p> <p> <label for = "text2">Second Number:</label> <input type = "text" name = "text2" /> </p> <p><input type = "submit" value = "Add" /></p> </form> <p>@totalMessage</p> </body> </html>
让我们运行应用程序并指定以下url : 在浏览器中 http://localhost:46023/firstpage ,您将看到以下输出.
现在在提到的字段中输入两个数字,如下面的屏幕截图所示.
单击添加,您将看到这两个数字的总和,如下面的屏幕截图所示.