Introduction
We've learned how to update the database in Update Database in ASP.NET Web Pages 2. Now suppose that the user wants to delete the data, then this article will help you to do that.
In that context, we'll select here an individual record from the web grid and delete the single record from the database. So, let's proceed with the following sections:
- Adding Delete Link
- Adding Delete Page
- Working with Delete Page
- Run the Page
Adding Delete Link
At first we need to add a link to redirect to the Delete page. So, use the following procedure.
Step 1: Open the Cricketers.cshtml page
Step 2: Modify your code with the highlighted code below:
@CricGrid.GetHtml(
tableStyle: "CricGrid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: CricGrid.Columns(
CricGrid.Column(format: @<a href="~/DeleteCricketer?id=@item.ID">Delete</a>),
CricGrid.Column("Name"),
CricGrid.Column("Team"),
CricGrid.Column("Grade"),
CricGrid.Column(format: @<a href="~/UpdateCricketer?id=@item.ID">Update</a>)
)
)
You can see in your home page that the Delete link is added. However it'll not work because the Delete Page does not exist yet.
![Home Page in WebMatrix]()
Adding Delete Page
As you know the Delete Page does not exist yet, so let's create this page using the following.
Step 1: Create a new CSHTML page named DeleteCricketer.
Step 2: Replace the HTML code with the code below:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Delete Cricketer</title>
</head>
<body>
<h1>Delete Cricketer</h1>
@Html.ValidationSummary()
<form method="post">
<fieldset>
<legend>Cricketer Details</legend>
<p><span>Name:</span>
<span>@name</span></p>
<p><span>Team:</span>
<span>@team</span></p>
<p><span>Grade:</span>
<span>@grade</span></p>
<input type="hidden" name="CricketerID" value="@CricketerID" />
<p><input type="submit" name="BtnDelete" value="Delete" /></p>
</fieldset>
</form>
</body>
</html>
Working with Delete Page
Now we've created the Delete Page. It's time to insert the code in the code block using the following sections.
To Read a Single Record
In this section we write code to read a single record. Insert the following code in the code block:
@{
var name= "";
var team= "";
var grade= "";
var CricketerID= "";
if(!IsPost){
if(!Request.QueryString["ID"].IsEmpty() && Request.QueryString["ID"].IsInt()){
CricketerID = Request.QueryString["ID"];
var CricDb = Database.Open("Cricketer Site");
var CommandText = "Select * from Cricketers where ID = @0";
var SelectedRow = CricDb.QuerySingle(CommandText, CricketerID);
if(SelectedRow!=null){
name= SelectedRow.Name;
team= SelectedRow.Team;
grade= SelectedRow.Grade;
}
else{
Validation.AddFormError("Invalid Selection");
}
}
else{
Validation.AddFormError("Invalid Selection");
}
}
}
This code works the same with the update code to accept the deletion of the record from the database.
To Delete Selected Record
When the user clicks on the Delete button, the following code executes. So add the following code after the previous "If()" block:
if(IsPost && !Request["BtnDelete"].IsEmpty()){
CricketerID = Request.Form["CricketerID"];
var CricDb = Database.Open("Cricketer Site");
var DeleteText = "Delete from Cricketers where ID = @0";
CricDb.Execute(DeleteText, CricketerID);
Response.Redirect("~/Cricketers");
}
In the code above in the If block the second condition:
!Request["BtnDelete"].IsEmpty()
states that the request has an object named BtnDelete. It is used to check which button submitted from the form.
Run the Page
It;s time to run the run in the browser.
Step 1: Open the Cricketers.cshtml page and select the record to delete and click on "Delete".
![Delete Record in WebMatrix]()
Step 2: The Cricketer details open in the Delete page. Now click on the Delete button to delete the record from the database.
![Delete in WebMatrix]()
Complete Code
@{
Page.Title = "Delete a Cricketer";
Layout ="~/_LayoutPage.cshtml";
var name= "";
var team= "";
var grade= "";
var CricketerID= "";
if(!IsPost){
if(!Request.QueryString["ID"].IsEmpty() && Request.QueryString["ID"].IsInt()){
CricketerID = Request.QueryString["ID"];
var CricDb = Database.Open("Cricketer Site");
var CommandText = "Select * from Cricketers where ID = @0";
var SelectedRow = CricDb.QuerySingle(CommandText, CricketerID);
if(SelectedRow!=null){
name= SelectedRow.Name;
team= SelectedRow.Team;
grade= SelectedRow.Grade;
}
else{
Validation.AddFormError("Invalid Selection");
}
}
else{
Validation.AddFormError("Invalid Selection");
}
}
if(IsPost && !Request["BtnDelete"].IsEmpty()){
CricketerID = Request.Form["CricketerID"];
var CricDb = Database.Open("Cricketer Site");
var DeleteText = "Delete from Cricketers where ID = @0";
CricDb.Execute(DeleteText, CricketerID);
Response.Redirect("~/Cricketers");
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Delete Cricketer</title>
</head>
<body>
<h1>Delete Cricketer</h1>
@Html.ValidationSummary()
<form method="post">
<fieldset>
<legend>Cricketer Details</legend>
<p><span>Name:</span>
<span>@name</span></p>
<p><span>Team:</span>
<span>@team</span></p>
<p><span>Grade:</span>
<span>@grade</span></p>
<input type="hidden" name="CricketerID" value="@CricketerID" />
<p><input type="submit" name="BtnDelete" value="Delete" /></p>
</fieldset>
</form>
</body>
</html>
Summary
This article has described how to delete a record from the database using WebMatrix in ASP.NET Web Pages 2. In the next part we'll create a logical layout for the site. Thanks for reading.