WebMatrix Advanced Tutorial (6): Create Add Data page

So far you've learned how to create sites in WebMatrix, how to use styles and layouts to make Web pages smaller and easier to maintain, and enable browsers to download and render more quickly. You have created dynamic and data-driven Web pages, and this section describes how to create Web pages to add data to a database.

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:
Create and link add pages

Using WebMatrix, in the files workspace, create a new page and name it "adddata.cshtml".

Delete the default content for the Web page that WebMatrix created for you, replacing it with

Now return to the "datamovies.cshtml" page. Open it, it should resemble the following form:

@{      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, @row. Genre, @row. Releaseyear</a></li>      }    </ol>  </div>

Add the following line of HTML before you end </div>. If you remember, as described in a previous section, this is an anchor, and HTML is the link that defines another Web page.

<a href= "addmovie.cshtml" >add a new movie</a>
Run the Web site and view the page in a browser. It should resemble the following:

Click the Add a new movie link, and you will be transferred to the page you created earlier.

There is not much content in the page at this time. The next step is to add content to it.

As an additional exercise, you may notice that the text "Add a New Movie to the Database" has a different style than the rest. It is a

Create Add Movie Table

In general, when using HTTP, your browser uses the GET verb in the HTTP protocol to make a request to the server, which, as the name implies, obtains information from the server. You have always done this, but you may not realize this, because using get is an implicit way for a browser to request a Web page. The HTTP protocol also supports a variable called Post that can be used to send back information to the server.

As you can see, it's nice to have a dynamic application, but the next logical question is: How hard is it to send data to the server, have the server perform an operation on the data, and then return the results? I believe you have seen hundreds of such sites: you type some information and press the submit button to send that information to the server.

This type of application uses HTML forms. When you click Submit, the browser uses the post verb to send information from the form field to the server. Again, all of this is done behind the scenes, and you don't have to do anything special to use it, but it's useful to have your server-side code know what predicates the request is using, so the server can respond accordingly. You'll learn how to do this to add a movie to the database.

We start with a very simple form first. It is not very beautiful, but it can complete the task smoothly.

This is the look of it. Like I said, it's not very beautiful, but later we'll create some CSS to make it more beautiful



Now let's take a look at the HTML you just wrote to create this form.

<form action= "" method= "POST" >

The first new content is a <form> tag. The tag defines a form that tells the server when the user presses the <submit> button, what must be displayed in the form, and what it does is an HTTP POST. Because the action parameter is empty, the Web page (also known as addmove.cshtml) will process the post from the form.

<p>name:<input type= "text" name= "FormName"/></p>  <p>genre:<input type= "text" Name= " Formgenre "/></p>  <p>year:<input type=" text "name=" Formyear "/></p>




In the <form> tag, you will see that there are 3 <input> controls. They use HTML <input> controls, which can have many types of settings, in this case the type "text", which provides a basic text box that the user can use to enter text. Each text box has a name, which is a variable that the server uses to store the value that the user enters into the text box before committing.

<p><input type= "Submit" value= "Add Movie"/></p>

Finally, we have a <input> control of type "Submit", which defines the submit button. When the user presses this button, an HTTP POST operation is invoked, and the data entered by the user is sent to the server.

Now if you press the button, nothing happens. This is because you have not yet written code to handle postbacks from the server. The next step is to complete this task.

In the code, you need to know whether to execute the GET or POST method and handle it, we need to use if (IsPost) to determine if the page executes a post, the following code


@{
If (IsPost)
{
Do something on the POST
}
}
When the form is built, we have already named some elements, such as (FormName, Formgenre, Formyear), and when committed, the values of these elements are submitted to the server, like ' formname=something ', ' formgenre =something ', ' formyear=something ' and so on are transmitted, so it takes some variables to assign values to get their values, so the operation is simple, the following code:

@{         var moviename= "";         var moviegenre= "";         var movieyear= "";         if (IsPost) {           moviename=request["formName"];           moviegenre=request["Formgenre"];           movieyear=request["Formyear"];         }       }

There are three variables (moviename, moviegenre and Movieyear), which are initialized when the page is committed, and then we need to add code to open the database and add the data.
Add to Database
In the previous section, we have written the ' SELECT ' query to put the data out of the database, and now we need to add the data to the database using the ' Insert ' statement, the syntax of the SQL Insert command is as follows:
INSERT into Table (Column1, Column2, ...) COLUMNN) VALUES (Value1, Value2, ... Valuen)
Let's take a look at the code:

@{      var moviename= "";      var moviegenre= "";      var movieyear= "";        if (IsPost) {          moviename=request["formName"];          moviegenre=request["Formgenre"];          movieyear=request["Formyear"];          var Sqlinsert = "INSERT into Favorites (Name, Genre, Releaseyear) VALUES (@0, @1, @2)";          var db = Database.open ("Movies");          Db. Execute (Sqlinsert, Moviename, Moviegenre, movieyear);        }      }
We created the string Sqlinsert,razor engine to allow the format statement to assign values to the parameters, @0, @1, @2 represent Moviename, moviegenre, Movieyear, respectively, the three parameters of the non-character.
Db. After Execute () we add a statement and redirect to datamovies.cshtml side to see the added result:
Response.Redirect ("datamovies.cshtml");
Now, let's add a piece of data such as:


Click "Add Movie" button, the data will be added to the database, we look at the effect:




The above is the WebMatrix Advanced Tutorial (6): Create Add Data page content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

