WebMatrix進階教程(6)：建立添加資料網頁

目前為止您瞭解了如何在WebMatrix中建立網站，如何使用樣式和布局使網頁更小且更容易維護，以及使瀏覽器能夠更快地下載和呈現。您建立了動態和資料驅動的網頁，本部分將介紹如何建立網頁來向資料庫添加資料。

導讀：Microsoft WebMatrix是一個免費的工具，可用於建立、自訂和在Internet上發布網站。

WebMatrix使您能夠輕鬆建立網站。您可以從一個開源應用程式（比如WordPress、Joomla、 DotNetNuke或Orchard）開始，WebMatrix會為您處理下載、安裝和配置這些應用程式的任務。或者您可以使用許多內建的模板自行編寫代碼，這些模板有助於您迅速上手。無論您做何選擇，WebMatrix都提供了您的網站運行所需的一切內容，包括Web伺服器、資料庫和架構。通過在您的開發案頭使用與您將在Web主機上使用的相同堆棧，將網站上線的過程變得既輕鬆又順利。
您可以從http://web.ms/webmatrix下載它。
現在您只需花幾個小時便可學會使用WebMatrix、CSS、HTML、HTML5、ASP.NET、SQL、資料庫等知識以及如何編寫簡單的Web應用程式。內容如下：
建立和連結添加網頁

使用WebMatrix，在Files工作區中，建立一個新網頁並將它命名為“AddData.cshtml”。

刪除WebMatrix為您建立的網頁的預設內容，將它替換為

<h1>Add a New Movie to the database</h1>
現在返回到“dataMovies.cshtml”網頁。開啟它，它應該類似於以下形式：

@{      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>

在結束</div>之前，添加下面這行HTML。如果您還記得，前面某一部分中介紹過這是一個錨點，HTML就是通過它定義另一個網頁的連結的。

<a href="AddMovie.cshtml">Add a new movie</a>
運行網站並在瀏覽器中查看該網頁。它應該類似於：

單擊“Add a new movie”連結，您將轉到之前建立的網頁。

目前該網頁中還沒有太多內容。下一步將向其中新增內容。

作為附加練習，您可能注意到“Add a New Movie to the Database”文本與剩餘部分具有不同的樣式。它是一個<h1>，但它設定樣式的方式與頁首h1並不相同。我們看看能不能修複這一問題。（提示，頁首h1被視為<header>標記的子標記，但它不是。需要向CSS檔案中添加什麼內容才能以相同方式設定樣式？）

建立添加電影表格

通常，當使用HTTP時，您的瀏覽器會使用HTTP協議中的GET謂詞向伺服器發出請求，從名稱可以看出，該謂詞從伺服器擷取資訊。您一直都是這麼做的，但可能還沒認識到這一點，因為使用GET是瀏覽器請求網頁的一種隱含方式。HTTP協議還支援一個名為POST的變數，它可用於向伺服器發送回資訊。

可以看到，擁有動態應用程式非常好，但下一個邏輯問題是：向伺服器發送資料，讓伺服器對資料執行某項操作，然後返回結果，這有多難？我相信您已見過數百個這樣的網站：您鍵入一些資訊，按下提交按鈕將該資訊發送給伺服器。

這類應用程式使用了HTML表單。當單擊“提交”時，瀏覽器使用POST謂詞將表單欄位中的資訊發送到伺服器。再一次說明，所有這些操作都是在幕後完成的，您無需執行任何專門的操作來使用它，但讓您伺服器端的代碼知道請求使用了什麼樣的謂詞很有用，這樣伺服器就可以相應地做出響應。您將瞭解如何?此目的，以便將電影添加到資料庫。

我們首先從一個非常簡單的表單開始。它不是很美觀，但能夠順利完成任務。

<h1>Add a New Movie to the Database</h1>  <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="Add Movie" /></p>  </form>

這是它的外觀。就像我說的，它不是很美觀，但稍後我們將建立一些CSS來使它更加漂亮

現在讓我們看一下剛才編寫來建立此表單的HTML。

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

第一個新內容是<form>標記。該標記定義一個表單，告訴伺服器使用者何時按下<submit>按鈕，表單中必須顯示哪些內容，它所執行的操作將是HTTP POST。由於action參數是空的，所以該網頁（也即AddMove.cshtml）將處理來自表單的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>

在<form>標記中，您將看到有3個<input>控制項。它們使用HTML <input>控制項，該控制項可以有許多類型設定，在本例中類型為“text”，這會提供一個基本的文字框，使用者可以用於輸入文本。每個文字框都有一個名稱，該名稱是一個變數，伺服器將使用它儲存使用者在提交之前輸入到文字框中的值。

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

最後，我們有一個類型為“submit”的<input>控制項，它定義提交按鈕。當使用者按下此按鈕時，將調用HTTP POST操作，使用者輸入的資料將發送到伺服器。

現在如果您按下該按鈕，不會發生任何事情。這是因為您還未編寫代碼來處理來自伺服器的回傳。接下來將完成此任務。

在代碼中,你需要知道執行GET還是POST方法,並進行處理,我們需要使用If(IsPost) 來判斷頁面是否執行了一個POST,如下代碼

@{
If(IsPost)
{
// Do something on the POST
}
}
當建form時,我們已經對一些元素進行了命名,比如(formName, formGenre, formYear),當提交時,這些元素的值會被提交到伺服器,比如類似 'formName=something', 'formGenre=something','formYear=something' and so on 等形式進行傳送,所以,需要一些變數去賦值擷取他們的值,這樣操作很簡單,如下代碼:

@{         var MovieName="";         var MovieGenre="";         var MovieYear="";         if(IsPost){           MovieName=Request["formName"];           MovieGenre=Request["formGenre"];           MovieYear=Request["formYear"];         }       }

這裡有三個變數 (MovieName, MovieGenre and MovieYear) ,等頁面被提交時,會被初始化,接下來我們需要添加代碼以開啟資料庫並且把資料添加進去.
添加到資料庫中
在之前一節中,我們已經寫了'SELECT'查詢語句,把資料從資料庫中提出出來,現在,我們需要使用'Insert'語句把資料添加到資料庫中,SQL INSERT 命令的文法如下:
INSERT INTO Table (Column1, Column2, ...ColumnN) VALUES (Value1, Value2, ... ValueN)
讓我們來看一下代碼:

@{      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);        }      }

我們建立了字串 SQLINSERT,Razor引擎允許格式化語句對參數進行賦值,@0, @1, @2分別代表MovieName, MovieGenre, MovieYear這三個參數的占非符.
db.Execute()之後我們在添加一條語句,一邊重新導向到datamovies.cshtml一邊查看添加後的結果:
Response.Redirect("datamovies.cshtml");
現在,我們添加一條資料如:

點擊 "Add Movie"按鈕,資料將會被添加到資料庫,我們來看一下效果:

以上就是WebMatrix進階教程(6)：建立添加資料網頁的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！

