MVC中HtmlHelper用法大全參考

来源:http://www.cnblogs.com/Alice-Wang/archive/2016/03/04/5243026.html
-Advertisement-
Play Games

MVC中HtmlHelper用法大全參考 解析MVC中HtmlHelper控制項7個大類中各個控制項的主要使用方法（1） 2012-02-27 16:25 HtmlHelper類在命令System.Web.Mvc.Html之中，主要由7個靜態類組成，它們分別是FormExtensions類，InputE


MVC中HtmlHelper用法大全參考

 

解析MVC中HtmlHelper控制項7個大類中各個控制項的主要使用方法（1） 2012-02-27 16:25

HtmlHelper類在命令System.Web.Mvc.Html之中，主要由7個靜態類組成，它們分別是FormExtensions類，InputExtensions類，LinkExtensions類，SelectExtensions類，TextExtensions類，ValidationExtensions類，RenderPartialExtensions類。

為了方便開發者使用HtmlHelper控制項，在視圖ViewPage類中設置了一個屬性Html它就是HtmlHelper類型。

1.FormExtensions類

定義了3中類型的擴展方法BeginForm,BeginRouteForm,EndForm。

(1) BeginForm (實現表單定義的開始部分)

重載方法有13個：

BeginForm（）；

BeginForm（Object routeValues）；

BeginForm(RouteValueDictionary routeValues);

BeginForm(string actionName,string controllerName);

BeginForm(string actionName,string controllerName,object routeValues);

BeginForm(string actionName,string controllerName,RouteValueDictionary routeValues);

BeginForm(string actionName,string controllerName,FormMethod method);

BeginForm(string actionName,string controllerName,object routeValues,FormMethod method);

BeginForm(string actionName,string controllerName,RouteValueDictionary routeVaues,FormMethod method);

BeginForm(string actionName,string controllerName,FormMethod method,object htmlAttributes);

BeginForm(string actionName,string controllerName,FormMethod method,IDictionary<string,object> htmlAttributes);

BeginForm(string actionName,string controllerName,object routeValues,FormMethod method,object htmlAttributes);

BeginForm(string actionName,string controllerName,RouteValueDictionary routeValues,FormMethod method,IDictionary<string,object> htmlAttributes);

對於第二個重載方法可以設置如下：

Html.BeginForm(new{action="action",controller="actroller",id="2"});

在上述代碼中，設置了路由值的一個實例化對象，輸出的HTML語句是：

<form action="actroller/action/2" method="post"/>

對於最後一個第十三個方法的最後一個參數是實例化對象設置相關屬性的值例如class,width等。

(2)BeginRouteForm （主要實現表單定義的開始部分，以路由的方法設置action的值）

有12個重載方法：

BeginRouteForm（object routeValues）;

BeginRouteForm（RouteValueDictionary routeValues）;

BeginRouteForm（string routeName）;

BeginRouteForm（string routeName,object routeValues）;

BeginRouteForm（string routeName,RouteValueDictionary routeValues）;

BeginRouteForm（string routeName,FormMethod method）;

BeginRouteForm（string routeName,object routeValues,FormMethod method）;

……

對於第一個重載方法：

Html.BeginRouteForm(new {action="action"});

<form action="Home/action" method="post"/>Home是頁面所在的目錄

BeginForm與BeginRouteForm的區別就在於第一個的action是action第二個的action是Home/action

（3）EndForm（實現表單的定義的結束部分）

Html.EndForm();

相當於</Form>

 

InputExtensions類有5種類型的擴展方法，可在視圖中設置checkBox，hidden，password，radioButton,textBox控制項。

（1）CheckBox 實現覆選框控制項有6個重載方法

CheckBox（string name）;

CheckBox（string name,bool isChecked）;

CheckBox（string name,bool isChecked,object htmlAttributes）;

CheckBox（string name,object htmlAttributes）;

CheckBox（string name,Idictionary<string,object> htmlAttributes）;

