1. 程式人生 > >ASP.NET MVC5(三):表單和HTML輔助方法

ASP.NET MVC5(三):表單和HTML輔助方法

http get 暴露 sta 選擇 .text 響應 pos 多行文本 二進制

表單的使用


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的比較:

區別項GETPOST
後退按鈕/刷新 無害 數據會被重新提交(瀏覽器應該告訴用戶數據會被重新提交)
書簽 可收藏為書簽 不可收藏為書簽
緩存 能被緩存 不能緩存
編碼類型 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>
  • 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特性,防止頁面直接被瀏覽。

ASP.NET MVC5(三):表單和HTML輔助方法