ASP.NET MVC5（三）：表單和HTML輔助方法

表單的使用

---

Action和Method特性

　　Action特性用以告知瀏覽器信息發往何處，因此，Action特性后面需要包含一個Url地址。這里的Url地址可以是相對的，也可以是絕對的。如下Form標簽向Bing的search頁面發送一個搜索詞（輸入元素的名稱為q）。

    <form action="http://www.bing.com/search">
        <input name="q" type="text" />
        <input type="submit" value="search" />
    </form>

　　Method特性可以告知瀏覽器使用HTTP POST還是使用HTTP GET，默認情況下表單發送的是HTTP GET請求。下面，我們分別介紹GET方法和POST方法。

GET方法 - 從指定的資源請求數據

• GET請求可被緩存
• GET請求保留在瀏覽器歷史記錄中
• GET請求可被收藏為書簽
• GET請求不應在處理敏感數據時使用
• GET請求有長度限制
• GET請求只應當用於取回數據

POST方法 - 向指定的資源提交要被處理的數據

• POST請求不會被緩存
• POST請求不會保留在瀏覽器歷史記錄中
• POST不能被收藏為書簽
• POST請求對數據長度沒有要求

以下是對HTTP GET和HTTP POST的比較：

區別項	GET	POST
后退按鈕/刷新	無害	數據會被重新提交（瀏覽器應該告訴用戶數據會被重新提交）
書簽	可收藏為書簽	不可收藏為書簽
緩存	能被緩存	不能緩存
編碼類型	application/x-www-form-urlencoded	application/x-www-form-urlencoded或multipart/form-data。為二進制數據使用多重編碼
歷史	參數保留在瀏覽器歷史中	參數不會保存在瀏覽器歷史中
對數據長度的限制	限制，當發送數據時，GET方法想URL添加數據；URL的長度是受限制的（最長2048個字符）	無限制
對數據類型的限制	只允許ASCII字符	沒有限制，也允許二進制數據
安全性	於 POST相比，GET安全性較差，因為數據時暴露在URL當中的	更安全，因為參數不會被保存在瀏覽器歷史或Web服務器日志當中
可見性	在URL中對所有人可見	數據不會顯示在URL當中

 

表單的使用

下面，我們使用表單來構建一個查詢產品的示例：
向上一篇《ASP.NET MVC5（二）：控制器、視圖與模型》模型一節中的示例添加5種產品

修改ProductsController，添加Search和Result方法：

    public ActionResult Search()
    {
        return View();
    }

    public ActionResult Result(string productName)
    {
        var products = db.Products.Where(a => a.ProductName == productName);
        return View(products);
    }

並添加相應的視圖，代碼如下

Search.cshtml（空模板）：
注意：這里我們使用了Form表單

@{
    ViewBag.Title = "Search";
}

<h2>Search</h2>

@using (Html.BeginForm("Result", "Products", FormMethod.Get))
{
    <input type="text" name="productName" class="form-control" />
    <br />
    <input type="submit" value="search" class="btn btn-default" />
}

Result.cshtml（List模板）：

@model IEnumerable<MyFirstMvcProject.Models.Product>

@{
    ViewBag.Title = "Result";
}

<h2>Result</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.ProductName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Description)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Price)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.ProductName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Description)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
    </tr>
}
</table>

啟動項目，將URL定位到/Products/Search，效果如下：

在文本框中輸入MateBookX，點擊search按鈕，得到查詢結果。

通過以上示例，我們已經成功的使用表單實現了一個產品查詢的功能。

HTML輔助方法

---

　　上一節中，已經涉及到Html.BeginForm輔助方法的使用，使用輔助方法的目的很明確，就是使視圖編碼變得更容易。

輔助方法簡介

　　每一個Razor視圖都繼承了它們基類的Html屬性，Html屬性的類型是System.Web.Mvc.HtmlHelper<T>，這里的T是一個泛型類型的參數，代表傳遞給視圖的模型類型。這個屬性提供了一些實例方法，然而，如BeginForm等大多數輔助方法都是通過擴展方法實現的,ASP.NET MVC所有的HtmlHelper擴展方法都在命名空間System.Web.Mvc.Html中。

在智能感知窗口中，左邊有個向下箭頭就說明這個方法是一個擴展方法。

下面，我們將介紹一些常用的輔助方法：