CheckBox（string name,bool isChecked,Idictionary<string,object> htmlAttributes）;

設置覆選框的實現代碼：

<%=Html.BeginForm("CheckBox","Home") %>

<fieldset>

<legend>設置字體：</lengend>

<%=Html.CheckBox("MyCheckBox1",true,new{id="checkBox1"})%>

<label for="checkBox1">黑體</label>

<%=Html.CheckBox("MyCheckBox2",false,new{id="checkBox2"})%>

<label for="checkBox1">斜體</label>

<br/><br/>

<input type="submit" value="Submit"/>

</fieldset>

<%Html.EndForm();%>

運行上述代碼，上述覆選框的設置代碼對應的HTML語句：

<input checked="checked" id="checkBox1" name="MyCheckBox1" type="CheckBox" value="true"/>

<input name="MyCheckBox1" type="hidden" value="false"/>

<input id="checkBox2" name="MyCheckBox2" type="CheckBox" value="false"/>

<input name="MyCheckBox2" type="hidden" value="false"/>

在後臺檢索checkBox

public ActionResult CheckBox (FormCollection formCollection)

{

bool MyCheckBox1=formCollection[0].Contains("true");//檢索第一個覆選框是否被選中

bool MyCheckBox2=formCollection["MyCheckBox2"].Contains("true");//檢索名字是MyCheckBox2的覆選框是否倍選中

ViewData["CheckBox1"]=MyCheckBox1;

ViewData["CheckBox2"]=MyCheckBox2;

return View();

}

（2）Hidden 表單中的隱藏數值，有4個重載方法。

Hidden(string name);

Hidden(string name,object value);

Hidden(string name,object value，object htmlAttributes);

Hidden(string name,object value,Idictionary<string,object> htmlAttributes);

eg:

Html.Hidden("testName");對應輸出的Html語句如下：

<input id="testName" name="testName" type="hidden" value=""/>

(3)Password 主要是輸入密碼的文本框，有4個重載方法。

Hidden(string name);

Password (string name,object value);

Password (string name,object value，object htmlAttributes);

Password (string name,object value,Idictionary<string,object> htmlAttributes);

eg:

Html.Password ("MyPwd");對應輸出的Html語句如下：

<input id="MyPwd" name="MyPwd" type="password" />

--------------------------------------------------------------------------------------------

 

 

HTML擴展類的所有方法都有2個參數：
以textbox為例子
public static string TextBox( this HtmlHelper htmlHelper, string name, Object value, IDictionary<string, Object> htmlAttributes )
public static string TextBox( this HtmlHelper htmlHelper, string name, Object value, Object htmlAttributes )
這2個參數代表這個html標簽的屬性集合。使用方法如下。

1.ActionLink
<%=Html.ActionLink("這是一個連接", "Index", "Home")%>
帶有QueryString的寫法
<%=Html.ActionLink("這是一個連接", "Index", "Home", new { page=1 },null)%>
<%=Html.ActionLink("這是一個連接", "Index", new { page=1 })%>
有其它Html屬性的寫法
<%=Html.ActionLink("這是一個連接", "Index", "Home", new { id="link1" })%>
<%=Html.ActionLink("這是一個連接", "Index",null, new { id="link1" })%>
QueryString與Html屬性同時存在
<%=Html.ActionLink("這是一個連接", "Index", "Home", new { page = 1 }, new { id = "link1" })%>
<%=Html.ActionLink("這是一個連接", "Index" , new { page = 1 }, new { id = "link1" })%>

生成結果為：
<a href="/">這是一個連接</a>
帶有QueryString的寫法
<a href="/?page=1">這是一個連接</a>
<a href="/?page=1">這是一個連接</a>
有其它Html屬性的寫法
<a href="/?Length=4" id="link1">這是一個連接</a>
<a href="/" id="link1">這是一個連接</a>
QueryString與Html屬性同時存在
<a href="/?page=1" id="link1">這是一個連接</a>
<a href="/?page=1" id="link1">這是一個連接</a>

