1. 程式人生 > >12、ASP.NET MVC入門到精通——HtmlHelper

12、ASP.NET MVC入門到精通——HtmlHelper

HtmlHelper:是為了方便View的開發而產生

HtmlHelper的演變

普通首頁超級連結為:<a href="/home/index">首頁</a>

當路由改變時候則可能需要修改為:<a href="/home/index1">首頁</a>,如果專案裡面有很多超級連結那需要改動很多地方

路由改變也不受影響:<a href="<%=Url.Action("Index","Home")%>">首頁</a>

因為沒有智慧感知,除錯不方便,所以應運而生了:Html.Action("Home","Index")

HtmlHelper之Action、表單標籤

ActionLink() 

動態生成超連結:根據路由規則,生成對應的 html 程式碼。

//1.註冊路由資訊
routes.MapRoute(
   name: "Test",
   url: "{controller}_yujie/{action}.html/{id}",
   defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
 );
//2.在檢視上建立超連結
<a href="/Home/Index">
網站首頁</a><br /> @Html.ActionLink("網站首頁","Index", "Home") //3.在瀏覽器看到的生成結果 <a href="/Home/Index">網站首頁</a><br /> <a href="/Home_yujie/Index.html">網站首頁</a>

HtmlHelper – Form

方式一:{}   強烈推薦

@using(Html.BeginForm("HandleForm", "Home")) 
{

}

方式二:Begin   End

@Html.BeginForm()
@{Html.EndForm();}

//1.在檢視中 建立 表單

@using (Html.BeginForm("Add", "home", FormMethod.Post, new { id="form1" }))
{ 

}

//2.生成的html程式碼

<form action="/home/Add" id="form1" method="post"> </form>
//直接在檢視中 @ 呼叫有返回值的方法,就已經相當於是將返回值寫入Response了
@Html.Label("UserName")
//相當於下面程式碼
@{
    Response.Write(Html.Label("UserName"));
}

HtmlHelper –弱型別與強型別方法

Lable()等生成html標籤方法

弱型別方法:指定name和value

 注:所有的方法都預設去檢視的Model屬性所儲存的物件中查詢匹配屬性

  using System.ComponentModel;
//1.為實體類新增特性DisplayName public class User { [DisplayName("使用者名稱")] public string UserName { get; set; } }
    //2.在Action方法中,為檢視 的 Model 設定值
    public ActionResult Index()
    {
         return View(new User { UserName = "郭靖" });
    }

//3.在檢視中,通過html的幫助方法,生成 html 標籤,同時指定,要讀取的 屬性名

@Html.Label("UserName")

//4.生成對應的html標籤,並自動讀取了對應屬性的DisplayName裡的文字。

<label for="UserName">使用者名稱</label>

其他控制元件方法也一樣

強型別方法:通過lambda表示式指定模型屬性(@model)

強型別方法,直接通過 lambda表示式,去檢視的Model屬性物件中查詢對應的屬性資料

  @Html.TextBoxFor(m=>m.UserName); //1.檢視上呼叫方法
   <input type="text" id="UserName" name="UserName" value="郭靖"/> //2.生成的html程式碼

超強強型別方法(通過屬性的DataType特性生成html標籤)

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
        /// <summary>
        /// 1.在實體類中為Remark屬性設定DataType特性,指定為多行文字框
        /// </summary>
        [DataType(DataType.MultilineText)]
        public string Remark { get; set; }

//2.檢視上 自動根據model物件裡屬性儲存的實體類屬性的[DataType] 特性裡指定的型別生成對應的html標籤

@Html.EditorFor(a=> a.Remark)

/3.生成html程式碼

<textarea id="Remark" class="text-box multi-line" name="Remark"></textarea>

HtmlHelper – LabelFor & 模型元資料

模型類的元資料包括:屬性(名稱和型別) 與 特性包含的值。

為實體類屬性設定 DisplayName 特性:

[DisplayName("使用者名稱")]
public string UserName{ get; set; }

在 新增/修改 頁面上顯示某個屬性的標籤說明:

@Html.LabelFor(model => model.UserName)

生成Html原始碼:<label for="UserName">使用者名稱</label>

HtmlHelper – Display / Editor 模型元資料

