表單是包含輸入元素的容器,包含按鈕、復選框和文本框等元素,這些元素可以使用戶在頁面中輸入相應的數據,並把這些信息提交給服務器。
1. Action和Method
action中描述信息發往哪里,method告訴瀏覽器使用http get還是http post, 例如:
<form action="http://baidu.com/search">
<input type="text" name="textName">
<input type="submit" name="search">
</form>
注意:此時的form表單里沒有method特性,表單默認http get方式提交。
2. Post還是Get
1)Get是用來從服務器上獲得數據,而Post是用來向服務器上傳遞數據。
2)Get將表單中數據的按照variable=value的形式,添加到action所指向的URL后面,並且兩者使用“?”連接,而各個變量之間使用“&”連接;Post是將表單中的數據放在form的數據體中,按照變量和值相對應的方式,傳遞到action所指向URL。
3)Get是不安全的,因為在傳輸過程,數據被放在請求的URL中,而如今現有的很多服務器、代理服務器或者用戶代理都會將請求URL記錄到日志文件中,然后放在某個地方,這樣就可能會有一些隱私的信息被第三方看到。另外,用戶也可以在瀏覽器上直接看到提交的數據,一些系統內部消息將會一同顯示在用戶面前。Post的所有操作對用戶來說都是不可見的。
4)Get傳輸的數據量小,這主要是因為受URL長度限制;而Post可以傳輸大量的數據,所以在上傳文件只能使用Post(當然還有一個原因,將在后面的提到)。
5)Get限制Form表單的數據集的值必須為ASCII字符;而Post支持整個ISO10646字符集。
6)Get是Form的默認方法。
舉個例子:
<form action="/Main/Search" method="get"> <input name="q" type="text"/> <input type="submit" value="Search"/> </form>
下一步就是在MainController控制器中實現Search方法。下面的代碼塊對數據進行查詢:
public ActionResult Search(string q) { var data = storeDB.Albums .Include("Music") .Where(a => a.Title.Contains(q) || q == null) .Take(10); return View(data); }
這里的Search操作接收名為q的字符串參數,當q出現時,ASP.NET MVC框架會自動在查詢字符串中找到這個值;即便搜索表單發出的是POST請求而非GET請求,搜索引擎也會在提交的表單中找到這個值。
接下來由控制器告知ASP.NET MVC框架渲染視圖,現在就可以在Home視圖目錄下創建Search.cshtml視圖來顯示搜索結果:
@{ ViewBag.Title = "Search"; } <h2>Results</h2> <table> <tr> <th>Artist</th> <th>Title</th> <th>Price</th> </tr> @foreach(var item in Model) { <tr> <td>@item.Artist.Name</td> <td>@item.Title</td> <td>@String.Format("{0:c}", item.Price)</td> </tr> } </table>
3. Html輔助方法
HTML輔助方法是可以通過視圖的Html屬性調用的方法。相應的也可以通過Url屬性調用URL輔助方法,通過Ajax屬性調用AJAX輔助方法。所有這些方法都有一個共同的目標:使視圖編碼變得更容易。
大部分的輔助方法輸出HTML標記,尤其是HTML輔助方法都如此。例如,剛才提到的BeginForm輔助方法就是在為搜索表單而構建強壯的form標簽,但這並沒有太多的編碼:
@using (Html.BeginForm("Search", "Main", FormMethod.Get)) {
<input name="q" type="text"/> <input type="submit" value="Search"/>
}
3.1自動編碼
@Html.TextArea("text","hello <br/> MVC")
TextArea輔助方法中的第二個參數是要渲染的值。TextArea輔助方法將產生下面的標記:
<textarea cols="20"id="text" name="text" rows="2">hello < br/> MVC</textarea>
輸出值是經過HTML編碼的。默認的編碼可以幫助避免跨站點腳本攻擊(Cross Site Scripting,XSS)。
3.2 添加元素
一旦表單和驗證摘要設計完成,就可以在視圖中添加一些輸入元素讓用戶來輸入專輯信息。
@using(Html.BeginForm()) { @Html.ValidationSummary(excludePropertyErrors: true) <fieldset> <p> @Html.Label("GenreId") @Html.DropDownList("GenreId", ViewBag.Genres asSelectList) </p> <p> @Html.Label("Title") @Html.TextBox("Title", Model.Title) @Html.ValidationMessage("Title") <input type="submit" value="Save"/> </p> </fieldset> }
從上述代碼中可以看出,在視圖中有4個新的輔助方法:Label、DropDownList、TextBox和ValidationMessage。
1)Html.TextBox(和Html.TextArea)
TextBox輔助方法渲染type特性為text的input標簽。一般用TextBox輔助方法接收用戶自由形式的輸入。
@Html.TextBox("Title", Model.Title)
會生成如下所示的HTML標記:
<input id="Title" name="Title" type="text" value="For Those About To Rock We Salute You"/>
TextBox輔助方法的一個兄弟方法就是TextArea輔助方法。下面的代碼展示了使用TextArea方法渲染一個能夠顯示多行文本的<textarea>元素:
@Html.TextArea("text", "hello <br /> MVC")
上述代碼渲染的HTML標記如下:
<textarea cols="20" id="text" name="text" rows="2">hello <br /> MVC</textarea>
TextArea輔助方法的其他重載版本可以通過指定顯示的行數和列數控制文本區的大小:
@Html.TextArea("text", "hello <br /> MVC", 10, 80, null)
這行代碼將生成如下所示的HTML標記:
2) Html.Label
Label輔助方法將返回一個<label/>元素,並用String類型的參數決定渲染的文本和for特性值。這個輔助方法的一個重載版本允許獨立地設置for特性和要渲染的文本。在上面的代碼中,調用Html.Label(“GenreId”)將生成如下所示的HTML標記:
<label for="GenreId">Genre</label>
如果以前沒有使用過label元素,那么現在可能極想知道這個元素是否有存在的價值。其實,label的作用就是為其他輸入元素(比如文本輸入元素)顯示附加信息,這樣可以為用戶提供人性化的界面,從而增強應用程序的可訪問性。label渲染的文本不是“GenreId”(傳遞給輔助方法的字符串),而是“Genre”。
3)Html.DropDownList(和Html.ListBox)
DrowpDownList和ListBox輔助方法都返回一個<select />元素。DropDownList允許進行單項選擇,而ListBox支持多項選擇(通過在要渲染的標記中將multiple特性的值設置為multiple)。需要一個包含所有可選項的SelectListItem對象集合,其中每一個SelectListItem 對象中又包含Text、Value和Selected三個屬性。可以根據需要構建自己的SelectListItem對象集合,也可以使用框架中的SelectList或MultiSelectList輔助方法類來構建。
public ActionResult Edit(int id) { var album = storeDB.Albums.Single(a => a.AlbumId == id); ViewBag.Genres = storeDB.Genres .OrderBy(g => g.Name) .AsEnumerable() .Select(g => newSelectListItem { Text = g.Name, Value = g.GenreId.ToString(), Selected = album.GenreId == g.GenreId }); return View(album); }
4)Html.ValidationMessage
當ModelState字典中的某一特定字段出現錯誤時,可以使用ValidationMessage輔助方法來顯示相應的錯誤提示消息。可以用下面這行代碼顯示錯誤提示消息:
@Html.ValidationMessage("Title")
執行后生成的HTML標記如下:
<span class="field-validation-error" data-valmsg-for="Title" data-valmsg-replace="true">What a terrible name!</span>
這條消息只有當鍵值“Title”在模型狀態中出現錯誤時才會出現。也可以調用@Html.ValidationMessage的一個重寫方法來重寫視圖中的錯誤提示消息:
@Html.ValidationMessage("Title","Something is wrong with your titile")
上述代碼將渲染的HTML形式為:
<span class="field-validation-error" data-valmsg-for="Title" data-valmsg-replace="false">Something is wrong with your titile</span>