2.RouteLink
跟ActionLink在功能上一樣。
<%=Html.RouteLink("關於", "about", new { })%>
帶QueryString
<%=Html.RouteLink("關於", "about", new { page = 1 })%>
<%=Html.RouteLink("關於", "about", new { page = 1 }, new { id = "link1" })%>

生成結果：
<a href="/about">關於</a>
<a href="/about?page=1">關於</a>
<a href="/about?page=1" id="link1">關於</a>
3.Form 2種方法
<%using(Html.BeginForm("index","home",FormMethod.Post)){%>
<%} %>

<%Html.BeginForm("index", "home", FormMethod.Post);//註意這裡沒有=輸出%>
<%Html.EndForm(); %>

生成結果：
<form action="/home/index" method="post"></form>
4.TextBox , Hidden ,
<%=Html.TextBox("input1") %>
<%=Html.TextBox("input2",Model.CategoryName,new{ @style = "width:300px;" }) %>
<%=Html.TextBox("input3", ViewData["Name"],new{ @style = "width:300px;" }) %>
<%=Html.TextBoxFor(a => a.CategoryName, new { @style = "width:300px;" })%>

生成結果：

<input id="input1" name="input1" type="text" value="" />
<input id="input2" name="input2" style="width:300px;" type="text" value="Beverages" />
<input id="input3" name="input3" style="width:300px;" type="text" value="" />
<input id="CategoryName" name="CategoryName" style="width:300px;" type="text" value="Beverages" />

5.TextArea
<%=Html.TextArea("input5", Model.CategoryName, 3, 9,null)%>
<%=Html.TextAreaFor(a => a.CategoryName, 3, 3, null)%>

生成結果：
<textarea cols="9" id="input5" name="input5" rows="3">Beverages</textarea>
<textarea cols="3" id="CategoryName" name="CategoryName" rows="3">Beverages</textarea>

6.CheckBox
<%=Html.CheckBox("chk1",true) %>
<%=Html.CheckBox("chk1", new { @class="checkBox"}) %>
<%=Html.CheckBoxFor(a =>a.IsVaild, new { @class = "checkBox" })%>

生成結果：

<input checked="checked" id="chk1" name="chk1" type="checkbox" value="true" /><input name="chk1" type="hidden" value="false" />

<input class="checkBox" id="chk1" name="chk1" type="checkbox" value="true" /><input name="chk1" type="hidden" value="false" />

<input checked="checked" class="checkBox" id="IsVaild" name="IsVaild" type="checkbox" value="true" /><input name="IsVaild" type="hidden" value="false" />

7.ListBox
<%=Html.ListBox("lstBox1",(SelectList)ViewData["Categories"])%>
<%=Html.ListBoxFor(a => a.CategoryName, (SelectList)ViewData["Categories"])%>

生成結果：
<select id="lstBox1" multiple="multiple" name="lstBox1">
<option value="1">Beverages</option>
<option value="2">Condiments</option>
<option selected="selected" value="3">Confections</option>
<option value="4">Dairy Products</option>
<option value="5">Grains/Cereals</option>
<option value="6">Meat/Poultry</option>
<option value="7">Produce</option>
<option value="8">Seafood</option>
</select>
<select id="CategoryName" multiple="multiple" name="CategoryName">
<option value="1">Beverages</option>
<option value="2">Condiments</option>
<option value="3">Confections</option>
<option value="4">Dairy Products</option>
<option value="5">Grains/Cereals</option>
<option value="6">Meat/Poultry</option>
<option value="7">Produce</option>
<option value="8">Seafood</option>
</select>

8.DropDownList
<%= Html.DropDownList("ddl1", (SelectList)ViewData["Categories"], "--Select One--")%>
<%=Html.DropDownListFor(a => a.CategoryName, (SelectList)ViewData["Categories"], "--Select One--", new { @class = "dropdownlist" })%>

