溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

ASP.NET?Core中的Razor頁(yè)面怎么創(chuàng)建

發(fā)布時(shí)間:2022-02-18 13:45:50 來源:億速云 閱讀:365 作者:iii 欄目:開發(fā)技術(shù)

這篇文章主要介紹“ASP.NET Core中的Razor頁(yè)面怎么創(chuàng)建”,在日常操作中,相信很多人在ASP.NET Core中的Razor頁(yè)面怎么創(chuàng)建問題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”ASP.NET Core中的Razor頁(yè)面怎么創(chuàng)建”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!

    簡(jiǎn)介

    隨著ASP.NET Core 2 即將來臨,最熱門的新事物是Razor頁(yè)面。

    Razor頁(yè)面是ASP.NET Core的一個(gè)新功能,可以使基于頁(yè)面的編程方式更容易,更高效。

    大眾的初步印象是對(duì)于那些只專注于頁(yè)面的小型應(yīng)用來說,Razor頁(yè)面更容易、更快地取代MVC。然而,事實(shí)證明,它可能比這更強(qiáng)大。使用ASP.NET Core 2在創(chuàng)建新的應(yīng)用程序時(shí),Razor頁(yè)面(空,Razor頁(yè)面,Web API,MVC)是默認(rèn)選項(xiàng),似乎ASP.NET團(tuán)隊(duì)對(duì)Razor頁(yè)面有更多的計(jì)劃,并希望它成為創(chuàng)建Web應(yīng)用程序時(shí)首選。

    所有的Razor頁(yè)面類型和特征都在Microsoft.AspNetCore.Mvc.RazorPages程序集中,MVC默認(rèn)包Microsoft.AspNetCore.Mvc已經(jīng)包含了Razor頁(yè)面組件,這意味著您可以在MVC應(yīng)用程序中直接使用Razor頁(yè)面。

    Razor頁(yè)面的優(yōu)點(diǎn)之一是設(shè)置和創(chuàng)建非常容易。您創(chuàng)建一個(gè)新的空項(xiàng)目,添加Pages文件夾,添加頁(yè)面,只需在 .cshtml 文件中編寫代碼和標(biāo)記。非常適合新手,是學(xué)習(xí)ASP.NET Core簡(jiǎn)單快速的方法!

    Why?

    如果您想使用MVC構(gòu)建幾個(gè)簡(jiǎn)單的頁(yè)面,你需要將控制器 Action、HTML視圖、視圖模型、路由分別在單獨(dú)的位置編寫,這看起來似乎很過分了。

    在Razor頁(yè)面中,只有一個(gè)Razor文件(.cshtml),后臺(tái)的代碼也位于該文件內(nèi),該文件也表示應(yīng)用程序的URL結(jié)構(gòu)(稍后將會(huì)介紹)。因此,您可以將所有內(nèi)容都放在一個(gè)文件中,就這么簡(jiǎn)單。

    但是,您可以使用 .cshtml.cs 擴(kuò)展名文件將后臺(tái)代碼分開。通常在該文件中包括視圖模型和Handlers (如MVC中的Acion方法),也可以在該文件中的處理邏輯。當(dāng)然,您也可以將您的視圖模型移動(dòng)到單獨(dú)的文件中。

    創(chuàng)建Razor頁(yè)面應(yīng)用程序

    在VS 2017中安裝.NET Core 2 SDK的情況下,如果我們按照這樣的方式:文件 - > 新建項(xiàng)目 - > Web - > ASP.NET Core Web應(yīng)用程序,我們將得到下面的窗口:

    ASP.NET?Core中的Razor頁(yè)面怎么創(chuàng)建

    手動(dòng)將身份驗(yàn)證類型改為“個(gè)人用戶帳戶”。

    我們也可以通過CLI實(shí)現(xiàn)同樣的效果

    ASP.NET?Core中的Razor頁(yè)面怎么創(chuàng)建

    dotnet new razor --auth Individual

    在dotnet CLI創(chuàng)建一個(gè)新項(xiàng)目之后,我們將在的項(xiàng)目中得到以下結(jié)構(gòu):

    ASP.NET?Core中的Razor頁(yè)面怎么創(chuàng)建

    首先注意到是沒有Views文件夾, 如果沒有選擇"授權(quán)"選項(xiàng), 那么也不會(huì)有"Controllers"文件夾。在我們的例子中,有AccountController控制器,在 Pages 文件夾中包含Account 文件夾。該文件夾的中,我們存放Razor頁(yè)面,在MVC中這些代碼通常放在 ~Views/Account 文件夾中:

    頁(yè)面的默認(rèn)位置是"Pages"文件夾,但可以更改

    ASP.NET?Core中的Razor頁(yè)面怎么創(chuàng)建

    大部分頁(yè)面都附帶.cs文件,表示頁(yè)面的模型:

    ASP.NET?Core中的Razor頁(yè)面怎么創(chuàng)建

    在.cs文件中,我們可以定義我們的邏輯、Handlers(Action)、模型和所有需要的邏輯。我們也可以把它當(dāng)作是.cshtml頁(yè)面的粘合劑,僅處理GET / POST / PUT / DELETE,也可以將邏輯移到單獨(dú)的類或?qū)?項(xiàng)目中。

    需要注意的一點(diǎn)是,我們需要在 .cshtml 文件的頂部定義 @page 指令。這告訴Razor這個(gè) .cshtml 文件是Razor Page文件:

    ASP.NET?Core中的Razor頁(yè)面怎么創(chuàng)建

    ASP.NET Core Razor頁(yè)面 - 核心功能

    由于Razor頁(yè)面是MVC框架的一部分,我們可以在Razor頁(yè)面中使用MVC所附帶的任何功能。

    模型綁定

    在MVC中模型綁定也適用于Razor頁(yè)面,就像MVC控制器中的Action方法一樣,在Razor頁(yè)面代碼有Handlers 。

    在ChangePassword頁(yè)面.cshtml文件編寫如下表單:

    ASP.NET?Core中的Razor頁(yè)面怎么創(chuàng)建

    ChangePassword.cshtml.cs文件中實(shí)現(xiàn)ChangePasswordModel類:

    ASP.NET?Core中的Razor頁(yè)面怎么創(chuàng)建

    這里是InputModel類:

    ASP.NET?Core中的Razor頁(yè)面怎么創(chuàng)建

    InputModel提供了我們?cè)贛VC中熟悉的ViewModel功能。

    Handlers

    我們使用Handlers作為處理HTTP請(qǐng)求(GET,POST,PUT,DELETE ..)的方法。例如,我們可以有以下方法:

    OnGet / OnGetAsyncOnPost / OnPostAsyncOnDelete / OnDeleteAsync

    這些方法將由ASP.NET Core根據(jù)HTTP請(qǐng)求的類型自動(dòng)匹配。

    讓我們回到之前ChangePassword的示例。這是ChangePassword.cshtml.cs文件的一部分代碼:

    ASP.NET?Core中的Razor頁(yè)面怎么創(chuàng)建

    OnGetAsyncOnPostAsync是Razor頁(yè)面 handlers約定好了的名稱。一旦您打開ChangePassword頁(yè)面,OnGetAsync handler 將執(zhí)行,當(dāng)您從ChangePassword.cshtml頁(yè)面提交表單,OnPostAsync handler 將被觸發(fā)。

    此外,我們可以將所有的頁(yè)面代碼放在 .cshtml 文件中。例如,我們可以將這兩個(gè)函數(shù)從ChangePassword.cshtml.cs文件移動(dòng)到ChangePassword.cshtml中:

    ASP.NET?Core中的Razor頁(yè)面怎么創(chuàng)建

    關(guān)鍵字 @functions 指令,它使Razor文件范圍內(nèi)的代碼成為功能級(jí)方法。

    Tag Helpers and HTML Helpers

    我們還可以在Razor頁(yè)面內(nèi)使用所有現(xiàn)有的Tag Helpers 和HTML Helpers;此外,可以創(chuàng)建自定義的幫助類,并在Razor頁(yè)面中使用它們。

    路由

    我在GitHub中的小項(xiàng)目設(shè)置演示了如何使用Razor頁(yè)面進(jìn)行CRUD - 倉(cāng)庫(kù)鏈接 。您需要.NET Core 2.0 preview 3(build 6764 才能正常運(yùn)行)或更高版本以及Visual Studio 2017.3或更高版本。

    以下是所有文件的項(xiàng)目結(jié)構(gòu):

    ASP.NET?Core中的Razor頁(yè)面怎么創(chuàng)建

    除了兩個(gè)標(biāo)準(zhǔn)文件 Program.cs 和 Startup.cs ,一切都在Pages文件夾中;請(qǐng)注意,某些頁(yè)面具有匹配的后臺(tái)代碼文件。

    如前所述,項(xiàng)目中頁(yè)面的位置(文件系統(tǒng)中的路徑)將確定匹配的URL。

    這里是一些重要頁(yè)面文件和路由匹配的列表:

    頁(yè)面文件路徑匹配的URL
    ~Pages/Index.cshtml/ , /Index
    ~Pages/Categories/Index.cshtml/Categories , Categories/Index
    ~Pages/Categories/Edit.cshtml/Categories/Edit/1
    ~Pages/Categories/Create.cshtml/Categories/Create

    到此,關(guān)于“ASP.NET Core中的Razor頁(yè)面怎么創(chuàng)建”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!

    向AI問一下細(xì)節(jié)

    免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

    AI