Asp.net-wp-edit-database-data

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

ASP.NET WP-データベースデータの編集

この章では、ユーザーがデータベースの既存のデータを編集できるWebページを作成する方法について説明します。

  • この手順では、以前にデータ挿入用に作成したページに似た2つのページを作成します。
  • 最初のページには顧客リストが表示され、ユーザーは変更する顧客リストを選択できます。
  • 2番目のページでは、ユーザーが実際に編集して保存できます。

データベースの既存のデータを編集する方法は?

プロジェクトで新しいCSHTMLファイルを作成しましょう。

新しいCHSTMLファイル

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

EditCustomers.cshtmlファイルを次のコードに置き換えます。

@{
   var db = Database.Open("WebPagesCustomers");
   var selectQueryString = "SELECT * FROM Customers ORDER BY FirstName";
}

<!DOCTYPE html>
<html>
   <head>
      <title>Customers List</title>
      <style>
         table, th, td {
            border: solid 1px #bbbbbb;
            border-collapse: collapse;
            padding: 2px;
         }
      </style>

   </head>
   <body>
      <h1>Customers List</h1>
      <table>
         <thead>
            <tr>
               <th> </th>
               <th>First Name</th>
               <th>Last Name</th>
               <th>Address</th>
            </tr>
         </thead>

         <tbody>
            @foreach(var row in db.Query(selectQueryString)){
               <tr>
                  <td><a href = "@Href("~/UpdateCustomers", row.Id)">Edit</a></td>
                  <td>@row.FirstName</td>
                  <td>@row.LastName</td>
                  <td>@row.Address</td>
               </tr>
            }
         </tbody>
      </table>

   </body>
</html>
*EditCustomers.cshtml* ページと *ListCustomers.cshtml* ページの唯一の違いは、編集リンクを表示する追加の列が含まれていることです。

その編集リンクをクリックすると、まだ作成されていない UpdateCustomer.cshtml ページに移動します。 そのため、UpdateCustomer.cshtmlファイルを作成し、次のコードに置き換える必要があります。

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

   var FirstName = "";
   var LastName = "";
   var Address = "";
   var CustomerId = UrlData[0];

   if (CustomerId.IsEmpty()) {
      Response.Redirect("~/EditCustomers");
   }
   var db = Database.Open("WebPagesCustomers");

   if (IsPost && Validation.IsValid()) {
      var updateQueryString = "UPDATE Customers SET FirstName = @0, LastName = @1,
         Address = @2 WHERE Id = @3" ;
      FirstName = Request["FirstName"];
      LastName = Request["LastName"];
      Address = Request["Address"];
      db.Execute(updateQueryString, FirstName, LastName, Address, CustomerId);

     //Display the page that lists products.
      Response.Redirect(@Href("~/EditCustomers"));
   } else {
      var selectQueryString = "SELECT * FROM Customers WHERE ID = @0";
      var row = db.QuerySingle(selectQueryString, CustomerId);
      FirstName = row.FirstName;
      LastName = row.LastName;
      Address = row.Address;
   }
}

<!DOCTYPE html>
<html>
   <head>
      <title>Update 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>Update Customer</h1>
      @Html.ValidationSummary("Errors with your submission:")

      <form method = "post" action = "">
         <fieldset>
            <legend>Update 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 = "Save" class = "submit"/>
            </div>

         </fieldset>
      </form>

   </body>
</html>

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

ListCustomers

ご覧のとおり、これは ListCustomer と同じWebページですが、各レコードに追加の編集リンクがあります。 次に、顧客の[編集]リンクをクリックします。最初の顧客を発言すると、次のページが表示されます。

顧客の更新

名をアランからスティーブに変更して、[保存]をクリックします。

次のページに、更新された名が表示されます。これは、名に基づいてリストをソートしたため、最後になりました。

リストの並べ替え