ASP.NET WP - Add Data to Database

In this chapter, we will be covering how to create a page that lets users add data to the Customers table in the database.

  • In this example, you will also understand when the record is inserted, then the page displays the updated table using the ListCustomers.cshtml page that we have created in the previous chapter.

  • In this page, we also add validation to make sure that the data which the user enters is valid for the database. For example, user has entered data for all the required columns.

How to add Data to the Customer Table in the Database?

Let’s add a new CSHTML file to your website.

Data in Table

Enter InsertCustomer.cshtml in the Name field and click OK.

Now create a new web page in which the user can insert data in the Customers table, so replace InsertCustomer.cshtml file with the following code.

@{
   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>

Now let’s run the application and specify the following url − http://localhost:36905/InsertCustomer and you will see the following web page.

Insert Customer

In the above screenshot, you can see that we have added validation, so you click the insert button without entering any data or miss any of the above mentioned field then you will see that it displays the error message as shown in the following screenshot.

Error Message

Now let’s enter some data in all the fields.

Enter Data

Now click on Insert and you will see the updated list of customers as shown in the following screenshot.

Updated List
Advertisements