WebMatrix Advanced Tutorials (7): Create an Edit data page

So far, you've created a movie page, set its style, designed it to be data driven, and then created a form to add a movie to the database. The next step is to create a very similar form for editing the existing movie list.

Guide: Microsoft WebMatrix is a free tool that you can use to create, customize, and publish Web sites on the Internet.

WebMatrix makes it easy for you to create sites. You can start with an open source application (such as WordPress, Joomla, DotNetNuke, or Orchard), and WebMatrix will handle the tasks of downloading, installing, and configuring these applications for you. Or you can use many of the built-in templates to write your own code that will help you get started quickly. Whatever your choice, WebMatrix provides everything you need to run your site, including Web servers, databases, and frameworks. By using the same stack that you will use on the web host on your development desktop, the process of getting your site 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, SQL, database, and more, and how to write simple Web applications in just a few hours. The contents are as follows:
Let's take a look at the application so far:

As you can see, it has a list of movies that can be added to the movie through the links at the bottom. To set up the mouse hover effect, we use the <a> tag to set each movie entry in the list as a hyperlink. This is useful if you want to edit a movie with just this hyperlink, so let's look at how to do this.

Create an edit page

First, create a new cshtml Web page in WebMatrix and name it editmovie.cshtml. This page will eventually contain a form that fills in the details of the selected movie, and when you change these details, the changes are committed back to the database.

Replace the default content in editmovie.cshtml with such a form. The form is very similar to the form that you created in the previous section.

Invoke edit page from movie list

We now understand the basics of editing forms. But how do you initialize the form with the database content of the specific movie you selected? First, let's look at how to tell this page which movie you want to edit, so we have to go back to the datamovies.cshtml page.

As you may recall, we have written some list items in the following form:

<li><a href= "#" > @row. Name, @row. Genre, @row. Releaseyear</a></li>
Hyperlinks don't go anywhere, because href is just "#". We let the hyperlink go to the editmovie.cshtml page as follows:

<li><a href= "editmovie.cshtml" > @row. Name, @row. Genre, @row. Releaseyear</a></li>
That's great, but no matter which movie you choose, it will always call editmovie.cshtml, and this page doesn't know which movie you're editing. However, the Atamovies.cshtml Web page already knows the movie you are editing, because you have selected it, so you can pass the ID of your selected movie to editmovie.cshtml as follows:

Editmovie.cshtml?id=<something>
And since we already know what the ID of the current line is (@row. ID), we can use razor to write out the ID when we write out the list, and change it as follows <li>

<li><a href= "editmovie.cshtml?id= @row. ID" > @row. Name, @row. Genre, @row. Releaseyear</a></li>
Now look at datamovies.cshtml and get the following interface:




It doesn't look any different, so let's take a look at the HTML code for this page. This is not what you see in the WebMatrix. cshtml Web page, but the server (from the instructions in cshtml) generates HTML that is sent to the browser concurrently.

In Internet Explorer 9, you can view this code by right-clicking anywhere on the page and selecting View Source

 <!  DOCTYPE html> 
Now you know how to write out the ID value of this particular row to HTML when you create the skin. Now, when editmovie.cshtml loads, we can get this ID and use it to find the specific records we're interested in.

Finish editing the page

We return to editmovie.cshtml.

Remember before we saw that if you put a @{at the top of the page and write code in it, the code executes when the page loads. It would be nice to put code in this position to read the ID contained in the URL of the page and then use that ID to find the name, type, and release year of the movie.

You can use the request object to find the value of a parameter when you invoke a Web page using the syntax that we use (that is, pagename.cshtml?<parameter>=<value>). So, if editmovie.cshtml?id=6, we can use the following code:

var id=request["id"];
This code requires creating a local variable (named "id") and initializing it with the value of the parameter (also the "id"). WebMatrix is smart enough to realize that they are different based on the context of using two IDs.

Now that we have the ID, we can use it in a SQL "select" Query to find the record for that movie.

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;  var moviegenre=movie.genre;  var movieyear=movie.releaseyear;
It's very simple, isn't it? We say "Select from Favorites *, where the ID field equals the ID we passed in" and execute the statement against the database. Because we only want one record, we ask for DB. Querysingle gets a record.

The query is then executed, and the name, genre, and releaseyear values are loaded into the local variables.

This is good, but the problem is that the values are in variables rather than forms, how do users edit them? The answer is simple, keep in mind that this code is executed before the page is loaded, so we have variables before we write the HTML. And because of this, we can use these values to initialize the form. Forms use the <input> field to provide us with text boxes that support the "value" property. We can now use this property directly in the variables to initialize them.



Here is the code for the page:

@{    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;    var moviegenre=movie.genre;    var movieyear=movie.releaseyear;  }     
We run the datamovies.cshtml page




Then we'll click on the third line ' The Fourth World ' and the movie will be reversed to the editmovie.cshtml page:
Then we can edit the content, click "Edit Moiie" and still use the IF (IsPost) code block to get the POST request
if (IsPost) {    moviename=request["formName"];     moviegenre=request["Formgenre"];     movieyear=request["Formyear"];   }
Now we need to update the data and update the database SQL syntax as follows:
UPDATE table SET Column=value, Column=value, Column=value ... WHERE Key=value
In this case, we need to update the data for three fields and execute the following code:

var sqlupdate = "UPDATE Favorites Set name=@0, genre=@1, releaseyear=@2 WHERE id=@3";  Db. Execute (Sqlupdate, Moviename, Moviegenre, Movieyear,id);
After the update, or from the new direction to the datamovies.cshtml page

The complete code is as follows:
@{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;      var moviegenre=movie.genre;         var movieyear=movie.releaseyear;        if (IsPost) {moviename=request["formName"];        moviegenre=request["Formgenre"];        movieyear=request["Formyear"];        var sqlupdate = "UPDATE Favorites Set name=@0, genre=@1, releaseyear=@2 WHERE id=@3"; Db.        Execute (Sqlupdate, Moviename, Moviegenre, Movieyear,id);      Response.Redirect ("datamovies.cshtml"); }} 
Look at the effect of the operation

The above is WebMatrix Advanced Tutorial (7): Create an Edit data page content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!


