mvc VIEW部分介紹


因為如果在view頁面中的路徑直接寫死為<from action="/Home/Save" method="post">那么當Global.asax.cs文件中的Routing自定義或隨時修改后,還要連帶修改數十個視圖中的窗口發送路徑.

在MVC中,我們可以使用Html.BeginForm()

 

Aspx代碼 復制代碼 收藏代碼
  1. <%
  2. using (Html.BeginForm("Save","Home",FormMethod.Post)){
  3. %>
  4. 窗口內容
  5. <%}%>
<%
	using (Html.BeginForm("Save","Home",FormMethod.Post)){
%>
窗口內容
<%}%>

 

Aspx代碼 復制代碼 收藏代碼
  1. <%
  2. using (Html.BeginForm("Save","Home")){
  3. %>
  4. 窗口內容
  5. <%}%>
<%
	using (Html.BeginForm("Save","Home")){
%>
窗口內容
<%}%>

 

如果窗口送出的對象是同一個Action,那么可以簡寫為

Aspx代碼 復制代碼 收藏代碼
  1. <%
  2. using (Html.BeginForm()){
  3. %>
  4. 窗口內容
  5. <%}%>
<%
	using (Html.BeginForm()){
%>
窗口內容
<%}%>

因為送出窗口的對象與當前視圖所在的Controller相同,只是Action不同,所以可以通過View的RouteData.Values對象獲取當前的所有路由值,並動態加載路由值中的Controller的名稱

 

RouteData.Values

 