生成結果：
<select id="ddl1" name="ddl1">
<option value="">--Select One--</option>
<option value="1">Beverages</option>
<option value="2">Condiments</option>
<option selected="selected" value="3">Confections</option>
<option value="4">Dairy Products</option>
<option value="5">Grains/Cereals</option>
<option value="6">Meat/Poultry</option>
<option value="7">Produce</option>
<option value="8">Seafood</option>
</select>
<select class="dropdownlist" id="CategoryName" name="CategoryName">
<option value="">--Select One--</option>
<option value="1">Beverages</option>
<option value="2">Condiments</option>
<option value="3">Confections</option>
<option value="4">Dairy Products</option>
<option value="5">Grains/Cereals</option>
<option value="6">Meat/Poultry</option>
<option value="7">Produce</option>
<option value="8">Seafood</option>
</select>

9.Partial 視圖模板
webform里叫自定義控制項。功能都是為了復用。但使用上自定義控制項真的很難用好。
<% Html.RenderPartial("DinnerForm"); %> 看清楚了沒有等號的。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Linux tcpdump 命令詳解
    簡介 用簡單的話來定義tcpdump，就是：dump the traffic on a network，根據使用者的定義對網路上的數據包進行截獲的包分析工具。 tcpdump可以將網路中傳送的數據包的“頭”完全截獲下來提供分析。它支持針對網路層、協議、主機、網路或埠的過濾，並提供and、or、no
  • U-Boot GOT表分析和u-boot.lds解讀
    轉自：http://blog.sina.com.cn/s/blog_70dd16910100zab6.html u-boot-2010.09/arch/powerpc/cpu/mpc86xx/start.S文件中的創建GOT段的代碼片段如下： // Set up GOT: Global Offset
  • 解決Ubuntu 14.04 下SMPlayer的字幕亂碼問題
    1.SMPlayer播放器 對於使用ubuntu系統的同學，雖然系統初始就帶有vedio播放器，但是這裡強烈推薦SMPlayer，直接在Ubuntu Software Center中就可以免費下載安裝，這個播放器功能非常強大，完美得滿足了在ubuntu系統下追劇看電影的要求，其程式界面如下： 2.亂
  • 義文緊固系統推出最新品牌
    大家好，今天小文給大家介紹的是義文緊固系統最新推出的一個新品牌“VLIER”。 VLIER有著超過半個世紀以上悠久歷史， VLIER的彈簧柱塞、水平調節元件和機械部件始終堅持打造最權威的行業應用，作為行業的領導者，一貫提供優質的價值、品質、服務。 VLIER是精密彈簧載入裝置和平衡調節墊設計製造專家
  • 最新番茄花園win7系統快速穩定版
    這是最新番茄花園win7系統64位快速穩定版 V2016年2月，該系統由系統媽整理和上傳，系統具有更安全、更穩定、更人性化等特點。集成最常用的裝機軟體，集成最全面的硬體驅動，精心挑選的系統維護工具，加上番茄花園獨有人性化的設計。是電腦城、個人、公司快速裝機之首選！擁有此系統，您也可以輕鬆成為裝機高手
  • rsync同步架構
    1.1 rsync伺服器端配置 1.1.1 查看伺服器端rsync版本 1.1.2 創建配置文件 預設安裝好rsync程式後，並不會自動創建rsync的主配置文件，需要手工來創建，其主配置文件為“/etc/rsyncd.conf”，創建該文件 並插入如下內容： 1 #Rsync server 2 #
  • 設計模式
    一.創建型模式 模式名稱 定 義 使用頻率 學習難度 簡單工廠模式 (Simple Factory Pattern) 定義一個工廠類，它可以根據參數的不同返回不同類的實例，被創建的實例通常都具有共同的父類。 ★★☆☆☆ ★★★☆☆ 工廠方法模式 (Factory Method Pattern) 定義
  • 單例模式的獨特之處
    單例模式三種寫法： 第一種最簡單，但沒有考慮線程安全，在多線程時可能會出問題 public class Singleton { private static Singleton _instance = null; private Singleton(){} public static Singlet
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類