Asp.net-wp-add-data-to-database

提供:Dev Guides
移動先:案内検索

ASP.NET WP-データベースへのデータの追加

この章では、ユーザーがデータベースのCustomersテーブルにデータを追加できるページを作成する方法について説明します。

  • この例では、レコードが挿入されるタイミングも理解できます。その後、前の章で作成したListCustomers.cshtmlページを使用して、ページに更新されたテーブルが表示されます。
  • このページでは、ユーザーが入力したデータがデータベースに対して有効であることを確認するための検証も追加します。 たとえば、ユーザーはすべての必須列にデータを入力しました。

データベースの顧客テーブルにデータを追加する方法は?

Webサイトに新しいCSHTMLファイルを追加しましょう。

テーブルのデータ

[名前]フィールドに InsertCustomer.cshtml と入力し、[OK]をクリックします。

次に、ユーザーがCustomersテーブルにデータを挿入できる新しいWebページを作成します。InsertCustomer.cshtmlファイルを次のコードに置き換えます。

@{
   Validation.RequireField("FirstName", "First Name is required.");
   Validation.RequireField("LastName", "Last Name is required.");
   Validation.RequireField("Address", "Address is required.");

   var db = Database.Open("WebPagesCustomers");
   var FirstName = Request.Form["FirstName"];
   var LastName = Request.Form["LastName"];
   var Address = Request.Form["Address"];

   if (IsPost && Validation.IsValid()) {
     //Define the insert query. The values to assign to the
     //columns in the Customers table are defined as parameters
     //with the VALUES keyword.

      if(ModelState.IsValid) {
         var insertQuery = "INSERT INTO Customers (FirstName, LastName, Address) " +
            "VALUES (@0, @1, @2)";
         db.Execute(insertQuery, FirstName, LastName, Address);

        //Display the page that lists products.
         Response.Redirect("~/ListCustomers");
      }
   }
}

<!DOCTYPE html>
<html>

   <head>
      <title>Add Customer</title>
      <style type = "text/css">
         label {
            float:left;
            width: 8em;
            text-align:
            right;
            margin-right: 0.5em;
         }
         fieldset {
            padding: 1em;
            border: 1px solid;
            width: 50em;
         }
         legend {
            padding: 2px 4px;
            border: 1px solid;
            font-weight:bold;
         }
         .validation-summary-errors {
            font-weight:bold;
            color:red;
            font-size: 11pt;
         }
      </style>

   </head>
   <body>
      <h1>Add New Customer</h1>
      @Html.ValidationSummary("Errors with your submission:")

      <form method = "post" action = "">
         <fieldset>
            <legend>Add Customer</legend>
            <div>
               <label>First Name:</label>
               <input name = "FirstName" type = "text" size = "50" value = "@FirstName"/>
            </div>

            <div>
               <label>Last Name:</label>
               <input name = "LastName" type = "text" size = "50" value = "@LastName"/>
            </div>

            <div>
               <label>Address:</label>
               <input name = "Address" type = "text" size = "50" value = "@Address"/>
            </div>

            <div>
               <label> </label>
               <input type = "submit" value = "Insert" class = "submit"/>
            </div>
         </fieldset>
      </form>

   </body>
</html>

アプリケーションを実行し、次のURLを指定してみましょう- http://localhost:36905/InsertCustomer 。次のWebページが表示されます。

顧客の挿入

上記のスクリーンショットでは、検証が追加されていることがわかります。したがって、データを入力せずに挿入ボタンをクリックするか、上記のフィールドのいずれかを見逃すと、次のスクリーンショットに示すようにエラーメッセージが表示されます。

エラーメッセージ

次に、すべてのフィールドにデータを入力しましょう。

データの入力

[挿入]をクリックすると、次のスクリーンショットに示すように、更新された顧客リストが表示されます。

更新リスト