Aspx代碼 復制代碼 收藏代碼
  1. <%
  2. using (Html.BeginForm(("Save",RouteData.Values["controller"].ToString())){
  3. %>
  4. 窗口內容
  5. <%}%>
<%
	using (Html.BeginForm(("Save",RouteData.Values["controller"].ToString())){
%>
窗口內容
<%}%>

使用 <%: Html.TextBox("姓名")%>為mvc2新建的強類型HTML輔助方法

 

使用強類型的好處在於可以有提示,不必擔心把字段名稱寫錯

 

Model要重、Controller要輕、View要夠笨

 

 

HTML輔助方法:

MVC內置且常用的HTML輔助方法主要分為兩大類:

用於生成超鏈接的HTML輔助方法,Html. ActionLink()、Html. RouteLink();

用於生成窗口元素的HTML輔助方法,包括Html.BeginForm()、Html. EndFrom()、Html. TextBox()、Html. TextArea()、Html. Password()、Html. Hidden()、Html. CheckBox()、Html. DropDownList()、Html. ListBox()、Html. RadioButton();

 

Html. ActionLink():

Aspx代碼 復制代碼 收藏代碼
  1. <%=Html. ActionLink("超鏈接文字","actionName")%>
  2. <%=Html. ActionLink("超鏈接文字","actionName","controllerName")%>
  3. <%=Html. ActionLink("超鏈接文字","actionName","controllerName",new{id=123,page=5})%>
        <%=Html. ActionLink("超鏈接文字","actionName")%>
	<%=Html. ActionLink("超鏈接文字","actionName","controllerName")%>
	<%=Html. ActionLink("超鏈接文字","actionName","controllerName",new{id=123,page=5})%>

在使用Html. ActionLink()時,超鏈接文本處不可以輸入空白或“null”值,否則會拋“The Value cannot be null or emtty”的異常。

 

Html. RouteLink():

Aspx代碼 復制代碼 收藏代碼
  1. <%=Html. RouteLink("會員專區","Member",new{type="default"},new{@class="back"})%>
  2. 等價:
  3. <a class="back" href="Member/?type=default">會員專區</a>
<%=Html. RouteLink("會員專區","Member",new{type="default"},new{@class="back"})%>
等價:
<a class="back" href="Member/?type=default">會員專區</a>

 

 

Html. BeginForm():

該方法主要用來產生<form>標簽,你可以通過using語法來使用它,也可以配合Html.EndForm()輔助方法產生適當的</from>窗口結尾標簽。注意這里使用是<%%>里千萬不能加等號。

 

Html. TextBox():

<%=Html. TextBox("name")%>等價於<input id="name" name="name" type="text" value=""/>由此可知,我們指定了name字段的名稱,通過HTML輔助方法產出HTML代碼的同時,會同時將id字段賦予和Name字段一樣的值。

<%=Html. TextBox("name","value")%>等價於<input id="name" name="name" type="text" value="value"/>注意這里的value不能寫“”

<%=Html. TextBox("name","value",new{id="testId"})%> 等價於<input id="testId" name="name" type="text" value="value"/>值得注意的是HTML屬性的Class是保留字,當需要設定Class是,需要加上“@”來跳脫

<%=Html. TextBox("name","value",new{id="testId",@class="testClass"})%>

 

還可以使用IDictionary<stirng object>接口,此重載在同一個頁面中有許多HTML標簽需要用到相同的的Class或Style等屬性時使用。使用此重載需要現在Controller中建立一個Dictionary對象,並且使用ViewData轉到View

 

C#代碼 復制代碼 收藏代碼
  1. public ActionResult HelperSample(){
  2. IDictionary<string,object> attr = new Dictionary<string,object>();
  3. attr.Add("siez","32");
  4. attr.Add("style","color:red");
  5. ViewData["Dictionary"]=attr;
  6. return View();
  7. }
public ActionResult HelperSample(){
       IDictionary<string,object> attr = new Dictionary<string,object>();
       attr.Add("siez","32");
       attr.Add("style","color:red");
       ViewData["Dictionary"]=attr;
       return View();
}

 

<%=Html. TextBox("name","value",ViewData["Dictionary"] as IDictionary<string,object>)%>

 

<%=Html.HttpMethodOverride("HttpVerbs.Delete")%>用來是的MVC支持REST協議。

強類型輔助方法的命名方式皆為在原先名稱的最后加上"For"

 

 

URL輔助方法:

URL輔助方法與HTML輔助方法很類似,URL輔助方法用於生成HTML代碼,HTML輔助方法用於生成網址;

 

Url.Action():

 

Aspx代碼 復制代碼 收藏代碼
  1. <%=Url.Action("About")%>
  2. <%=Url.Action("About",new{id=1})%>
  3. <%=Url.Action("About","Home")%>
  4. <%=Url.Action("About","Home",new{id=1})%>
       <%=Url.Action("About")%>
       <%=Url.Action("About",new{id=1})%>
       <%=Url.Action("About","Home")%>
       <%=Url.Action("About","Home",new{id=1})%>

 

Url.Encode():

與Server.RrlEncode()方法的用法相同。

 

Url.Content():

可用於獲取絕對路徑<%=Url.Content("~/image/Logo.png")%>

 

Url.RouteUrl():

可以指定使用某個Route name來生成網址

Url.Route(new{id=123}) /Home/Index/123

Url.Route("root") /root/Home/Index

Url.Route("root",new{id=123}) /root/Home/Index/123

Url.Route("root",new{id=123},"https") https://localhost/root/Home/Index/123

 

Ajax輔助方法:

使用Ajax輔助方法時,必須在頁面或MasterPage中加載MicrosoftAjax.js與MicrosoftMvaAjax.js這兩個js文件,而要加載順序要正確,否則會報錯。

 

最常用的輔助方法有:

Ajax.ActionLink()

Ajax.BeginForm()

而這兩個輔助方法和Html.ActionLink()、Html.BeginForm大致相同,只是多了一個AjaxOptions類可以設定

 

AjaxOptions屬性名稱

Confim

單擊時會彈出Comfirm對話框

HttpMethod

設定HTTP請求的方法(Get或Post)

InsertionMode

設定通過Ajax輔助方法取回數據時要如果將數據新建到UpdateTargetId屬性指定的元素中,有3個方法:

InsertionMode.Replace:替代UpdateTargetId屬性指定的內容

InsertionMode.InsertBefore:在UpdateTargetId屬性之前插入

InsertionMode.InsertAfter:在UpdateTargetId屬性之后插入

LoadingElementId

在讀取尚未完成時所顯示的區塊

OnBegin

設置開始時要執行的JavaScript函數名稱

OnComplete

設置結束時要執行的JavaScript函數名稱

OnFailure

設置失敗時要執行的JavaScript函數名稱

OnSuccess

設置完成時要執行的JavaScript函數名稱

UpdateTargetId

設定返回值要顯示在哪個ID上

Url

設定Request的網址

 

以下是通過Ajax輔助方法來刪除數據Demo:

Aspx代碼 復制代碼 收藏代碼
  1. <%Ajax.ActionLink("Delete","Delete",new {controller="Home",id="Model.Id"},new AjaxOptions{OnSuccess="Delete",Confirm="你確定要刪除么?"},HttpMethod="POST",LoadingElementId="AjaxLoad")%>
  2. <script language="javascript" type="text/javascript">
  3. function Delete(data){
  4. alert(data.get_data);
  5. }
  6. </script>
<%Ajax.ActionLink("Delete","Delete",new {controller="Home",id="Model.Id"},new AjaxOptions{OnSuccess="Delete",Confirm="你確定要刪除么?"},HttpMethod="POST",LoadingElementId="AjaxLoad")%>
<script language="javascript" type="text/javascript">
	function Delete(data){
		alert(data.get_data);
	}
</script>

 

在Action中

C#代碼 復制代碼 收藏代碼
  1. [HttpPost]
  2. public ActionResult Delete(string id){
  3. ....
  4. return content("刪除成功");
  5. }
[HttpPost]
public ActionResult Delete(string id){
	....
	return content("刪除成功");
}

自定義HTML輔助方法:

C#代碼 復制代碼 收藏代碼
  1. using System;
  2. using System.Text;
  3. using System.Web.Mvc;
  4. namespace MvcApplication1.Helpers
  5. {
  6. public static class ImgHelper
  7. {
  8. public static string Img(this HtmlHelper helper,string url,string alternateText,string title){
  9. return String.Format("<img src='{0}' alt='{1}' title='{2}'/>",url,alternateText,title);
  10. }
  11. }
  12. }
using System;
using System.Text;
using System.Web.Mvc;
namespace MvcApplication1.Helpers
{
	public static class ImgHelper
	{
		public static string Img(this HtmlHelper helper,string url,string alternateText,string title){
			return String.Format("<img src='{0}' alt='{1}' title='{2}'/>",url,alternateText,title);
		}
	}
}

 

 

注意,因為我們使用了自定義的HTML輔助方法,因此,必須在View的最上方將命名空間引用進來,才能使用這個自定義的HTML輔助方法,示例如下:

<%@ Import Namespace="MvcApplication1.Helper"%>

<%=Html.Img....

 

如果寫復雜的Helper類,需要拼接字符串,使用StringBuilder,但是這個類使用沒有任何的彈性,所以,MVC設計了TagBuilder類,能夠以對象化程度更高的方式生成HTML標簽。

 

驗證:

可以使用MVC內置了數據驗證機制,只要搭配了ViewModel及ASP.NET 5 sp1,或者ASP.NET4.0提供的Data Annotations函數庫,即可實現數據驗證,同時實現客戶端和服務端的驗證

 

 

只要在ViewModel中多加載System.ComponentModel.DataAnnotations類,並

[Required(ErrorMessage = "當前密碼不能為空!")]

[DataType(DataType.Password)]

[DisplayName("當前密碼")]

public stringOldPassword { get; set; }

 

后台:

利用 ModelState.IsValid驗證,我們可以判斷通過數據庫模型綁定進來的數據是否符合ViewModel字段驗證的要求,如果驗證失敗,則會返回false

前台:

1、在Site.Master文件中添加三個項目內置的JavaScript文件

<scriptsrc="http://www.cnblogs.com/Scripts/MicrosoftAjax.js"type="text/javascript"></script>

<scriptsrc="http://www.cnblogs.com/Scripts/MicrosoftMvcAjax.js"type="text/javascript"></script>

<scriptsrc="http://www.cnblogs.com/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>

2、在 <% using (Html.BeginForm()) {%>語句之前加入以下聲明:

<%Html.EnableClientValidation(); %>

需要注意的是,a:如果一個頁面中有兩個或兩個以上的窗口需要進行驗證,則Html.EnableClientValidation()必須出現在Html.BeginForm()聲明之前,否則驗證無法執行;b:使用此種驗證方式必須使用Html.BeginForm()聲明窗口。

3、在每個字段上加上 <%: Html.ValidationMessageFor(model => model.Name, "", new{ Style = "color:red" })%>

以顯示驗證失敗的錯誤提示

 

重復發送信息:

為了解決這樣現象,可以使用PRG(Post-Redirect-Get)樣式的概念,當遇到需要傳送窗口數據的情況時,會先通過Http Post請求送出數據,在處理完數據之后,立即轉向(Redirect)另一個網址,最后通過Http Get請求取得跳轉后的頁面

public ActionResult About(ViewModel model){

。。。

return RedirectToAction("Other", "Home");

如果我們希望在About接受到的ViewModel數據傳遞給Other視圖,這時就必須使用TempData機制來傳遞這種只會用到"1次"的數據。

TempData是一個Dictionary對象,它與ViewData很想,但非常特殊,所有存儲在TempData中的數據只能被參考一次,用過之后數據就會被清空,我們可以利用TempData的特性,將About動作接受到的ViewMode類的數據傳遞給Other。

在About方法中需要有

TempData["LastPostViewModel"]=model;

然后在Other中

if(TempData["LastPostViewModel"]==null){

return RedirectToAction("Index");

}

var model = (強轉)TempData["LastPostViewModel"];


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM