ASP.NET WP-プログラミングの概念

この章では、Razor構文を使用したASP.NET Webページでのプログラミングの概念について説明します。 ASP.NETは、Webサーバーで動的なWebページを実行するためのMicrosoftのテクノロジーです。

この章の主な目的は、ASP.NET Webページに使用するプログラミング構文に慣れることです。
また、C＃プログラミング言語で記述されたRazorの構文とコードについても学習します。
この構文は前の章ですでに見てきましたが、この章では、構文について詳しく説明します。

カミソリとは

Razor構文は、C＃またはVisual Basic .NETプログラミング言語で動的なWebページを作成するために使用されるASP.NETプログラミング構文です。このRazor Syntaxは2010年6月から開発中であり、2011年1月にMicrosoft Visual Studio 2010用にリリースされました。

Razorは、サーバーベースのコードをWebページに追加するためのマークアップ構文です。
Razorには従来のASP.NETマークアップの機能がありますが、習得が簡単で使いやすいです。
Razorは、ASPやPHPによく似たサーバー側のマークアップ構文です。
Razorは、C＃およびVisual Basicプログラミング言語をサポートしています。

基本的なカミソリの構文

Razor構文はASP.NETに基づいており、Webアプリケーションを作成するために設計されています。従来のASP.NETマークアップの機能を備えていますが、使いやすく、学習も簡単です。

かみそりのコードブロックは@ \ {…}で囲まれています
@で始まるインライン式（変数と関数）
コード文はセミコロン（;）で終わります
変数は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 *を指定すると、次の出力が表示されます。

基本的なRazor構文

データを保存する変数

文字列、数値、日付などを含む変数に値を保存できます。 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 を指定すると、次の出力が表示されます。

変数ストアデータ

意思決定

動的Webページの重要な機能は、条件に基づいて何をするかを決定できることです。これを行う最も一般的な方法は、* 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 を指定すると、次の出力が表示されます。

意思決定

[送信]をクリックすると、次のスクリーンショットに示すように、メッセージも更新されることがわかります。

更新メッセージ

ユーザーが2つの数字を入力できるようにする*シンプルな追加機能*を作成し、それらを追加して結果を表示する別の例を見てみましょう。

@{
   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 を指定すると、次の出力が表示されます。

2つの数字を入力

次のスクリーンショットに示すように、上記のフィールドに2つの数字を入力します。

スクリーンショット

[追加]をクリックすると、次のスクリーンショットに示すように、これら2つの数値の合計が表示されます。

Sum Two Numbers

Asp.net-wp-programming-concepts

ASP.NET WP-プログラミングの概念

カミソリとは

基本的なカミソリの構文

データを保存する変数

意思決定

目次