日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 編程語言 正文

ASP.NET?Core中Razor頁面與MVC區(qū)別介紹_實(shí)用技巧

作者：Sweet-Tang ? 更新時(shí)間： 2022-04-25 編程語言

作為.NET Core 2.0發(fā)行版的一部分，還有一些ASP.NET的更新。其中之一是添加了一個(gè)新的Web框架來創(chuàng)建“頁面”，而不需要復(fù)雜的ASP.NET MVC。新的Razor頁面是一個(gè)比較簡(jiǎn)單的MVC框架版本，在某些方面是老的“.aspx” WebForms的演變。

在本文中，我們將介紹使用ASP.NET Razor頁面和MVC的一些細(xì)節(jié)。

  • Razor頁面基礎(chǔ)知識(shí)
  • ASP.NET MVVM vs MVC
  • Razor頁面的優(yōu)點(diǎn)和缺點(diǎn)
  • 使用Handlers實(shí)現(xiàn)多個(gè)GET、POST Action方法
  • 為什么您應(yīng)該使用Razor Pages
  • ASP.NET Razor頁面與MVC代碼的區(qū)別

基礎(chǔ)知識(shí)：什么是ASP.NET Razor頁面？

Razor頁面與ASP.NET MVC開發(fā)使用的視圖組件非常相似，它們具有所有相同的語法和功能。

最關(guān)鍵的區(qū)別是模型和控制器代碼也包含在Razor頁面中。它更像是一個(gè)MVVM（Model-View-ViewModel）框架，它支持雙向數(shù)據(jù)綁定，更簡(jiǎn)單的開發(fā)體驗(yàn)，具有獨(dú)立的關(guān)注點(diǎn)。

下面是一個(gè)Razor頁面最基本的示例，在@functions塊中內(nèi)嵌代碼，不過推薦將PageModel代碼放在一個(gè)單獨(dú)的文件中。這更像是我們?cè)贏SP.NET WebForms文件中編寫代碼的方式。

@page
@model IndexModel
@using Microsoft.AspNetCore.Mvc.RazorPages

@functions {
    public class IndexModel : PageModel
    {
        public string Message { get; private set; } = "In page model: ";

        public void OnGet()
        {
            Message += $" Server seconds  { DateTime.Now.Second.ToString() }";
        }
    }
}


In page sample



    @Model.Message

我們現(xiàn)在兩個(gè)選擇：ASP.NET MVVM 或 MVC

我們現(xiàn)在有兩個(gè)選擇，一個(gè)MVC，另一個(gè)是MVVM框架。我不打算介紹MVC vs MVVM的所有細(xì)節(jié)。在這篇文章中用一些例子很詳細(xì)說明了這一點(diǎn)。MVVM框架最關(guān)注的是數(shù)據(jù)模型的雙向綁定。

MVC適用于具有大量動(dòng)態(tài)服務(wù)器視圖、單頁應(yīng)用程序、REST API和AJAX調(diào)用的應(yīng)用程序。Razor頁面非常適用于只讀或執(zhí)行基本數(shù)據(jù)輸入的簡(jiǎn)單頁面。

MVC最近在大多數(shù)編程語言的Web應(yīng)用程序中非常流行，但是它也有其利弊。ASP.NET WebForms被設(shè)計(jì)為一個(gè)MVVM解決方案，您可以認(rèn)為Razor頁面是WebForms的演變。

Razor頁面的優(yōu)點(diǎn)和缺點(diǎn)

根據(jù)我在使用新的Razor頁面過程中，下面是我總結(jié)的利弊以及我是如何看待使用它們。

優(yōu)點(diǎn)：更有條理

我不知道您，但是我第一次使用ASP.NET MVC，花了很多時(shí)間試圖弄清楚它是如何工作的。命名規(guī)則和動(dòng)態(tài)創(chuàng)建路由導(dǎo)致了很多我不習(xí)慣的規(guī)則。事實(shí)上，從路徑“/Home/”到HomeController.Index()，它從“Views\Home\Index.cshtml”中加載一個(gè)視圖文件，在剛開始使用時(shí)覺得很神奇。

