Advanced WebMatrix tutorial (8): Create and delete data webpages

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

Microsoft WebMatrix is a free tool for creating, customizing, and publishing websites on the Internet.

WebMatrix allows you to easily create websites. You can start with an open-source application (such as WordPress, Joomla, DotNetNuke, or Orchard) and WebMatrix will process the tasks of downloading, installing, and configuring these applications for you. Alternatively, you can use many built-in templates to write your own code. These templates help you get started quickly. No matter what you choose, WebMatrix provides everything you need to run your website, including Web servers, databases, and frameworks. By using the same stack on your development desktop as that on your Web host, you can easily and smoothly launch your website.
You can download a token from http://web.ms/webmatrix.
Now you only need a few hours to learn about WebMatrix, CSS, HTML, HTML5, ASP. NET, SQL, database, and how to write simple Web applications. The content is as follows:
You may have heard of the CRUD term when talking about Web application development and data. CRUD indicates Create (Create), Retrieve (search), Update (Update and Delete), which accurately summarizes what you do using WebMatrix.

Add or delete a webpage

First, create a new CSHTML webpage and name it DeleteMovie. cshtml.

Replace HTML with the following:

<H1> Delete a movie <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 containing two buttons. The submit button triggers http post (just like editing a webpage in the previous section ), another button redirects you back to the movie list when you click it.

Just like the EditMovie. cshtml webpage, this webpage will be 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. Therefore, we need to tell the server how to get this value: therefore, as before, add some Razor code at the top of the webpage to get the input parameters.

1 :@{
2:

3: var id = Request ["id"];

4:

5: var SQLSELECT = "SELECT * FROM Favorites where ID = @ 0 ";

6:

7: var db = Database. Open ("Movies ");

8:

9: var Movie = db. QuerySingle (SQLSELECT, id );

10:

11: var MovieName = Movie. Name;

12:

13 :}

14:

Here you can see that the parameter is passed to the webpage as an "id" (using DeleteMovie. cshtml? Id = <whatever>), which is used to find a specific movie. Execute a query on the database and obtain the record of the video. Now you can get the name of the movie and present it when rendering the page.

Run DeleteMovie. cshtml? Id = <something>, you will see this screen, provided that <something> is a valid ID in the database:

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

To DELETE a record from a database, run the delete SQL command. You can use the following syntax to delete from <Table> WHERE <Field >=< Value>. Therefore, if you want to DELETE a movie with id = 2, you can write it:

Delete from Favorites where id = 2. When you click the "Yes" button, the form is submitted and deleted. You can execute this task when sending back, as shown below: this will delete the movie and redirect us back to the list page so that we can see it disappears.

The complete code of DeleteMovie. cshtml is as follows:

1 :@{
2:
3: var id = Request ["id"];
4:
5: var SQLSELECT = "SELECT * FROM Favorites where ID = @ 0 ";
6:
7: var db = Database. Open ("Movies ");
8:
9: var Movie = db. QuerySingle (SQLSELECT, id );
10:
11: var MovieName = Movie. Name;
12:
13: if (IsPost ){
14:
15: var SQLDELETE = "delete from Favorites where id = @ 0 ";
16:
17: db. Execute (SQLDELETE, id );
18:
19: Response. Redirect ("dataMovies. cshtml ");
20:
21 :}
22:
23 :}
24:
25: 26:
27: <p> Are you sure you want to delete the movie <strong> @ Movie. Name? </Strong> </p>
28:
29: <form action = "" method = "post">
30:
31: <p> <input type = "submit" value = "Yes"/>
32:
33: <input type = "button" value = "No" onclick = "window. location = dataMovies. cshtml"/> </p>
34:
35: <br/>
36:
37: </form>
38:
Delete webpage from movie list call

Now we have a valid Delete page. We connect it to the movie list page so that you can delete a project from the list and request to delete it.

On the movie list page, you only need to add a hyperlink for each list item. The hyperlink links to the DeleteMovie. cshtml page and passes the id of the current movie to it.

The complete code of dataMovies. cshtml is as follows:

1 :@{
2:
3: var db = Database. Open ("Movies ");
4:
5: var sqlQ = "SELECT * FROM Favorites ";
6:
7: var data = db. Query (sqlQ );
8:
9 :}
10:
11: <div id = "movieslist">
12:
13: <ol>
14:
15: @ foreach (var row in data ){
16:
17: <li>
18:
19: <a href = "@ row. Name> EditMovie. cshtml? Id = @ row. id "> @ row. Name, @ row. Genre, @ row. ReleaseYear
20:
21: </a>
22:
23: <a href = "DeleteDeleteMovie. cshtml? Id = @ row. id "> Delete </a>
24:
25: </li>
26:
27 :}
28:
29: </ol>
30:
31: <a href = "AddMovie. cshtml"> Add a new movie </a>
32:
33: </div>
34:
Run this page and view the deleted workflow. First, this is the new dataMovies. cshtml: