ASP.NET MVC編程——視圖

阿新 • • 發佈：2018-03-23

require multi 另一個 @* 劃線語句 section des 使用實例

1Razon語法

使用@符號後接C#或VB.NET語句的方式。

基本規則

1）變量

@後直接變量即可

2）代碼塊

為使用表達式或多行代碼，@後跟大括號將多行代碼包括在大括號中

3）“+”

對於加號連接的兩個字符串變量或屬性，使用小括號將他們括起來

4）插入HTML或文字

每一行前面加上“@：”

5）使用註釋

使用@*和*@將要註釋的部分包起來

6）用@@在頁面上顯示@

@using

在一個View中引入此頁所需程序集的命名空間。

還可以在web.config中配置命名空間，不過將對所有的View起作用。

<system.web.webPages.razor>
    < 
pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces >
        <add namespace="System.Web.Mvc"/>
        <add namespace="WebApplication.Models"/>
      </namespaces>
    </pages>
</system.web.webPages.razor>

@model

指定頁面所用模型的類型。

@help

使用自定義函數。這種方法有可能將一部分數據處理邏輯放到了頁面中，所以盡量不用。

例子：

定義函數

@helper CheckHelp(int i1,int i2)
 {
        if (i1 > i2)
        {
             @i1
        }
        else
        {
            @i2 
        }
}

使用函數

<h3>@CheckHelp(10,1111)</h3>

@functions

定義一個方法供當前頁使用，若使用IHtmlString作為方法的返回值，則可將其回傳給當前頁。

例子：

定義函數

@functions 
{
         
public int CheckFunc(int i1, int i2)
        {
            if (i1 > i2)
            {
             return i1;
            }
            else
            {
                return i2;
            }
        }
}

使用函數

<h3>@CheckFunc(10, 12111)</h3>

2 HTML輔助方法

使用方式為@後跟輔助方法，註意沒有“；”，否則分號也會顯示在頁面上。

2.1輸出超鏈接

ActionLink

有幾個重載方法，選參數最多的一個

public static MvcHtmlString ActionLink(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName, string protocol, string hostName, string fragment, RouteValueDictionary routeValues, IDictionary<string, object> htmlAttributes);

linkText：超連接名稱

actionName：操作名稱

controllerName：控制器名稱

protocol：URL 協議，如“http”或“https”。

hostName：URL 的主機名

fragment：URL 片段名稱（定位點名稱）

routeValues：路由參數

htmlAttributes：HTML 特性

例：

@Html.ActionLink("一個連接", "About")

對應的html代碼

RouteLink

有幾個重載方法，選參數最多的一個

public static MvcHtmlString RouteLink(this HtmlHelper htmlHelper, string linkText, string routeName, string protocol, string hostName, string fragment, RouteValueDictionary routeValues, IDictionary<string, object> htmlAttributes);

routeName：路由名稱

其他參數同ActionLink

2.2輸出表單

Html.BeginForm	輸出表單
Html.EndForm	結束表單
Html.TextArea	@Html.TextArea("Account","輸入內容"); 對應的Html: <textarea cols="20" id="Account" name="Account" rows="2">輸入內容</textarea>
Html.TextBox	<input type=”text”>
Html.Label	<lable>
Html.Password	<input type=”password”>
Html.CheckBox	<input type=”checkbox”>
Html.RadioButton	<input type=”radio”>
Html.DropDownList	<select>
Html.ListBox	<select multiple>
Html.Hidden	<input type=”hidden”>
Html.Row	輸出不經過編碼的內容
Html.ValidationSummary	數據模型驗證失敗時顯示的數據信息，配合Html.BeginForm表單一起使用
Html.ValidationMessage	顯示特定屬性的驗證信息
Html.HttpMethodOverride	用於模擬http動詞
Html.Id()	輸出特定欄位id
Html.Name()	輸出特定欄位name
Html.Value()	輸出特定欄位value

還可以使用強類型的輔助方法，一般是以For結尾。

例

1）顯示屬性驗證信息

控制器

public ActionResult TestViewData(ModelF mf)
{
            ViewData.Model = new ModelF { Field = mf.Field, Field2 = mf.Field2 };
            return View("Index");
}

模型

public class ModelF
{
        public string Field { get; set; }

        [Range(typeof(DateTime), "1/1/2018", "1/1/2019")]
        public DateTime Field2 { get; set; }
}

視圖Index.cshtml

@using (Html.BeginForm("TestViewData", "Home"))
{
        @Html.ValidationSummary()
        <input id="filed" name="Field2" type="text" placeholder="請輸入" value="" />
        <input type="submit" value="提交" />
}

測試，輸入1/1/2020，執行結果為：

技術分享圖片

為了能顯示字段的中文名稱使用DisplayName

public class ModelF
{
        public string Field { get; set; }

        [Range(typeof(DateTime), "1/1/2018", "1/1/2019")]
        [DisplayName("[這個字段]")]
        public DateTime Field2 { get; set; }
}