Razor頁面更有條理。您有一個(gè)Razor視圖和后臺(tái)代碼文件，就像WebForms一樣，不像與MVC對(duì)應(yīng)的控制器、視圖和模型存放在不同目錄中具有單獨(dú)的文件。

MVC項(xiàng)目和Razor頁面項(xiàng)目比較（將在本文后面介紹更多的代碼差異）。

MVC與Razor頁面文件比較

優(yōu)點(diǎn)：?jiǎn)我回?zé)任

如果您以前曾經(jīng)使用過MVC框架，您可能會(huì)看到一些巨大的控制器類，其中包含許多不同的Action。它們就像一種隨著時(shí)間的推移而增加的病毒。

使用Razor頁面，每個(gè)頁面都是獨(dú)立的，視圖和代碼組織在一起，這遵循單一責(zé)任原則。

使用Handlers實(shí)現(xiàn)多個(gè)GET、POST Action

默認(rèn)情況下，Razor頁面設(shè)計(jì)為具有單個(gè)OnGetAsync和OnPostAsync?Action方法；如果您想在單個(gè)頁面中具有不同的Action，則需要使用所謂的Handler。如您的頁面有AJAX回調(diào)、多個(gè)表單提交或其它場(chǎng)景，則需要使用它。

例如，如果您使用Kendo Grid并希望通過AJAX調(diào)用加載Grid數(shù)據(jù)，則需要使用Handler來處理該AJAX調(diào)用。任何類型的單頁面應(yīng)用程序?qū)⑹褂么罅縃andler，或者您將所有這些AJAX調(diào)用指向MVC控制器。

