ASP.NET WP教程

ASP.NET WP - 编程概念

在本章中，我们将使用Razor语法介绍ASP.NET网页的编程概念. ASP.NET是Microsoft在Web服务器上运行动态网页的技术.

本章的主要目的是制作您将熟悉将用于ASP.NET网页的编程语法.
您还将了解用C＃编写的Razor语法和代码编程语言.
我们在前面的章节中已经看到了这种语法，但在本章中，我们将详细解释语法.

什么是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语法

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 ，您将看到以下输出.

输入两个数字