@Html.Editor / @Html.Display 可以通過讀取特性值生成HTML:

        [DataType(DataType.MultilineText)]
        [DisplayName("備註")]
        public string Remark { get; set; }

控制器中:

        public ActionResult Index()
        {
            //ViewBag.UserName = "小李飛刀";
            return View(new User { UserName = "郭靖",Remark="武林高手" });
        }

在 新增/修改 頁面上顯示某個屬性的input標籤:

<div>@Html.DisplayFor(model => model.Remark):@Html.EditorFor(a=> a.Remark)</div>

生成Html原始碼:

<div>武林高手:<textarea id="Remark" class="text-box multi-line" name="Remark">武林高手</textarea></div>

 支援強型別(1):Html.xxFor

這種方式生成的html控制元件的name和指定實體對應的屬性名一致

弱型別(2):Html.xx(“”)

<%: Html.TextBox("Id")%>

DropDownList

var items = new List<SelectListItem>() 
{ 
    (new SelectListItem() {Text = "001", Value = "1", Selected = false}), 
    (new SelectListItem() {Text = "002", Value = "2", Selected = false}) 
}; 

將items值給ViewData: ViewData["items"] = items;
在檢視中這樣使用: @Html.DropDownList("items")
CheckBox & RadioButton & Hidden & Password

@Html.CheckBox(“bookType”) 在Controller獲取提交的值為(true,false)未操作  true選擇  false不選擇三種
RadioButton第一個引數為控制元件名字(名字相同說明為同一個Group),返回值為第二個引數(紅色部分)

@Html.RadioButton("favColor", "Blue", true)Blue <br />
@Html.RadioButton("favColor", "Purple", false) Purple <br />
@Html.RadioButton("favColor", "Red", false) Red <br />
@Html.RadioButton("favColor2", "Orange", false) Orange <br />
@Html.RadioButton("favColor2", "Yellow", false) Yellow <br />
@Html.RadioButton("favColor2", "Brown", false) Brown <br />
@Html.RadioButton("favColor2", "Green", false) Green

HtmlHelper –RenderPartial

從分部視圖裡取資料

@Html.RenderPartial( "Par", ViewData.Model );
@Html.RenderPartial( "~/Views/Home/Par.cshtml ", ViewData.Model );

直接將使用者控制元件嵌入到介面上
這個方法通過接受分部檢視的檔名以及相應的可變化的資料進行的呈現可重用 分部檢視 顯示到具體的頁面中
區別:
    佈局頁面(模板頁)子頁,是把自己的內容填到 佈局頁面上去;
    分部檢視:供某個頁面過來取分部檢視的內容。

HtmlHelper類 - RenderAction

在檢視中請求某個 Action方法 (違反了mvc設計)

 @{Html.RenderAction("Test");}

允許你直接呼叫某個Action,並把返回的結果直接顯示在當前呼叫的View中

兩者的相同點
RenderPartial和RenderAction通常都被用來顯示一個功能相對獨立的“塊”,比如說顯示選單或者導航條。 兩者輸出的結果都被作為呼叫的View的一部分顯示。
兩者的不同點
RenderPatial的資料來自於呼叫的View,而RenderAction來自自己。
RenderAction會發起一個新的Request,而RenderPatial不會。
如何選擇
根據兩者不同點中的第二點,由於RenderAction會呼叫一個新的Action方法,而Asp.net Mvc中Action是最小的快取單位,因此如果某一個“塊”的資料比較固定,不會因為訪問者的不同而發生變化,那麼這時就是使用 RenderAction的時候了。 題外話,對於RenderAction會發起一個新的Request,感覺對呼叫頁面的流程有點破壞。一個View在顯示的時候,自己又發起一個 Request去獲取資料來顯示,顯然有點破壞了作為一個View的原則:A View should only know how to render, but not what to render!

HtmlHelper擴充套件方法

擴充套件方法:

1.方法所在的類必須是靜態的

2.方法也必須是靜態的

3.方法的第一個引數必須是你要擴充套件的那個型別,比如你要給int擴充套件一個方法,那麼第一個引數就必須是int。