我在頁面中添加了一個(gè)名為OnGetHelloWorldAsync()的方法，我們?cè)撛趺凑{(diào)用它？

從我的研究來看， 調(diào)用Handler有三種不同的方式：

  • Querystring – 示例：“/managepage/2177/?handler=helloworld”
  • 為視圖中的定義路由：@page"{handler?}"，然后在Url中包括“/helloworld”
  • 在視圖中定義提交按鈕 - 示例：

可以在這里了解更多有關(guān)單頁面多個(gè)Handlers 的方式。

為什么您應(yīng)該使用Razor頁面的！

Razor頁面是網(wǎng)頁應(yīng)用程序中的完美解決方案，我可能提出一個(gè)爭(zhēng)議。它一目了然，你的應(yīng)用程序中的任何HTML“頁面”都是真實(shí)的頁面。目前，MVC Action 可以返回HTML視圖、JSON、文件或任何內(nèi)容。使用Razor頁面將頁面加載和AJAX回調(diào)的服務(wù)之間強(qiáng)制分離。

想想，這種強(qiáng)制分離解決了很多問題。

Razor Page MVC
HTML Views REST API calls, SOA

這將阻止MVC控制器包含大量的Action，MVC應(yīng)用程序中的Action混合了不同的“頁面”，而且還包含AJAX回調(diào)和其它功能。

當(dāng)然，我還沒有實(shí)際中使用這種開發(fā)方式，這可能是失敗，也可能是成功的，只有時(shí)間才能告訴社區(qū)如何使用Razor頁面。

ASP.NET Razor頁面與MVC的代碼比較

作為Razor頁面的一部分，我在MVC和Razor頁面中構(gòu)建了一個(gè)非常簡(jiǎn)單Form表單。讓我們來看看之間的代碼。它只有一個(gè)文本框和提交按鈕。

這是MVC視圖：

@model RazorPageTest.Models.PageClass



    

        
Client

這是MVC控制器（數(shù)據(jù)模型是PageClass，只有兩個(gè)屬性，很簡(jiǎn)單）。

    public class HomeController : Controller
    {
        public IConfiguration Configuration;

        public HomeController(IConfiguration config)
        {
            Configuration = config;
        }

        public async Task ManagePage(int id)
        {
            PageClass page;

            using (var conn = new SqlConnection(Configuration.GetConnectionString("contentdb")))
            {
                await conn.OpenAsync();

                var pages = await conn.QueryAsync("select * FROM PageData Where PageDataID = @p1", new { p1 = id });

                page = pages.FirstOrDefault();
            }

            return View(page);
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task ManagePage(int id, PageClass page)
        {

            if (ModelState.IsValid)
            {
                try
                {
                    //Save to the database
                    using (var conn = new SqlConnection(Configuration.GetConnectionString("contentdb")))
                    {
                        await conn.OpenAsync();
                        await conn.ExecuteAsync("UPDATE PageData SET Title = @Title WHERE PageDataID = @PageDataID", new { page.PageDataID, page.Title});
                    }
                }
                catch (Exception)
                {
                   //log it
                }
                return RedirectToAction("Index", "Home");
            }
            return View(page);
        }
    }

現(xiàn)在我們來比較一下Razor頁面。

Razor 頁面：

    @page "{id:int}"
    @model RazorPageTest2.Pages.ManagePageModel
    
    

        

            
Manage Page

這是Razor PageModel，也稱之為后臺(tái)代碼：

    public class ManagePageModel : PageModel
    {
        public IConfiguration Configuration;

        public ManagePageModel(IConfiguration config)
        {
            Configuration = config;
        }

        [BindProperty]
        public int PageDataID { get; set; }
        [BindProperty]
        public string Title { get; set; } 

        public async Task OnGetAsync(int id)
        {
            using (var conn = new SqlConnection(Configuration.GetConnectionString("contentdb")))
            {
                await conn.OpenAsync();
                var pages = await conn.QueryAsync("select * FROM PageData Where PageDataID = @p1", new { p1 = id });

                var page = pages.FirstOrDefault();

                this.Title = page.Title;
                this.PageDataID = page.PageDataID;
            }

            return Page();
        }

        public async Task OnPostAsync(int id)
        {

            if (ModelState.IsValid)
            {
                try
                {
                    //Save to the database
                    using (var conn = new SqlConnection(Configuration.GetConnectionString("contentdb")))
                    {
                        await conn.OpenAsync();
                        await conn.ExecuteAsync("UPDATE PageData SET Title = @Title WHERE PageDataID = @PageDataID", new { PageDataID, Title });
                    }
                }
                catch (Exception)
                {
                   //log it
                }
                return RedirectToPage("/");
            }
            return Page();
        }
    }

差異解密

兩者之間的代碼幾乎相同，以下是主要的區(qū)別：

  • MVC視圖代碼部分完全相同，除了Razor頁面頂上的@page；
  • ManagePageModel具有OnGetAsync和OnPostAsync方法，取代了MVC控制器中兩個(gè)“ManagePage” Action；
  • ManagePageModel包含之前單獨(dú)在PageClass中的兩個(gè)屬性。

在MVC中HTTP POST請(qǐng)求，將對(duì)象傳遞給MVC的Action(例如ManagePage(int id，PageClass page))；使用Razor頁面，可以使用數(shù)據(jù)雙向綁定。為了讓Razor頁面正確地使用雙向數(shù)據(jù)綁定，我兩個(gè)屬性（PageDataID、Title）使用了[BindProperty]標(biāo)記。

總結(jié)

我真的很喜歡Razor頁面，可以看到在我正在開發(fā)的ASP.NET Core項(xiàng)目中使用它們。我喜歡Razor頁面的原因是應(yīng)用程序中的真實(shí)頁面，并使用MVC實(shí)現(xiàn)所有AJAX/REST API。我承認(rèn)還有其它功能，Razor頁面實(shí)現(xiàn)不了。好消息是MVC是超級(jí)靈活的，但這也使得它變得更加復(fù)雜。Razor Pages的真正美麗是它的簡(jiǎn)單。

原文鏈接：https://www.cnblogs.com/tdfblog/p/asp-net-razor-pages-vs-mvc.html

欄目分類
最近更新