iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 7
0
Modern Web

從Asp.Net MVC5的起跑點認識現代網站系列 第 7

Day7_Razor進階之表單欄位

強行別

強型別(Strong Type) 是一種觀念,他沒有明確的定義,而我認為是一種強行指派變數型態的開發方式,這樣帶來什麼好處?

  • 很好Debug,因為你資料明確定義格式,如果不一致,很快就可以從錯誤訊息中看出資料格式有誤,但如果一開始設定弱型別則不好一眼看出其中的問題,有時後還必須透過中斷點慢慢找問題。
  • 執行速度較快

http://ithelp.ithome.com.tw/upload/images/20161222/20103808lMNtEYV5uN.png

進入Action後抓到Bind的資料,Create(參數名稱必須與View Id一致)

http://ithelp.ithome.com.tw/upload/images/20161222/20103808oQe31hI3mC.png

弱型別/強行別之常用的表單輸入欄位

  • TextBox/TextBoxFor
  • TextArea/TextAreaFor
  • CheckBox/CheckBoxFor
  • RadioButton/RadioButtonFor
  • DropDownList/DropDownListFor
  • ListBox/ListBoxFor
  • Hidden/HiddenFor
  • Password/PasswordFor
  • Display/DisplayFor
  • Label/LabelFor
  • Editor/EditorFor
  1. TextBoxFor 透過model去Binding ProductName這個屬性
    @Html.TextBoxFor(model => model.ProductName, new { @class = "form", @placeholder = "TextBoxFor" })
    則會顯示
    <input class="form" id="ProductName" name="ProductName" placeholder="TextBoxFor" type="text" value="">

  2. EditorFor
    @Html.EditorFor(model => model.ProductName, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.ProductName, "", new { @class = "text-danger" })
    在這看到ValidationMessageFor是用來驗證EditFor所輸入的資料格式是否符合再Model設定的資料格式(在下一篇會提到)。

  3. DropdownListFor
    @Html.DropDownList("CompanyId", null, htmlAttributes: new { @class = "form-control" })
    在Controller中,new一個SelectList(抓取的資料,對應的編號,顯示名稱)清單,再透過ViewBag將資料帶入View做使用,所以上述的CompanyId就會抓到要使用的SelectListItem。
    public ActionResult Create() { ViewBag.CompanyId = new SelectList(db.Company, "CompanyId", "Name"); return View(); }

  4. ActionLink(文字,Action):一個文字超連結
    @Html.ActionLink("Create New", "Create")
    在HTML變成
    <a href="/Products/Create">Create New</a>
    或是要客製化(文字,Action,Controller,路由值,HtmlAttribute)
    @Html.ActionLink("Create", "Create", "Products", null, new { @style = "font-weight:bold;font-size:2em;color:green;" })

  5. 透過@model可以綁定這個View所需要使用的Model,但一個View只能綁定一個Model
    @model IEnumerable<MVCProject.Models.Product>

6.using 引入,如下引入整個Model那麼上述的code就變成
@model IEnumerable<Product>
@using 專案名稱.Models

  1. @Html.AntiForgeryToken(),這個是用來防止跨平台與Day5提到的Controller中使用**[ValidateAntiForgeryToken]**防止 CSRF (Cross-Site Request Forgery) 跨站偽造請求的攻擊,是對應的。
  2. @using (Html.BeginForm()),這方法是套一個Form表單,裡面可以放強行別的欄位讓最後submit時候,會觸發Controller的Action,如上面結果圖一樣,當欄位輸入完成後,點選Submit會出發Create(Product)的Action Method
@using (Html.BeginForm())
{
    @Html.TextBoxFor(model => model.Name)
    <input type="submit" />
}

上一篇
Day6_Razor語法初探
下一篇
Day8_Model驗證欄位與自訂驗證
系列文
從Asp.Net MVC5的起跑點認識現代網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言