4.在第一個引數前面還需要有一個this關鍵字。
在MVC中擴充套件HtmlHelper後,要在使用擴充套件方法的頁面上引用擴充套件方法所在的名稱空間
     例如: @using Ebuy.Models

    public class User
    {
        public string Name { get; set; }
    }
    public static class UserHelper
    {
        public static string UserShow(this HtmlHelper<User> helper)
        {
            var user = helper.ViewData.Model;
            if (user.Name == "zouqj")
            {
                return string.Format("<div>我是{0}</div>",user.Name);
            }
            else
            {
                return "<div>找不到</div>";
            }
        }
    }

控制器

  public ActionResult Index()
        {
            ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
            var model = new User { Name="zouqj"};
            return View(model);
        }

View呼叫

@model Ebuy.Models.User
@using Ebuy.Models
@Html.Raw(Html.UserShow()

介面顯示:

我是zouqj

相關推薦

12ASP.NET MVC入門精通——HtmlHelper

HtmlHelper:是為了方便View的開發而產生 HtmlHelper的演變 普通首頁超級連結為:<a href="/home/index">首頁</a> 當路由改變時候則可能需要修改為:<a href="/home/index1">首頁</a&

19ASP.NET MVC入門精通——Unity

一、IOC介紹   IOC(Inversion of Control),中文譯為控制反轉,又稱為“依賴注入”(DI =Dependence Injection)   IOC的基本概念是:不建立物件,但是描述建立它們的方式。在程式碼中不直接與物件和服務連線,但在配置檔案中描述哪一個元件需要哪一項服務。容器負

2ASP.NET MVC入門精通——Entity Framework入門

實體框架(Entity Framework)簡介 簡稱EF 與ADO.NET關係 ADO.NET Entity Framework 是微軟以 ADO.NET 為基礎所發展出來的物件關係對應 (O/R Mapping) 解決方案,早期被稱為 ObjectSpace,最新版本是EF7【CodeOnly功能得

6ASP.NET MVC入門精通——ASP.Net的兩種開發方式

目前,ASP.NET中兩種主流的開發方式是:ASP.NET Webform和ASP.NET MVC。從下圖可以看到ASP.NET WebForms和ASP.NET MVC是並行的,也就是說MVC不會取代WebForms(至少目前是這樣)而是多了一個選擇,Webform在短期之內不會消亡,儘管存在許多缺點,

8ASP.NET MVC入門精通——View(檢視)

View檢視職責是向用戶提供介面。負責根據提供的模型資料,生成準備提供給使用者的格式介面。 支援多種檢視引擎(Razor和ASPX檢視引擎是官方預設給出的,其實還支援其它N種檢視引擎,甚至你自己都可以寫一套檢視引擎) View和Action之間資料傳遞(前後臺數據傳遞)   弱型別 View

5ASP.NET MVC入門精通——NHibernate程式碼對映

使用的是xml進行orm對映,那麼這一篇就來講下程式碼對映。 新建一個抽象的資料化持久基類AbstractNHibernateDao.cs /// <summary> /// 資料持久化基本 /// </summary> ///

9ASP.NET MVC入門精通——Controller(控制器)

Controller主要負責響應使用者的輸入。主要關注的是應用程式流,輸入資料的處理,以及對相關檢視(View)輸出資料的提供。 繼承自:System.Web.Mvc.Controller 一個Controller可以包含多個Action. 每一個Action都是一個方法, 返回一個Act

22ASP.NET MVC入門精通——搭建專案框架

前面的章節,說了ASP.NET MVC專案中常用的一些技術和知識點,更多的是理論上面的東西,接下來,我將通過一個簡單的OA專案來應用我們之前涉及到的一些技術,為了兼顧初學者,所以我儘量把操作步驟說得足夠詳細。(本來想用VS2015來演示MVC5開發的,無奈家裡的筆記本是11年2月份的老爺機了,一直未曾捨得

7ASP.NET MVC入門精通——第一個ASP.NET MVC程式

開發流程 新建Controller 建立Action 根據Action建立View 在Action獲取資料並生產ActionResult傳遞給View。 View是顯示資料的模板 Url請求→Controller.Action處理→View響應 url請求→Controller.Ac

3ASP.NET MVC入門精通——Entity Framework增刪改查

這裡我接上講Entity Framework入門。從網上下載Northwind資料庫,新建一個控制檯程式,然後重新新增一個ado.net實體資料模型。 EF中操作資料庫的"閘道器"(操作上下文) DBContext封裝 .NET Framework 和資料庫之間的連線。此類用作“建立”、“讀取”、“更

11ASP.NET MVC入門精通——AspnetMVC分頁

說起分頁,這基本上是我們Web開發中遇見得最多的場景,沒有之一,可即便如此,要做出比較優雅的分頁還是需要技巧的。這裡我先說一種ASP.NET MVC中很常見的一種分頁的實現方式,很low,但是很多公司的專案就是這麼用的,我現在公司的專案就是也是,有時候面對公司專案屎一樣的使用者體驗和雜亂的程式碼,真是恨不

13ASP.NET MVC入門精通——MVC請求管道

ASP.NET MVC的請求管道和ASP.NET請求管道基本上一模一樣,如果你對ASP.NET請求管道十分熟悉的話,你只要關注一下不同點。看懂下面兩張圖,你就基本上明瞭了,這兩張圖是從鄒華棟部落格上面取的。(說明:我不是給傳智帶鹽的,這圖確實畫得通俗易懂)不明白的地方,用reflector工具檢視MVC的

25ASP.NET MVC入門精通——Spring.net-業務層倉儲

上一節,我們已經把專案框架的雛形搭建好了,那麼現在我來開始業務實現,在業務實現的過程當中,不斷的來完善我們現有的框架。 1、假設我們來做一個使用者登入的業務 那麼我們可以現在IDAL專案中定義的的介面IOu_UserInfoDAL,注意是部分類partial,為了方便管理,把這些擴充套件的部分介面都統

20ASP.NET MVC入門精通——WebAPI

微軟有了Webservice和WCF,為什麼還要有WebAPI? 用過WCF的人應該都清楚,面對那一大堆複雜的配置檔案,有時候一出問題,真的會叫人抓狂。而且供不同的客戶端呼叫不是很方便。不得不承認WCF的功能確實非常強大,可是有時候我們通常不需要那麼複雜的功能,只需要簡單的僅通過使用Http或Https

17ASP.NET MVC入門精通——Spring.net入門

Spring.NET環境準備 下載後解壓   Spring.NET-1.3.2.7z:這個裡面有我們需要用到的所有東西。 Spring.NET-1.3.2.exe:安裝檔案 Spring.NET-1.3.2-API.chm:幫助文件 NHibernate 3.2 的下載地址:   

26ASP.NET MVC入門精通——後臺管理區域及分離Js壓縮cssjquery擴充套件

有好一段時間沒更新博文了,最近在忙兩件事:1、看書,學習中...2、為公司年會節目做準備,由於許久沒有練習雙截棍了,難免生疏,所以現在臨時抱佛腳。深圳最近的天氣反常,許多人感冒了,我也成為其中之一,大家注意身體... 這一篇,我來簡單的講一下接下來專案中會用到的一些雜七雜八的技術。 區域及分離

21ASP.NET MVC入門精通——ASP.NET MVC4優化

刪除無用的檢視引擎 預設情況下,ASP.NET MVCE同時支援WebForm和Razor引擎,而我們通常在同一個專案中只用到了一種檢視引擎,如Razor,那麼,我們就可以移除掉沒有使用的檢視引擎,提高View檢視的檢索效率。在沒有刪除WebForm引擎之前,檢索控制器中不存在的檢視時,我們可以從下圖看

23ASP.NET MVC入門精通——業務層和資料層父類及介面-T4模板

在上一篇中,我們已經把專案的基本框架搭起來了,這一篇我們就來實現業務層和資料層的父介面及父類。 1、我們先來定義一個業務層父介面IBaseBLL.cs using System; using System.Collections.Generic; using System.Linq; u

1ASP.NET MVC入門精通——新語法

在學習ASP.NET MVC之前,有必要先了解一下C#3.0所帶來的新的語法特性,這一點尤為重要,因為在MVC專案中我們利用C#3.0的新特性將會大大的提高我們的開發效率,同時,在MVC專案中你將到處可以看到C#3.0新特性的身影。其本質都是“語法糖”,由編譯器在編譯時轉成原始語法。 目錄 自動屬

10ASP.NET MVC入門精通——Model(模型)和驗證

模型就是處理業務,想要儲存、建立、更新、刪除的物件。 註解(通過特性實現) DisplayName Required StringLength(20,MinimumLength=2) DataType(System.ComponentModel.DataAnnotations.Dat