Deleting Data in ASP.Net Web Pages 2

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="~/[email protected]">Delete</a>),
         CricGrid.Column("Name"),
         CricGrid.Column("Team"),
         CricGrid.Column("Grade"),
         CricGrid.Column(format: @<a href="~/[email protected]">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.