Advanced WebMatrix tutorial (6): create a webpage for adding data

So far, you have learned how to create a website in WebMatrix, how to use styles and la s to make webpages smaller and easier to maintain, and how to make browsers download and present them faster. You have created a dynamic and data-driven webpage. This section describes how to create a webpage to add data to a 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:
Create and link to add webpage

Use WebMatrix to create a new webpage in the Files workspace and name it "AddData. cshtml ".

Delete the default content of the web page that WebMatrix creates for you and replace it

<H1> Add a New Movie to the database Return to the "dataMovies. cshtml" page. Open it in the following format:

@{
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>
Before the end </div>, add the following line of HTML. If you still remember that this is a positioning tag as described in the previous section, HTML defines the link of another web page through it.

<A href = "AddMovie. cshtml"> Add a new movie </a>
Run the website and view the webpage in the browser. It should be similar:

Click Add a new movie.

Currently, this webpage does not contain much content. Next, add content to it.

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

Create and add a movie table

Generally, when HTTP is used, your browser sends a request to the server using the GET predicate in HTTP. The name indicates that the predicate obtains information from the server. You have been doing this all the time, but you may have not realized this because using GET is an implicit way for a browser to request a webpage. HTTP also supports a variable named POST, which can be used to send back information to the server.

It can be seen that dynamic applications are very good, but the next logic problem is: How hard is it to send data to the server so that the server can perform an operation on the data and then return the result? I believe you have seen hundreds of such websites: Enter some information and press the submit button to send the information to the server.

Such applications use HTML forms. When you click submit, the browser uses the POST predicate to send the information in the form field to the server. Once again, all these operations are performed behind the scenes. You do not need to perform any special operations to use them, but let the code on your server know what predicates the request uses, in this way, the server can respond accordingly. You will learn how to achieve this so that movies can be added to the database.

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

1:

2: <form action = "" method = "post">

3: <p> Name: <input type = "text" name = "formName"/> </p>

4: <p> Genre: <input type = "text" name = "formGenre"/> </p>

5: <p> Year: <input type = "text" name = "formYear"/> </p>

6: <p> <input type = "submit" value = "Add Movie"/> </p>

7: </form>

This is its appearance. As I said, it is not very beautiful, but we will create some CSS later to make it more beautiful.

Now let's take a look at the HTML that was just written to create this form.

<Form action = "" method = "post">

The first new content is the <form> mark. This tag defines a form that tells the server user when to press the <submit> button, which content must be displayed in the form, and the operation it performs will be http post. Because the action parameter is empty, the webpage (I .e. 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 can see three <input> controls. They use the HTML <input> Control, which can have many types of settings. In this example, the type is "text", which provides a basic text box for users to enter text. Each text box has a name, which is a variable. The server will use it to store the values that users enter in the text box before submitting.

<P> <input type = "submit" value = "Add Movie"/> </p>

Finally, we have a <input> Control of the "submit" type, which defines the submit button. When you press this button, the http post operation is called and the data entered by the user is sent to the server.

Now, if you press this button, nothing will happen. This is because you have not written code to process the sending back from the server. This task will be completed.