執行結果為

技術分享圖片

2）設置標簽特性值

由於class是C#保留關鍵字，因此設置class特性時要使用@

@using (Html.BeginForm("Login", "Account", FormMethod.Post, new { @class = "loginForm" }))
{
     //其他代碼  
 }

HTML輔助方法會將下劃線渲染為連字符，因此要表達含有連字符的特性，那麽使用下劃線

Html.BeginForm("Login", "Account", FormMethod.Post, new { vla_input=true})

2.3加載分部視圖

Html.Partial	呈現分部視圖，返回HTML
Html.Action	調用控制器操作呈現分部視圖
Html.RenderAction	以內聯的方式顯示結果

3 Url輔助方法

返回URI字符串

Url.Action

<h1>@Url.Action("Indexx")</h1>

輸出HTML為：

<h2>/MVCPointApp/Home/Indexx</h2>

Url.HttpRouteUrl

輸出HTML為：

Url.RouteUrl

輸出HTML為：

4 視圖定位

視圖放在Views文件夾下
Views文件夾的子文件夾名稱為控制器名稱
視圖名稱可以是控制器操作方法名稱也可以不是，若不是控制器操作方法名稱，控制器返回視圖時要指定視圖名。
Views文件夾下的Shared保存多個控制器共享的視圖

視圖定位規則是，先在Views文件夾中找對應控制器及控制器方法的視圖，沒有找到就到Shared文件夾下找。

5頁面布局

Views文件夾下_ViewStart.cshtml文件指定默認的模板，這個視圖先於任何試圖運行。
使用WebPageBase.Layout加載布局模板
使用@Html.Partial幫助方法加載部分視圖
使用@section定義指定內容的節，然後使用WebPageBase.RenderSection加載指定的節，使用public HelperResult RenderSection(string name, bool required);required=true,那麽節必須已經定義，否則拋異常。
@Styles.Render和@Scripts.Render捆綁和壓縮css、js

捆綁和壓縮css與js

App_Start文件夾下BundleConfig類中

public static void RegisterBundles(BundleCollection bundles)
{
    //多個文件用逗號分隔
    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.cookie.js",
                        "~/Scripts/jquery.hoverDelay.js",
                        "~/Scripts/jquery.pagination.js",
                        "~/Scripts/jquery.form.js",
                        "~/Scripts/json2.js",
                        "~/Scripts/hydss.js",
                        "~/Scripts/hydss.utility.js"));

    bundles.Add(new StyleBundle("~/Content/css/base").Include(
                                        "~/Content/css/common.css",
                                        "~/Content/css/dev.css"));
}

頁面中使用已經捆綁並壓縮的css和js，使用規則是：css文件置頂、js文件置地

@Styles.Render("~/Content/css/base")

@Scripts.Render("~/bundles/jqueryval")

覆蓋默認布局模板

使用WebPageBase.Layout加載模板覆蓋_ViewStart.cshtml文件指定默認的模板

例如：

_ViewStart.cshtml文件如下

Layout = "~/Views/Shared/_Layout.cshtml";

}

Index.cshtml文件如下

ViewBag.Title = "Home Page";

Layout = "~/Views/Shared/_LayoutOther.cshtml";

}

@*具體內容*@

</div>

如果沒有Layout = "~/Views/Shared/_LayoutOther.cshtml";這行代碼，那麽此視圖文件將使用_ViewStart.cshtml中的_Layout.cshtml這個模板，但這裏Index.cshtml文件使用的是另一個模板_LayoutOther.cshtml

使用實例

實際項目中可能會有不止一種布局，針對多種布局，既能滿足這種需求要能盡可能地代碼復用。

創建父模板_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link rel="icon" href="~/favicon.ico" />
    <link rel="shortcut Icon" href="~/favicon.ico" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="keywords" content="詞1 詞2" />
    <meta name="description" content="網站的主題" />
    @Styles.Render("~/Content/css/base")
@Scripts.Render("~/bundles/jquery")
@*加載HeaderSection節*@
    @RenderSection("HeaderSection", false)
</head>

<body>
    @*加載主體*@
    @RenderBody()

    <img id="loading" style="display:none;position:fixed;top:50%;left:50%;" src="@Url.Content("~/Content/images/loading.gif")" title="加載中..." alt="加載中..." />
    <a href="javascript:void(0);" id="backToTop" title="回到頂部"></a>
    @*加載腳本*@
    @Scripts.Render("~/bundles/jqueryval")
    @*加載FooterSection節*@
@RenderSection("FooterSection", false)
</body>
</html>

創建子模板_LayoutOther.cshtml

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@*定義HeaderSection節*@
@section HeaderSection{
    @RenderSection("HeaderSection", false)
}

@*加載頁頭*@
@Html.Partial("_header")
@*加載主體*@
@RenderBody()
@*加載頁腳*@
@Html.Partial("_footer")
@*定義FooterSection節*@
@section FooterSection{
    @RenderSection("FooterSection", false)
}

