WebMatrix Advanced Tutorial (8): Creating a Data Deletion Web Page

So far, you have created a data-driven list of favorite movies, styled it, and added the ability to add new movies to the database and edit existing movies. The next step in the process of creating this application is to provide users with the ability to delete records from the database.

Introduction: Microsoft WebMatrix is ​​a free tool that can be used to create, customize, and publish websites on the Internet.

WebMatrix enables you to create websites easily. You can start with an open source application (such as WordPress, Joomla, DotNetNuke or Orchard) and WebMatrix handles the task of downloading, installing and configuring the application for you. Or you can write the code yourself using the many built-in templates that will help you get started quickly. Whatever you choose, WebMatrix provides everything your website needs to run, including web servers, databases, and frameworks. By using the same stack on your development desktop that you would use on your web host, the process of bringing your website online is easy and smooth.
You can download it from http://web.ms/webmatrix.
Now you can learn to use WebMatrix, CSS, HTML, HTML5, ASP.NET, SQL, databases, and how to write simple web applications in just a few hours. It reads as follows:
When it comes to web application development and data, you may have heard the term CRUD. CRUD stands for Create, Retrieve, Update and Delete, which summarizes exactly what you do with WebMatrix.

Add Delete Web Pages

First, Create a new CSHTML web page and name it DeleteMovie.cshtml

Replace the HTML in it with the following:

<h1 id="Delete-nbsp-a-nbsp-movie">Delete a movie</h1>  
<p>Are you sure you want to delete the movie <strong>@Movie.Name ?</strong></p>  
<form action="" method="post">  
    <input type="submit" value="Yes"/>  
    <input type="button" value="No" onclick="window.location = dataMovies.cshtml" />  
</form>

This code creates a basic form with 2 buttons. , the submit button triggers an HTTP POST (just like the edit webpage in the previous section), and another button redirects you back to the movie list when clicked

Just like the EditMovie.cshtml webpage, this webpage will. is called and passed a parameter which is the ID of the movie to be deleted. In the text "Are you sure you want to delete the movie @Movie.Name?" the value of Movie.Name will be inserted by the server. Tell the server how to get this value: To do this, as before, add some Razor code at the top of the webpage to get the input parameters

@{  
var id=Request["id"];  
var SQLSELECT = "SELECT * FROM Favorites where ID=@0";  
var db = Database.Open("Movies");  
var Movie = db.QuerySingle(SQLSELECT,id);  
var MovieName=Movie.Name;  
}

Here you can see that the parameter is passed to the webpage as an "id" (using DeleteMovie.cshtml?id=), this id is used to find a specific movie. Perform a query to the database and get the record for that movie and render it when you render the page. &*

Run DeleteMovie.cshtml?id= and you will see this screen, assuming is a valid ID in the database:

If you click the "No" button, you will be redirected back to the dataMovies.cshtml web page. If you click "Yes", nothing will happen because no code has been written to handle the deletion.

To delete records from the database, use the DELETE SQL command. This can be done using the following syntax DELETE FROM WHERE =, so if you want to delete the movie with id=2, you can write:

DELETE FROM Favorites WHERE ID=2, when the user clicks the "Yes" button, the form will be submitted and the delete operation will occur, we can perform this task on postback as follows: This will delete movie, redirecting us back to the list web page so we see it gone

Here is the full code for DeleteMovie.cshtml:

@{  
  var id=Request["id"];  
  var SQLSELECT = "SELECT * FROM Favorites where ID=@0";  
  var db = Database.Open("Movies");  
  var Movie = db.QuerySingle(SQLSELECT,id);  
  var MovieName=Movie.Name;  
  if(IsPost)  
      {  
      var SQLDELETE = "DELETE FROM Favorites WHERE ID=@0";  
      db.Execute(SQLDELETE,id);  
      Response.Redirect("dataMovies.cshtml");  
      }  
  }  
     
  <h1 id="Delete-nbsp-a-nbsp-movie">Delete a movie</h1>  
  <p>Are you sure you want to delete the movie <strong>@Movie.Name ?</strong></p>  
  <form action="" method="post">  
  <p><input type="submit" value="Yes"/>  
  <input type="button" value="No" onclick="window.location = &#39;dataMovies.cshtml&#39;" /></p>  
  <br/>  
  </form>

Call delete web page from movie list

Now that we have a working removal web page, we connect it to the movie list web page so that the user can remove an item from that list and request its removal.

On the movie list page, just add a hyperlink to each list item, where the hyperlink links to the DeleteMovie.cshtml page, passing it the id of the current movie.

Here is the complete code for dataMovies.cshtml:

 @{   
 var db= Database.Open("Movies");   
 var sqlQ = "SELECT * FROM Favorites";    
 var data = db.Query(sqlQ);    
 }   
<div id="movieslist">   
<ol>    
@foreach(var row in data){    
<li>   
<a href="@row.Name>EditMovie.cshtml?id=@row.id">@row.Name, @row.Genre, @row.ReleaseYear    
</a>    
<a href="DeleteMovie.cshtml?id=@row.id">Delete</a>  
</li>  
}  
</ol>  
<a href="AddMovie.cshtml">Add a new movie</a>  
</div>

Run this page and see the removal workflow. First of all, this is the new dataMovies.cshtml:

The above is the WebMatrix advanced tutorial (8): Creating and deleting the content of data web pages. For more related content, please pay attention to PHP Chinese Net (www.php.cn)!