• Html.TextBox
  TextBox輔助方法渲染一個type特性為text的input標簽。
  調用方法：@Html.TextBox("Title","This is Value")
  生成HTML標記：<input id="Title" name="Title" type="text" value="This is Value" />
  
• Html.TextArea
  TextArea渲染一個能夠顯示多行文本的<textarea>元素。
  調用方法：@Html.TextArea("text","Hello ! This is Text Area !")
  生成HTML標記：<textarea cols="20" id="text" name="text" rows="2"> Hello ! This is Text Area !</textarea>
• Html.Label
  Label輔助方法返回一個<label/>元素，並使用String類型的參數來決定渲染的文本。
  調用方法：@Html.Label("Name")
  生成HTML標記：<label for="Name">Name</label>
  Name

• Html.DropDownList和Html.ListBox
  DropDownList和ListBox輔助方法都返回一個<select/>元素。DropDownList允許進行單項選擇，而ListBox支持多項選擇。修改ProductsController中的Search方法

  public ActionResult Search()
  {
      var products = db.Products.Single(a => a.ProductName == "Apple Pencil");
      ViewBag.Products = new SelectList(db.Products.OrderBy(g => g.Price), "Id", "ProductName", products.Id);
      return View();
  }

  並在相應的View中添加輔助方法DropDownList，效果如下：

  @Html.DropDownList("Products", String.Empty)

  

• Html.ValidationMessage
  當ModelState字典中的某一特定字段出現錯誤時，可以使用ValidationMessage輔助方法來顯示相應的錯誤提示信息。修改ProductsController中的Search方法

  public ActionResult Search()
  {
      var products = db.Products.Single(a => a.ProductName == "Apple Pencil");
      ViewBag.Products = new SelectList(db.Products.OrderBy(g => g.Price), "Id", "ProductName", products.Id);
      ModelState.AddModelError("Title", "Support domestic products!");
      return View();
  }

  在相應的視圖中添加下面這行代碼顯示錯誤提示信息，效果如下：

  @Html.ValidationMessage("Title")

  

 

強類型輔助方法

　　如果不習慣使用字符串字面值從視圖數據中提取值的話，可以使用ASP.NET MVC提供的各種強類型輔助方法。使用強類型輔助方法，只需要為其傳遞一個lambda表達式來指定要渲染的模型屬性。我們以上一節中的DropDownList為示例，修改View中的代碼，首先，在視圖頂部輸入如下所示的代碼：

@model MyFirstMvcProject.Models.Product

使用下面的代碼重寫DropDownList：

@Html.DropDownListFor(m => m.Id, ViewBag.Products as SelectList)

效果如下：

注意，強類型的輔助方法名稱除了有For后綴外，與先前介紹的輔助方法名相同。使用強類型輔助方法的優點是能夠獲取智能感知以及編譯時檢查。

 

渲染輔助方法

　　渲染輔助方法可以在應用程序中生成指向其他資源的鏈接，也可以構建被稱為部分視圖的可重用UI片段。

• Html.ActionLink和Html.RouteLink
  ActionLink輔助方法能夠渲染一個超鏈接，指向另一個控制器。如下是Products/Details視圖中的一段示例，如果沒有指定控制器，就返回當前視圖對應的控制器：

  @Html.ActionLink("Back to List", "Index")

  RouteLink輔助方法只可以接受路由名稱，而不能接受控制器名稱和操作名稱。

  @Html.RouteLink("Back to List", new { Action = "Index"})

• Url.Action、Url.RouteUrl和Url.Content
  URL輔助方法與HTML的ActionLink和RouteLink輔助方法相似，但它不以HTML標記的形式返回構建的URL，而是以字符串的形式返回這些URL。
  RouteUrl輔助方法與RouteLink一樣，只接受路由名稱，而不接受控制器名稱和操作名稱。
  Content輔助方法可以把應用程序的相對路徑轉換成絕對路徑。

• Html.Partial和Html.RenderPartial
  Partial和RenderPartial都是渲染一個部分視圖，都不使用Controller，Partial回傳一個MvcHtmlString，所以可以把結果保存在變量之中，RenderPartial沒有返回值，直接寫入響應輸出流當中。

  @Html.Partial("PartialViewName")
  @{ Html.RenderPartial("PartialViewName"); }

• Html.Action和Html.RenderAction
  Action和RenderAction類似於Partial和RenderPartial，但這兩個方法都用到Controller之后再回傳一個頁面，可以在Controller方法上添加ChildActionOnly特性，防止頁面直接被瀏覽。