Advanced WebMatrix tutorial (7): Create and edit a Data Webpage

So far, you have created a movie webpage, set its style, designed it to be driven by data, and then created a form to add movies to the database. The next step is to create a very similar form to edit an existing movie list.

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:
Let's take a look at the applications so far:

As you can see, it has a list of movies, which can be added through the link at the bottom. To create a hover effect, we use the <a> flag to set each movie entry in the list as a hyperlink. This hyperlink is useful when you want to edit a movie. Let's take a look at how to implement this feature.

Create and edit webpage

First, create a new CSHTML webpage in WebMatrix and name it EditMovie. cshtml. This page will eventually contain a form that fills in the details of the selected movie. When you change the details, the changes will be submitted back to the database.

Replace the default content in EditMovie. cshtml with this form. This form is very similar to the form created in the previous section.

<H1> Edit a Movie <Form action = "" method = "post">
<P> Name: <input type = "text" name = "formName"/> </p>
<P> Genre: <input type = "text" name = "formGenre"/> </p>
<P> Year: <input type = "text" name = "formYear"/> </p>
<P> <input type = "submit" value = "Edit Movie"/> </p>
</Form>
Call and edit webpage from movie list

Now we understand the basic knowledge of editing a form. But how can I use the database content of a specific movie you selected to initialize this form? First, let's take a look at how to tell this webpage which movie you want to edit. Therefore, we must return to the dataMovies. cshtml webpage.

You may remember that we wrote some list items in the following form:

<Li> <a href = "#"> @ row. Name, @ row. Genre, @ row. ReleaseYear </a> </li>
Hyperlinks are not transferred anywhere, because href is only "#". Let's move the hyperlink to the EditMovie. cshtml webpage, as shown below:

<Li> <a href = "EditMovie. cshtml"> @ row. Name, @ row. Genre, @ row. ReleaseYear </a> </li>
This is good, but no matter which movie you choose, it will always call EditMovie. cshtml, and this page does not know which movie you are editing. However, the ataMovies. cshtml page already knows the movie you edited. Because you have selected it, you can pass the ID of your selected movie to EditMovie. cshtml, as shown below:

EditMovie. cshtml? Id = <something>
Since we already know what the id of the current row is (@ row. id), we can use Razor to write this ID when writing the list, and change it as follows <li>:

<Li> <a href = "@ row. Name, @ row. Genre, @ row. ReleaseYearEditMovie. cshtml? Id = @ row. id "> @ row. Name, @ row. Genre, @ row. ReleaseYear </a> </li>
View dataMovies. cshtml and you will get the following interface:

It looks no different. Let's take a look at the HTML code of this webpage. This is not the. cshtml web page you see in WebMatrix, but the server (commands in cshtml) generates the HTML that is sent to the browser concurrently.

In Internet Explorer 9, you can right-click anywhere on the webpage and select "view source code" to view the code

1: <! DOCTYPE html>
2: 3: 4: <meta charset = "UTF-8"/>
5: <title> My Favorite Movies </title>
6: <link rel = "stylesheet" type = "text/css" href = "movies-html5.css"/>
7: 8:
9: <body>
10: 11: 12: 13:
14: <div id = "movieslist">
15: <ol>
16: <li> <a href = "EditMovie. cshtml? Id = 1 "> it a wonderful life, Comedy, 1946 </a> </li>
17: <li> <a href = "EditMovie. cshtml? Id = 2 "type =" parmname "text =" parmname "> Lord of the Rings, Drama, 2001 </a type =" parmname "text ="/parmname "> </li type =" parmname "text ="/parmname ">
18: <li> <a href = "EditMovie. cshtml? Id = 3 "> The Fourth World, animation, 2012 </a> </li>
19: <li> <a href = "EditMovie. cshtml? Id = 4 "> The Lion King, Family, 1994 </a> </li>
20: <li> <a href = "EditMovie. cshtml? Id = 5 "> Forrest Gump, Comedy, 1994 </a> </li>
21: <li> <a href = "EditMovie. cshtml? Id = 6 "> The Million Year Journey, Anime, 2014 </a> </li>
22: </ol>
23:
24: <a href = "AddMovie. cshtml"> Add a new movie </a>
25: </div>
26:
27: <footer>
28:
29: This site was built using Microsoft WebMatrix.
30:
31: <a href = "Download> http://web.ms/webmatrix"> Download it now. </a>
32:
33: </footer>
34:
35: 36:
Now you know how to write the ID value of this specific row to HTML when creating the appearance. Now, when EditMovie. cshtml is loaded, we can get this ID and use it to find the specific records we are interested in.

Complete webpage editing

We return EditMovie. cshtml.

Remember that if you place a @ {on the top of the page and write the code into it, the code will be executed when the page is loaded. Place code at this location to read the ID contained in the webpage URL, and then use this ID to find the name, type, and release year of the movie, which is even better.

When we use the syntax (PageName. cshtml? <Parameter >=< Value>) when calling a webpage, you can use the Request object to find the Parameter Value. So, if EditMovie. cshtml? Id = 6, we can use the following code:

Var id = Request ["id"];
This Code requires you to create a local variable (named "id") and use the value of the parameter (also "id") to initialize it. WebMatrix is very intelligent and can realize that they are different based on the context of the two IDs.

Now we have an "id". We can use it in the SQL "SELECT" query to find records of the movie.

1: var id = Request ["id"];
2: var SQLSELECT = "SELECT * FROM Favorites where ID = @ 0 ";
3: var db = Database. Open ("Movies ");
4: var Movie = db. QuerySingle (SQLSELECT, id );
5: var MovieName = Movie. Name;
6: var MovieGenre = Movie. Genre;
7: var MovieYear = Movie. ReleaseYear;
Very simple, right? Let's say "select from Favorites *, where the ID field is equal to the ID we passed in", and then execute this statement on the database. Because we only want one record, we need db. QuerySingle to obtain one record.

Then execute the query to load the Name, Genre, and ReleaseYear values to the local variable.

This is a good practice, but the problem is that the values are in variables rather than in the Form. How do users edit them? The answer is simple. Remember that this code is executed before the webpage is loaded, so we already have variables before writing HTML. For this reason, we can use these values to initialize the form. The form uses the <input> field to provide a text box. These fields support the "value" attribute. Now we can use this attribute directly in the variable to initialize them.