1. 程式人生 > >.net MVC之表單的使用

.net MVC之表單的使用

表單是包含輸入元素的容器,包含按鈕、複選框和文字框等元素,這些元素可以使使用者在頁面中輸入相應的資料,並把這些資訊提交給伺服器。

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 &lt; br/&gt; 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 &lt;br /&gt; 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>