Rages Pages vs MVC vs Blazor

hi in this video we'll talk about the differences between Razer Pages MVC and Blazer now all three are Frameworks that sit on top of the larger asp.net core framework Razer Pages allows us to build server-side web uis or traditional web applications using MVC framework we can also build server side web uis but we typically build web apis with it and finally with blazer we can build client-side web uis or single page applications so we just said that Razer pages is a server-side web UI framework but what do we mean by that a server-side web UI framework is a framework that produces web uis on the server so what is a web UI a web UI is a user interface that is built using web Technologies such as HTML CSS and JavaScript then why not create a static website with HTML CSS and JavaScript why do we need a web framework well the answer is for dynamic features asp.ed core together with razor Pages provides all the dynamic features needed for an application such as authentication authorization routing a consistent structure and a way to interact with databases so now let's see how server-side web uis work so we built a reservators application or an MVC app and host it on a server now let's say a user wants to visit a site so he uses a browser and the browser is going to send a request over the network to the server where our application is running the application is then going to process a request potentially talking to some business logic or data access logic and ultimately it produces a response which consists of HTML CSS JavaScript and possibly some images and that response is sent back to the browser the browser is then going to render the web page for the user to interact with that response which consisted of HTML CSS and JavaScript is a UI response which also contains some data now when the user further interacts with the web page for example by clicking on a link or hitting a button the browser is going to send a subsequent request to the server and the entire process repeats and this is how server side web uis work asp.net core MEC is used to build web apis using MEC controllers or web API controllers the difference with web apis is that web apis do not produce any UI the return only data that is formatted in Json or XML and the UI is a responsibility of the client application that wants to consume the web API so here on the client side of the equation we have a client-side web uis or single page applications built with blazer razor pages on NBC both implement the model view controller design pattern the MVC pattern allows us to separate the UI concerns of our application from the rest of the data we refer to the UI as the view and the data as a model do note that model can include business logic as well so by model we may mean domain model or data model but in general we like to call it the application model now to connect View and model we have a third concept called controller a controller is an object that can handle user interaction so it receives a user request from the browser and talks to the model so it gets the appropriate data then it calls the view or the UI and passes model data to the view the view of the UI is going to take the model data it got from the controller to render the final HTML and that HTML is sent back to the user the concept of a controller can be implemented either using the front controller pattern as with asp.net core MBC or the page controller pattern as with razor Pages now let's see how we can get started with these Frameworks in visual studio so let me start Visual Studio 2022 click create a new project let me narrow down the language to see Sharp and the project type to web if we scroll down a bit we find a template called asp.core web app this allows us to create a razor Pages application next we have asp.core web app but with model view controller using this we can build a server-side web UI with MEC controllers and views then we have asp.core web API which allows us to build web apis with MVC controllers finally we find two templates for Blazer webassembly and Blazer server if we narrow down the templates to Maui we find.net Maui Blazer app so Blazer has three hosting models one is called Blazer web assembly the other one is called Blazer server and the third one is called Blazer hybrid which can be used with dotnet Maui for now let's create a new asp.net core MBC project in an MVC project we have one folder each four models views and controllers the controllers folder contains controller classes that handle requests for a given feature area of the application so for instance if I'm working with the employees feature I can go ahead and add a class called employees controller as pointed out earlier using MVC we can build either a web API or a web UI so if you are building a web API the controller class has to inherit from a base class called controller base whereas if you are building a web UI our controller class has to inherit from controller next a controller class has one or more action methods for managing operations related to that feature so for example if the request is coming for getting a list of employees we can have an action method called index which internally talks to the application model to get all the employees and pass it to The View the model itself will be in a separate folder called models the corresponding view will be in the views folder within a folder named after the controller here in our case employees so our razor view will go inside the employees folder and it should be named after the action method which is index in our case so in asp.net core ABC we have three folders each four models views and controllers so there is separation of concerns leading to easier maintenance and testability there is one problem though anytime we want to add a new feature to our application we need to First add a controller for that feature along with a model class in the models folder for the data and finally a view in the views folder for the UI so we have to work with three folders for one single feature and tomorrow if we need to change the feature we have to change it in all the three places so to solve this problem razor Pages was introduced in asp.core 2.0 let me create a razor Pages project here we have a Pages folder which will contain all our razor pages let's go ahead and create a new folder called employees and inside it create a Razer page called index a Razer page consists of two files one the dot CS HTML file which is called the Razer template or the page template on the other one the dot cstml.cs file which is referred to as the code file or the page model class the page model class inherits from a base class called page model and it consists of any data that needs to be passed to the UI plus it also contains page Handler methods which handle user requests so this way we can say that the page model access both the controller and the view model The View model is data that is specific to The View so what about the UI the UI is present in the page template the Cs HTML file as you can see here at the top the page template is associated with the page model class using the atmodel directive this allows the page template to use the data that's exposed by the page model so what's the advantage with Razer pages here we can see that the controller on the model or in the code file the cshtml.cs file and the view is in the Razer template file the Cs HTML file and in Visual Studio the code file is shown nested this means that when we want to add a new operation for a feature such as the ability to create a new employee then we just have to go ahead and create a new Razer page say create and I can work with that single page and later when I want to make a change I just have to do that in a single location now let's create a Blazer webassembly project in Blazer we work with components a component file has a DOT Razer file extension such as the index.razer file inside the pages folder here let's go ahead and create a new folder called chat and add a new Razer component called Fancy button if you're used to JavaScript Frameworks such as angular you know that we can create components with HTML CSS and JavaScript but in Blazer we instead use HTML CSS and C sharp so for example we can create a regular div with class fancy button and inside of it we create a normal HTML element but with an additional at on click attribute setting it to button clicked this is a c-sharp method that is going to live in the utcode block which is where we write C sharp code such as event handlers methods and properties the beauty of components is that once we declare a component with HTML markup CSS and C sharp and of course include a using directive in the Imports file we can just use the component name to include it in any page so I can include it multiple times if I want and I can take this one step further I can take my fancy button component and include it in a Razer class library and publish that as a nuget package so that anyone who wants to make use of the fancy button component can download the nuget package and include it in their app the component can be included in different types of Blazer applications these are referred to as the hosting models of Blazer in the Blazer webassembly hosting model like the one we just created the application makes use of an open web standard called webassembly the Blazer webassembly application executes on the client side in the browser except when API calls need to be made in the Blazer server hosting model the application executes on the server using a signalr connection with the browser for UI updates one final thing the way we write our components is referred to as the app model or the component model now regardless of the hosting model the app uncomponent model is the same so we can create our components in one hosting model and reuse that in another hosting model that's it for this video hope you found the video useful thanks for watching

Channel: CodeGanesh

Views: 7,864

Keywords: razor pages vs mvc vs blazor, razor pages vs mvc, asp.net core razor pages, razor pages, what is asp.net core razor pages, asp.net core razor pages example, razor pages in asp.net core, .net 6 razor pages, asp net core razor pages, asp.net core razor, blazor, microsoft blazor, blazor tutorial, blazor webassembly, blazor server, blazor server tutorial, blazor server side, blazor server vs blazor webassembly, .net 6 razor, asp.net core 6 razor, visual studio 2022, codeganesh

Id: _wlkX6vMQes

Length: 12min 13sec (733 seconds)

Published: Fri Nov 11 2022