分析

_LayoutOther.cshtml視圖使用了_Layout.cshtml視圖文件，_Layout.cshtml中@RenderSection來加載FooterSection和HeaderSection節，而這個節定義在_LayoutOther.cshtml中，不過沒有具體內容；_LayoutOther.cshtml中定義的FooterSection和HeaderSection又各自加載其他也面定義的FooterSection和HeaderSection節，所以可以在使用_LayoutOther.cshtml中靈活定義FooterSection和HeaderSection節，可以想象這樣一個場景，每個頁面都需要加載js文件，而他們既有共用的js文件，又有非共用的js文件，那麽可以在使用_LayoutOther.cshtml的視圖中定義section 節來加載只有此頁面使用的js文件，而把公共的js文件放在_Layout.cshtml視圖文件中

例如Index.cshtml定義@section FooterSection{

@Scripts.Render("~/bundles/index")

}

這個節加載只供Index.cshtml這個頁面實用的js，這樣其他不需要這個js的頁面就不必加載這個js,從而達到減少頁面加載文件的目的進而優化了頁面。

6加載分部視圖

1）控制器返回分部視圖

配合@Html.Action方法使用控制器操作返回分部視圖

視圖中使用@Html.Action("TestPy")，控制器如下

public ActionResult TestFrom()
{
      return PartialView("TestPy");
}

或者在視圖中使用@{Html.RenderAction("TestPy");}，註意這種內聯視圖和Html.Action使用的區別。

2）使用html幫助方法

使用Html.Partial直接調用部分視圖而不是通過控制器操作方法。

@Html.Partial("_header")

7視圖向控制器傳遞數據

1）使用表單向控制器傳遞數據

視圖代碼

@using (Html.BeginForm("TestFrom", "Home"))
    {
        <input id="UserName" name="UserName" type="text" placeholder="請輸入用戶名" value="" />
        <input id="Password" name="Password" type="password" placeholder="請輸入密碼" value="" />
        <input type="submit" value="提交"/>
}

控制器代碼

public ActionResult TestFrom(FormCollection c)
{
            var un = c["UserName"];
            var pw = c["Password"];
            ViewBag.Un = un;
            ViewBag.Pw = pw;
            return PartialView("TestPy");
}

2）通過路由參數向控制器傳遞數據

8自定義html輔助方法

返回值類型為IHtmlString，IHtmlString 是一個接口

public static IHtmlString HYSubString(this HtmlHelper helper, string param)
{
     //字符串
     String ret =......
      return helper.Raw(ret);
}

參考：

Jess Chadwick/Todd Snyder/Hrusikesh Panda，徐雷/徐揚

譯。ASP.NET MVC4 Web編程

Jon Galloway/Phil Haack/Brad Wilson/K. Scott Allen，孫遠帥/鄒權譯 ASP.NET MVC4 高級編程（第四版）
黃保翕，ASP.NET MVC4開發指南
蔣金楠，ASP.NET MVC4框架揭秘
https://www.asp.net/mvc

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

轉載與引用請註明出處。

時間倉促，水平有限，如有不當之處，歡迎指正。

ASP.NET MVC編程——視圖

require multi 另一個 @* 劃線語句 section des 使用實例 1Razon語法使用@符號後接C#或VB.NET語句的方式。基本規則 1）變量 @後直接變量即可 2）代碼塊為使用表達式或多行代碼，@後跟大括號將多行代碼包括在大括號中 3）“

ASP.NET MVC編程——視圖

ASP.NET MVC編程——視圖

ASP.NET MVC編程入門--MVC5 傳遞參數與初始化數據

asp.net -mvc框架復習（5）-ASP.NET MVC中的視圖簡單使用

ASP.NET MVC編程——模型

ASP.NET MVC編程——錯誤處理與日記

PL/SQL編程—視圖

學ASP.NET入門編程，合適麽?

asp.net core 自定視圖主題實現IViewLocationExpander接口

Asp.Net Core MVC控制器和視圖之間傳值

ASP.NET MVC 排球計分程序（七）視圖代碼和一些解釋

轉載：ASP.NET MVC擴展自定義視圖引擎支持多模板&動態換膚skins機制

asp.net -mvc框架復習（9）-實現用戶登錄控制器和視圖的編寫並調試

ASP.NET MVC Controller 編程所涉及到的常用屬性成員

如何應用ASP.NET MVC中的分部視圖

ASP.NET MVC 分頁之局部視圖

ASP.NET MVC傳遞Model到視圖的多種方式總結

在ASP.NET MVC中加載部分視圖的方法及差別

ASP.NET MVC之從控制器傳遞數據到視圖方式

async、await在ASP.NET[ MVC]中之線程死鎖的故事

七天學會ASP.NET MVC (六)——線程問題、異常處理、自定義URL

ASP.NET MVC編程——視圖

相關推薦