Post
Ask Question

Inserting Record and Working With Validation in ASP.Net Web Pages 2

Introduction

We've done the Form Creation in previous articles. So here this article explains to create a form with which we can insert more records to the database when using ASP.NET Web Pages (Razor).

In that context, we'll learn to create a form, add the data, validate the data and link to another page and we'll also use the code to execute various methods.

So, let's proceed with the following sections:

  • Creating Forms
  • Insert Data into Database
  • Working with Validations
  • Page Linking

Creating Forms

Step 1: Now at first create a CSHTML named CreateCricketer.

Step 2: Replace your code with the following code:

  1. @{  
  2. }  
  3. <!DOCTYPE html>  
  4. <html lang="en">  
  5.     <head>  
  6.         <meta charset="utf-8" />  
  7.         <title>Create Cricketer</title>  
  8.     </head>  
  9.     <body>  
  10.         <h1>Create New</h1>  
  11.         <form method="post">  
  12.             <fieldset>  
  13.                 <legend>Cricketer Information</legend>  
  14.                 <table>  
  15.                     <tr>  
  16.                         <td style="width: 100px"><label for="Name">Name:</label></td>  
  17.                         <td><input type="text" name="Name" value="@Request.Form["Name"]" /></td>  
  18.                     </tr>  
  19.                     <tr>  
  20.                         <td><label for="Team">Team:</label></td>  
  21.                         <td><input type="text" name="Team" value="@Request.Form["Team"]" /></td>  
  22.                     </tr>  
  23.                     <tr>  
  24.                         <td><label for="Grade">Grade:</label></td>  
  25.                         <td><input type="text" name="Grade" value="@Request.Form["Grade"]" /></td>  
  26.                     </tr>  
  27.                     <tr>  
  28.                         <td colspan="2"><input type="submit" name="BtnSubmit" value="Save" /></td>  
  29.                     </tr>  
  30.                 </table>  
  31.             </fieldset>  
  32.         </form>  
  33.     </body>  
  34. </html> 

In the code above, we've created a form element with a post method. There are various elements used here to insert the records into the database. Each element has the name property to get the user's input and pass it.

Step 3: Launch the page into the website.

Create New Record in WebMatrix

Step 4: It's time to get the form values. Now in the code block add the following code:

  1. @{  
  2.     var Cric_Name="";  
  3.     var Cric_Team="";  
  4.     var Cric_Grade="";  
  5.     if(IsPost){  
  6.         Cric_Name= Request.Form["Name"];  
  7.         Cric_Team= Request.Form["Team"];  
  8.         Cric_Grade= Request.Form["Grade"];  
  9.     }  
  10. } 

In the code above the variables are declared to store the values from the text boxes. The If(IsPost) method is used to ensure that the variables are set only when the user clicks on the "Save" button.

Insert Data into Database

Now we have the form to submit the records to the database. We have only to provide code to do this job. So, let's proceed with the following procedure.

Step 1: Modify the If() method like below:

  1. if(IsPost){  
  2.    Cric_Name= Request.Form["Name"];  
  3.    Cric_Team= Request.Form["Team"];  
  4.    Cric_Grade= Request.Form["Grade"];     
  5.    var Cric_Db= Database.Open("Cricketer Site");  
  6.    var CommandText = "Insert into Cricketers(Name,Team,Grade) values(@0,@1,@2)";  
  7.    Cric_Db.Execute(CommandText, Cric_Name, Cric_Team, Cric_Grade);  
  8.    Response.Redirect("~/Cricketers");  
  9. } 

In the code above, we need to provide the Insert query to insert the record into the database. At first we open the database and next we use the Insert Command to insert the record. At last the Response method is used to view the inserted record.

Note: It is important that you use the placeholders in the SQL Statement otherwise if you concatenate user input into a SQL Statement you open yourself to a SQL injection attack.

Step 2: Now run the page and insert the record.

Enter Record in WebMatrix

When you save your new record, you can search for your record in the table as shown below:

Inserted Record

Working with Validations

We do not provide the validations yet. Use the following procedure to check it.

Step 1: Add another record and enter the name and leave the other entries.

Validating Record in WebMatrix

Step 2: Your record is saved because you didn't provide any validations.

Record without Validation

Now we need to provide the validation in the forms to validate the form using the Validation helper. The validation helper validates the field if the entered record does not meet the requirements.

Step 3: Now modify your code like below:

  1. @{  
  2.     Validation.RequireField("Name", "Cannot be bank!!");  
  3.     Validation.RequireField("Team", "Cannot be bank!!");  
  4.     Validation.RequireField("Grade", "Cannot be bank!!");      
  5.     var Cric_Name="";  
  6.     var Cric_Team="";  
  7.     var Cric_Grade="";  
  8.     if(IsPost && Validation.IsValid()){  
  9.         Cric_Name= Request.Form["Name"];  
  10.         Cric_Team= Request.Form["Team"];  
  11.         Cric_Grade= Request.Form["Grade"];     
  12.         var Cric_Db= Database.Open("Cricketer Site");  
  13.         var CommandText = "Insert into Cricketers(Name,Team,Grade) values(@0,@1,@2)";  
  14.         Cric_Db.Execute(CommandText, Cric_Name, Cric_Team, Cric_Grade);  
  15.         Response.Redirect("~/Cricketers");   
  16.     }  
  17. } 

Show Validation Message

So far we've applied the validation and now we need to show the validation message if the user has entered an invalid record. Use the following procedure to do that.

Step 1: Modify your code like below:

  1. <h1>Create New</h1>  
  2. @Html.ValidationSummary()  
  3. <form method="post">  
  4.      <fieldset>  
  5.           <legend>Cricketer Information</legend>  
  6.           <table>  
  7.                <tr>  
  8.                    <td style="width: 100px"><label for="Name">Name:</label></td>  
  9.                    <td><input type="text" name="Name" value="@Request.Form["Name"]" /></td>  
  10.                    <td>@Html.ValidationMessage("Name")</td>  
  11.                </tr>  
  12.                <tr>  
  13.                    <td><label for="Team">Team:</label></td>  
  14.                    <td><input type="text" name="Team" value="@Request.Form["Team"]" /></td>  
  15.                    <td>@Html.ValidationMessage("Team")</td>  
  16.                </tr>  
  17.                <tr>  
  18.                    <td><label for="Grade">Grade:</label></td>  
  19.                    <td><input type="text" name="Grade" value="@Request.Form["Grade"]" /></td>  
  20.                    <td>@Html.ValidationMessage("Grade")</td>  
  21.                </tr>  
  22.                <tr>  
  23.                    <td colspan="2"><input type="submit" name="BtnSubmit" value="Save" /></td>  
  24.                </tr>  
  25.           </table>  
  26.      </fieldset>  
  27. </form> 

Step 2: Now run the page and enter the record as shown below:

Display Validations

You can see that the validation message is displayed after leaving a texbox.

Page Linking

Now we apply our last step in which we add a "Create New" link in our main page to redirect to the "Create Cricketer" page.

To do this open the Cricketers.cshtml page and add the following code before the body

  1. <p>  
  2.     <a href="~/CreateCricketer">Create New</a>  
  3. </p>  
  4. </body> 

Adding Link in a Page

Summary

In this article we created a form for creating some input elements in the form to insert the record into the database. We can also validate the form by the validation helper in the ASP.NET Web Pages 2. In the next part we'll update our database. Thanks for reading.


Similar Articles