The Basics of Building a Blazer Application: A Step-by-Step Guide

Building an application with Blazer can seem like a daunting task, but it's actually quite straightforward once you understand the basics. In this guide, we'll walk through the process of creating a simple Blazer application from scratch.

Creating a Student Data Model

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

First things first, let's create our student data model. We want to store information about students in the database and display them on our index page. To do this, we need to define a struct that will hold our student data. This struct should have fields for the student's name, age, and birthday.

```blazer

struct Student {

name: String,

age: i32,

birthday: String,

}

```

Next, we'll create a database connection to store our students in. We'll use the `blazer::db` module to connect to our SQLite database.

```blazer

use blazer::db;

#[blazer]

fn main() {

let conn = db::connect("students.db").unwrap();

// ...

}

```

Now, we can create a function to insert new students into the database. This function will take in the student's data and store it in the database.

```blazer

fn add_student(conn: &db::Connection, name: String, age: i32, birthday: String) {

let mut stmt = conn.prepare("INSERT INTO students (name, age, birthday) VALUES (?, ?, ?)").unwrap();

stmt.execute(&[name, age, birthday]).unwrap();

}

```

Next, we'll create a function to retrieve all students from the database. This function will return a list of all students in the database.

```blazer

fn get_students(conn: &db::Connection) -> Vec {

let mut stmt = conn.prepare("SELECT * FROM students").unwrap();

let rows = stmt.query().execute().unwrap();

let mut students = Vec::new();

for row in rows {

let student = Student {

name: row.get(0),

age: row.get(1),

birthday: row.get(2),

};

students.push(student);

}

students

}

```

Now, we can use these functions to add new students and retrieve all existing students. We'll create a `blazer::Component` to render the index page.

```blazer

#[blazer]

fn index_page(conn: &db::Connection) {

let students = get_students(conn);

// Render the index page with the list of students.

}

```

Creating an Interactive Form

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

Now, we want to create an interactive form that allows users to add new students. To do this, we need to make our component page interactive.

```blazer

#[blazer]

fn create_page(conn: &db::Connection) {

let mut stmt = conn.prepare("INSERT INTO students (name, age, birthday) VALUES (?, ?, ?)").unwrap();

// Render the form and handle user input.

}

```

We can make our component page interactive by specifying the `render mode` as "interactive server".

```blazer

#[blazer]

fn main() {

#[blazer::main(page = "index")]

fn index_page(conn: &db::Connection) {

// ...

}

#[blazer::main(page = "create", render_mode = "interactive_server")]

fn create_page(conn: &db::Connection) {

// ...

}

}

```

Adding Validation

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

Now, we want to add validation to our form. We can do this by checking the user input as soon as they click out of the form.

```blazer

#[blazer]

fn create_page(conn: &db::Connection) {

let mut stmt = conn.prepare("INSERT INTO students (name, age, birthday) VALUES (?, ?, ?)").unwrap();

// Render the form and handle user input.

if !validate_form() {

return Err(BlazerError::InvalidForm);

}

// Insert new student into database.

}

```

We can validate the form by checking that the age is between 18 and 35.

```blazer

fn validate_form() -> bool {

let mut stmt = conn.prepare("SELECT * FROM students WHERE name = ?").unwrap();

stmt.execute(&[""]).unwrap();

// ...

}

```

Deleting a Student

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

Now, we want to delete a student. To do this, we need to create an edit page.

```blazer

#[blazer]

fn delete_page(conn: &db::Connection) {

let id = get_id_from_url();

// Retrieve the student with the specified ID.

}

```

We can retrieve the student with the specified ID by using a database query.

```blazer

fn get_id_from_url() -> i32 {

// Get the ID from the URL.

}

fn get_student(conn: &db::Connection, id: i32) -> Student {

let mut stmt = conn.prepare("SELECT * FROM students WHERE id = ?").unwrap();

stmt.execute(&[id]).unwrap();

// ...

}

```

Now, we can delete the student by removing them from the database.

```blazer

fn delete_student(conn: &db::Connection, id: i32) {

let mut stmt = conn.prepare("DELETE FROM students WHERE id = ?").unwrap();

stmt.execute(&[id]).unwrap();

}

```

Putting it All Together

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

Now that we've created all the necessary components and functions, we can put everything together.

```blazer

#[blazer]

fn main() {

#[blazer::main(page = "index")]

fn index_page(conn: &db::Connection) {

// Render the index page with the list of students.

}

#[blazer::main(page = "create", render_mode = "interactive_server")]

fn create_page(conn: &db::Connection) {

let mut stmt = conn.prepare("INSERT INTO students (name, age, birthday) VALUES (?, ?, ?)").unwrap();

// Render the form and handle user input.

if !validate_form() {

return Err(BlazerError::InvalidForm);

}

// Insert new student into database.

}

#[blazer::main(page = "delete", render_mode = "interactive_server")]

fn delete_page(conn: &db::Connection) {

let id = get_id_from_url();

// Retrieve the student with the specified ID.

}

}

```

Conclusion

----------

In this guide, we've walked through the process of creating a simple Blazer application from scratch. We've created a student data model, added validation to our form, and deleted a student. This is just a basic example, but it should give you a good starting point for building your own Blazer applications.

Note: This is a simplified guide and might not cover all possible edge cases. You may need to add more error checking and handling code depending on your specific use case.

"WEBVTTKind: captionsLanguage: enthis Blazer framework crash course covers all the essential fundamentals needed to start building web apps with Rich and interactive uis Blazer is a modern front-end web framework based on HTML CSS and C that helps you build web apps faster Alan omary developed this course if you want to get started with Blazer and learn all the fundamentals needed to start building applications in Blazer you are in the right place we'll get started with learning what Blazer is with learn about the project structure and what each file does and we'll go into the different render modes in Blazer and how to create web apps with a crowd operations so just keep on watching well welcome to code the future this is Alan by the way and I help you learn CP and.net on your own without losing any time let's start with our first section in this video we'll get to know Blazer its main characteristics and what it is used for Blazer is the modern front end web framework part of the net platform which is based on HTML CSS and C this framework allows us to build our entire web app from the front end to the back end using a single development stack sharing code for common Logic on the client and server a key feature of Blazer is its component based architecture a Blazer component is a usable piece of web UI that encapsulates both its rendering and UI event handling logic you can create your own components but Blazer also provides many built-in components for many different use cases in Blazer components can be rendered from both the server and the client in order to deliver the best possible web app experience depending on the interactivity required different components or even Pages within the same application can be rendered from the server the client or even a comp comination of both all the render modes and their specifications we will see in detail later on in the series it's important to know that Blazer is not limited to web applications but it's also capable of building native mobile and desktop apps through a hybrid approach known as Blazer hybrid blending native and web Technologies so I have just opened up visual studio here just create new project and I'm going to need to find the Blazer web app template let me just see what we have here okay so the first one we got is the one we need click on next I'm leaving everything as default here the project name and it location and here we can see that we are using net 8 I'm going to leave every everything as it is the interactive render mode is selected as server by default we're going to see later on in another video all of these render modes in Blazer but for now we're just leaving everything as it is and the interactivity will leave as it is as well per page and component and let me just create our first Blazer web app okay our project is created just run our project here click on start without debugging and let's see our default project okay so here's our Blazer web application we have a homepage here just stating hello world welcome to your new app and then we see we have a navigation menu on the left or like a panel here where we can navigate to The Counter page we just have a counter that we can increase by clicking on the button and we also have a weather page that just loads some boilerplate weather forecast data so right now in this video we're just going to go back to our project and see what each file in our project contains every C based net project has a project file with a CS Pro extension here are usually inputed properties and settings that determine how the project will be built and compiled we have specified here the net version that we want our project to use and this other line enables notable reference types and here is specified that the licit usings are enabled in this project which automatically includes common namespace Imports based on the project type this feature basically reduces the need for repetitive using directives at the top of every file let's now go to program.cs file which is the entry point of our application let's just start from the top this line creates a new instance of web application Builder by ining the static create Builder method then we configure Services of for the application here we adding eraser components and interactive server components and in this line here this line here builds the web application instance or basically our app and we have now an app and then we write the middleware for a bunch of different things this line adds middleware to redirect HTTP requests to https then here we add middleware to serve static F static files like HTML CSS JavaScript from the web rout directory this line adds middleware to protect against cross site request forer your text and here we are mapping the app component as the root component for razor components in aing interactive server rendering mode and in the end we are on the application which is now ready to listen for and to handle HTTP requests let's go now to the www root folder which contains static web assets that are served directly to the client's web browser here you can have HTML CSS and JavaScript files as well as images or other static Assets in the properties folder then we have the launch settings. JSM file that contains settings related to how the application is launched during development they can be modified to sue the specific requirements of the project or different development environments we have as well the app settings. Json file which contains configuration settings for the application that you want to be part of your app at run time things like connection strings various application settings such as logging levels default values for certain parameters or even third party service configurations we have an an app settings. development. Json file as well which stores configuration settings specific to the development environment and just like this we can create files for the other specific environments like for staging and production as well let's go now to the components folder where we have all of the components of our app in app datar Razer we have the root component where we can see the root HTML document the Blazer router and the Blazer script tags inside the routes. Eraser file is defined the routing configuration for the application it basically specifies the mapping between URLs and the corresponding components or pages to render all of our pages are inside our Pages folder as we can see here we have the home the weather page or component now let's go to the layout folder which contains the layout components layout components Define the overall structure and appearance of our applications Pages we have the main layout. Razer file which is the main layout component component used by our application and it usually defines the overall structure of the of the application Pages such as the header the navigation the footer if needed and so on and then the nav menu data Razer file contains the markup and code for the navigation menu component lastly we can see that we have the imports. Razer file which is actually a special razor file that contains the using directives that import namespaces globally for use across all of our bler components within the project this way we do not need to specify the namespace in each individual component file so this was an overal introduction of the files in our project and what they are used for just as a quick reminder if you have been getting value so far please like the video and subscribe to the channel for more content now back to we left off let's start by navigating to the components folder in our project here you'll find various eraser files as you can see and this files in Blazer Define the usable components that make up different parts of our application's user interface now what exactly is a razor file well it's essentially a blend of HTML and C Razer is a markup syntax that allows us to Define rendering logic like conditionals and expressions alongside our HTML markup if we navigate to the pages folder we'll find the pages of our application also written as Razer files for example the homepage is defined by the Home data Razer file or we can call it the home component here we see the page directec specifying the route for this page this ensures that the home component is displayed when the user navigates to the route of the app additionally we have the page title component which sets the title for the current page displayed in the browser tab so except for the components that we can create we also have built-in components just like this page title component the rest of the file is normal HTML that defines the content for the page if we try to run our application we'll be redirected to the root of the app which is our homepage now let's take a look at the counter component it is located in the Pages directory as well this component renders a simple counter that increments each time a button is clicked notice the page directive specifying the route for the component and the render mode directive enables interactive server rendering and we will actually see in a separate video in more detail all the render modes in Blazer but this basically makes possible the user interactivity in our web app what we have next each time we select the click me button the onclick event is fired the increment count method then is called which is declared in our code block where we write most of our C code and this method increments the current count field which is defined above inside this code block as well and then the current count is displayed inside the paragraph element using C syntax with the add sign if we navigate now to our counter page we can use the menu on the left to go there we can see how the counter Works each time we click the button the current count is then incremented and we can see its value displayed on the screen but how do we use components in specific parts of our application well we just add an HTML style tag with the name of the component for instance to add the counter component to the homepage we simply include a counter element in the home data rer file we can run the application and we will see that we have a counter in our homepage as well components can also have parameters which allow you to pass data to the component when it's used component parameters are defined by adding a public C property to the component which also needs to have a parameter attribute we can then specify a value for a component param parameter using an HTML style attribute that matches the property name so we can define a parameter on the code Block in the counter component to specify how much it increments with every button click we are defining a public int increment amount property and we're setting its initial value to one so that it increases with one and we need to change the increment count method to use the increment amount value when incrementing the value of current count now in home doar Razer we can update the counter element to add an increment amount attribute that changes the increment amount to let's say 10 but you can put here any value any integer we can run the app again and we will see that the home component now has a counter that increments by 10 each time we click the button we can go and see in our counter page that the counter increments only by one since these are two different counters and one was the default value given to the property of the component and that concludes our brief overview of components in bler and how to use them webui elements can trigger different kinds of events in response to user interactions and we'll see how to handle these events in order to create Dynamic and responsive user interfaces in our Blazer applications some of the common UI events that will cover are click events Mouse events keyboard events form events and focus events event handlers in Blazer are attached to HTML elements or Blazer components using special attributes but we'll see now how it works works okay so let's go back to our project we have here just like a simple Blazer web project just created just like in previous videos as well and let me just open up the solution Explorer so in our counter page we basically see in the previous videos as well that we have actually handled an event in this component we have handled here the unclick event event with this event handler right here so basically the unclick event is specified in the button element with this unclick attribute and it has received a value of the method that we would want to basically be called as soon as this event is fired so after we have uh the buttons clicked this method is being called and we have specified the method in our code block below just like we saw in the previous video and if we click on the button this increases the current count variable and it is basically displayed here above there's also another way to handle this events we could use a Lambda expression in the value of this onclick attribute and we could just increase the current count fied with this increment operator and this would do the same thing that this method does we usually do it with methods but if it's something pretty simple or short we could use a Lambda expression let me just test it here so this still works just the same way now I'm we're just going to see some other type of events that we can handle in this video let me just take firstly an example of a form event I am taking the oninput event which basically is an event that is handled as soon as we inut some data in an input tag uh we'll see how this works I'm just going to take like an input elements single tag I'm just giving it a type of text basically just to specify that it receives text and here we can just write this add sign to get the event to to write the event attribute which uh has a name of on input and will give a value to this attribute like handle input which will be the name of the method which will'll use to handle this we could manually just write another method just like we did below here but if we just hover over this name of the method we can see a light bulp here which gives us an option to generate for us an event handler or an asynchronous event handler so a synchronous or an asynchronous event handler depending on the use case so basically just a method to help us Define what we want to do with our event I'm just clicking the first one to have a synchronous event handler which is just a method and we can see by default here that this method also takes a change event argument this arguments basically just contain some additional information about the the event that is erased we could basically just use the argu this argument ments in the as a parameter in our methods they are not necessary if we do not want the information that this arguments give us we we do not have to use them but we'll see why they are useful just right here so how I want to handle this event is that basically I just want as soon as we type something in the input I want to show it just below for this reason I'm just going to take a paragraph tag here and I going to have a string variable below naming it text giving it an initial value of like an empty string and I'm displaying its value here by using the add sign I'm taking the value of the variable right here just below the input tag and I'm just going to put all this part in a single div so that they are like in two different lines and I would want them to be like to have a bit space from above for this reason I'm just going to give them like a boot strap class of margin four it just gives some margin on top on bottom in each side basically just a boot strap class and right here on the method now as soon as we input something on the input so we're going to set the text variable to the value of the input and for this reason we're using this argument we can see here that this argument contains different properties if we use this value property here this gives us the information of the value let's input it in our input tag we see an error here this happens because this expression is basically an object we can just simply cast it to string since we are assigning it to a string variable we also see this other underline here which basically is the compiler is telling us that this expression could be null and if we just put the exclamation mark on the end we're telling the compiler that the value of the expression won't be null let me run the application so we see the result okay here we have our form as soon as we input something on the input it is automatically the method is being called and the on the text variable everything that we inut in our form is displayed just down below so let me just now see like a mouse event for this reason I'm just going to make the codes so that as soon as we hover over some specific div we would want the some text to appear or something for this reason I'm just taking a div element here I'm making it a bit visible so I'm giving it a b border so I'm making the border to be one pixel solid and black and here I'm just going to need to input I'm going to need another actually another variable I'm taking uh I'm naming it like the text so as soon as we hover over some specific a division we want text to be displayed just using a paragraph tag again and here I'm just inputting the value of the the text and we need to specify the event attribute here on we have different Mouse events that can be triggered that we can actually handle I'm just using the on Mouse over and we'll handle this event with a handle mouse or like a mouse over method then click over here and generate an event handler as you can see in this different event we have a different argument than the argument of the other event this is just because that this event take different kind of information about that specific about that specific event which once again we can use if we want to or if we do not want to we we don't have to use this arguments in my case I'm just going to display to the div text like a text of overing over the div just some text let me run this and as soon as we we see this this div with a a border and as soon as I hover over with the mouse we see this text being displayed inside the div because the method was triggered and we updated the value of this D text variable that was inside the div inside the paragraph text here now let's just see another event let me just take the example of the keyboard keyboard events so we have different kind of keyboard events I'm just going to use the unkey down event now I'm just going to show you how it works so it's triggered as soon as we input something as we press something in a keyboard and for for this for this demonstration I'm just going to use this first div that we wrote above so I'm just going to change the event handler here so I'm taking an ony down attribute and I handle it with the method and the key down so you can see again other argument the keyboard event argument that contains information about that this event for this case I'm just going to I'm just going to set to the text variable the value of the key that we have pressed so to do this I'm just taking the event we have the different properties here and I just need to write to use this key property to get the value of that key you can see how this will work if I run the application so now we'll we're handling this event in this first input and as if I press something on my keyboard we see this displayed then so basically the last key that we have inputed that we have pressed we see displayed below this doesn't only take numbers and characters but also the other the other keys in our keyboard okay so one last a couple last events that we'll see now are the focus events so we have an on focus and one on blur event which basically just are triggered the first one when we click on a form and the second one when we click out of a form okay so I'm still going to use this first form for this demonstration as well so I'm just removing this event handler and I'm using firstly on the unfocus event and the focus will be the name of the method and on the same input I'm just also handling the on blur event with the method I'm giving it the name of handle blur so now let us just generate an event handler for each one of those so we see yet again another argument that contains information about this event and but we're not going to use it in our case so I'm just basically going to display to the text something like you are typing whenever we click on the form or basically the form is focused you that's okay I would suggest and for the handle blur method let us change so for the onblur event let us generate an event handler and just some different text there you are not typing you have clicked away let's see how this works so as soon as I click on the form we see this text as soon as I clicked outside the form then this other so basically the umblr event was triggered so when we click the form the on Focus event is triggered and we see this message displayed and then we need to click actually not just overover outside the form the input but click outside the input to to be able to trigger the onpl event and there are different kind of of events that we can handle but these were some of the types just to give you an understanding on how handling web UI events works as an overview data binding connects our applications UI with underlying data sources with data binding we can synchronize the state of our components with changes in data resulting in a responsive and dynamic user experience so we are in Visual Studio here I have opened up a project that I've been working on in this series so basically just a blank project where on the counter component here on the counter page and I've just left a small piece of code from the previous video when we saw event handling and basically we have an inside a div element we have an input when we type anything in our input this we have specified an event handler here to basically just take the value of whatever we inut there and paste it into this paragraph using this this add sign to display the value of the text field that we have specified below and basically what we have seen here is a oneway data binding so the one a one way data binding occurs when the information or the data flows only in One Direction which is basically used to display data in the UI so this happens when we take the data uh from a c codee or from a database and just display it in our UI usually using this at sign and the difference between one-way data binding and two-way data binding is that on in two-way data binding the data flows in both directions so basically whenever a value changes in the UI this also updates our C code or the data in our database and vice versa whenever we change something right here in the C in our C code this will also update our UI and to basically do this we need the we can just delete this code we do not need this event handler here we can use the bind attribute and we can bind our input here to the text field so just this line here will do the same thing that our event handler did whatever we write in our input the content of our input will be binded to this text field and then here below we are displaying the text field value let me just run our project so here in our counter page if I type something and I'm going to click away we see that the content of our input was binded to the text variable and just like we saw there The Binding occurred on the on change event actually that's what happens by default but we can change the binding event by just using the bind attribute bind then colum and then event we want the binding to happen on input so as soon as we type any key in our keyboard we would want the binding to happen and the value of the text to be updated let me just H load the project here we refresh as just after any character I type we see that the value of the paragraph element just updates okay one other concept that is work mentioning is that we can basically choose to to run a specific block of code after The Binding happens uh this would be very useful if we had a search box and we would basically want to query in a database and would want some action to occur if we type something in our search box to do this just need to use this bind after attribute and here we can specify the the name of the method that we want to be triggered so let me just create a method I'm just name the method search here we can create an asynchronous method here just we're just simulating a search like we're searching something in the database so async task since we're writing an asynchronous method I'm naming it search I mean that's the name of the method that we specified above and we would want to basically didn't just take another string field here naming it a result giving it an initial value of an empty string we're going to display it just below inside the paragraph tag we're using the oneway data binding here with this add sign and when our method our search method is triggered we want to update the value of our result field to let's say let's write the number here 150 results were found and we can also just use this task not delay method here to delay the execution of the following line with let's say 3 seconds so since this is an asynchronous method we need the the wait keyword before the method let me just run the project one more time to see how it works okay so as soon as we type something here after 3 seconds we should be able to see meth the search method was triggered and we see this displayed in our paragraph below so that was Data binding in Blazer please make sure to leave a comment if you have any questions and just as a reminder you can check out my C ebook if you want to learn more about C or even if you already know the language just to have a high quality reference guide at all times we'll explore each render mode in Blazer introducing them discussing their usage and we'll cover some examples in action we'll start by using a default Blazer web app project as we've been doing so far in this series so let's get started the first render mode we are going to see is static server side the rendering by default our bler components are static Ally rendered from the server what this means is that as soon as a request is routed to our component playe HTML will be rendered as a response from the server and that's basically it no state is maintained on the server static components are great when you do not need to handle UI events from users but you only want to render some plain HDML most of the components in our default app are statically rendered such as the homepage the weather page or the layout component but Blazer can actually enhance static components to make user interactions more responsive for example Blazer can enhance page navigation and form handling enhanced navigation in Blazer allows users to navigate between different pages or components within a Blazer application while preserving the application State users can transition between different View faster and smoother without full page reloads what happens in the background is that Blazer intercepts the navigation and makes a fet request to the server Blazer receives the HTML from the server and then applies the needed changes to the Dome Blazer enhances navigation by default while forms can be optionally enhanced if you want to let us now take a look at at streaming rendering streaming rendering allows your application to render parts of a web page or component as data becomes available from the server this surrender mode is particularly useful when your page needs to perform some long asynchronous tasks before it fully renders such as making a fetch request to an API or pulling data from the database with streaming rendering in Blazer the server starts sending HTML content to the client as soon as it's available rather than waiting for the entire page or component to be fully rendered you usually see some placeholder content like those loading do do dot messages on the screen this allows users to start interacting with the application sooner even before the content is fully loaded when the ASN tasks complete then the rest of the content will be rendered streaming rendering is used on our weather page if you refresh the page you'll see this placeholder content loading do do dot displayed after moment the weather forecast data will then render on the screen if we navigate to our code we'll find that streaming rendering is enabled by applying this streaming rendering attribute we can see below that we are specifying an if block if we don't have the forecast data the loading paragraph is surrendered otherwise we display a table with the weather forecast data in our code block we can observe an uninitialized async method which is a method that is invoked when a component is initialized asynchronously here we're simply simulating an asynchronous call using this task ad delay method and we're not making an API call or something like that and then we're generating the data below once the data is generated the component re renders and the update becomes visible to the client so as we saw earlier initially we see the loading text displayed and after about half a second the table with the data appears now let's explore how we can create fully interactive bler components capable of handling UI events from the browser the two primary interactive render modes we have in Blazer are interactive server rendering and interactive web assembly rendering interactive server rendering manages UI events from the server via websocket connection with the browser Blazer transmits UI events to the server through this connection then Blazer updates the browser Dom with the rendered changes alternatively Blazer components can utilize the interactive web assembly render modes for interactive rendering on the client Cent side in this mode the component code is downloaded to the browser and executed client side using a web assembly based net around time in interactive server rendering the server always requires an open connection with the browser which may result in server costs or some latency the second approach interactive web assembly rendering initially has a longer load time while the net around time is downloaded but once it's done uh it is cached available for future use and as a result it uploads the entire workload from the server to the client there is also a third interactive render mode that combines the strengths of the previous two modes interactive outo render mode components utilizing this mode are initially rendered from the ser server while in the background the net web assembly around time is downloaded upon completion of the download the component automatically switches to web assembly based rendering for future visits so this page loads faster initially as it's surrendered from the server but afterwards the workload is entirely offloaded to the client and no connection with the server is needed our default Blazer project has only one component that uses interactive server mode which is our counter component on top of the page we can see that we are using the surrender mode directive attribute and we're specifying the interactivity to be of type interactive server if we go to our counter page uh basically we when we perform an onclick event on this button we see that the counter increases so the page is basically interactive if you can go click on the page with the right of the mouse and go to inspect to use our developer tools here I'm going to network let me reload the page and here we'll see a websocket connection which has a status of pending what this basically means is that websocket connection is open with the server and is active and if I go to another page if I wait wait a bit we'll see here 16 seconds comma 44 and basically this means that the websocket action was opened for this amount of time so whenever we use components that use the interactive server rendering the web so con connection is opened and then it's closed when we are not using it again if I'm going back to the counter we'll see another webset connection being opened here if I go back to another page the web c connection is was open for 8 seconds for about 8 Seconds and our default laser project does not support the other two render modes so the interactive web assembly rendering or the interactive Auto render mode so for this reason we're going to need to create a new project let me just go to our menu above and create a new project so we're going to create again a Blazer web app project Pro click on next I'm going to leave the name as it is and the location of the files and here in this page now we have the option to select the interactivity type so basically we have here the option to select to set the interactivity of our project To None to server web assembly and auto so basically the first one is the first render mode that we learned which was the static server side rendering with no interactivity at all the second one was the interactive server rendering then the interactive web assembly rendering and then the interactive Auto rendering for this project I'm going to select the uh interactive Auto rendering this project will give us the option also to check how the interactive web assembly rendering works so that I can show you these two types together so I'm going to select this and next we have the option to choose the interactivity location what this means is that as it is per page or component this means that we're going to need to set up the interactivity of each page or each component we specified for each component one by one if we set it to Global all of our components of our application will be set with the same interactivity with the interactive Auto rendering in our case so I'm going to leave it per pager component and going to click on create to create our project okay the project is being loaded what we can see in our solution Explorer is that basically here we have two projects we have a server project and and the client project the server project contains all of our server code and as you can see this is similar to the project structure of our previous Blazer Web projects that we have been creating so far and about the client project the client project basically builds the code that's going to be downloaded on the browser and then that is going to run client side on the users br browser so in the we can just go and check to in program.cs in our server code we can see that the interactivity is set to so it's been it's enabled the interactive server rendering the and the interactive web assembly rendering here we can if we would check what we have in our server project we would see that the on if we go to Pages we will see that all of our Pages or all of our components are as before except the counter page or the counter component this happens because this component was the only component that we had also in our previous projects that is interactive and for this reason this is pushed down in the client project if we check on pages counter data Razer we see that here we have the counter component and basically all of the components or pages that we would want to be eventually run from the browser we all we set this components we place these components in our client project we'll see that by using this render mode directive attribute on top we have set the interactivity to be interactive Auto so basically interactive autor rendering and I'm just going to run the project firstly to see how this work works okay so we are in our homepage I'm going to just inspect the page to open up the developer tools and I'm going to network here and if we try to go to our counter page we'll see all of this stuff being downloaded all of this libraries being downloaded as you can see this takes a while but our page is actually interactive the counter works so what happened here if we filter on websocket we see that the websocket connection is opened so we have a connection with the server here but as well if we go to web assembly here all of these libraries from our client code are being download it and the most important one on here on top we see this net. native thatw file which is theet web assembly around time so this was being downloaded on the background and now it seems to be downloaded so how this works as we explained before let me just go back to our homepage we should see that the websocket connection here ended it was opened for 56 seconds for about 56 seconds but now if we go back to our counter page the counter page is interactive but no other webset connection was opened no circuit connection is actually active here this happens because right now the components rendering switched from interactive server rendering basically to interactive web assembly rendering now all of the UI events that the user triggers will be handled on the browser's side because we download did this net web assembly around time and this is how the interactive auor rendering works I'm going to go back to our project and I'm going to change go to the counter page and change the interactivity to be interactive web assembly so that you will see the difference let me just run the project okay let me go back to here and refresh I think I'm going to need to basically clear this storage data so that we'll see everything that's being downloaded there so if I go to the counter page the counter is not at first interactive this happens because the load time of the component is a bit bigger in the interactive web assembly rendering because all of this stuff were being downloaded in the background when all of these library liaries and this net web assembly around time finished downloading then the component became interactive so all of the UI events were handled then by our by blazer from the users browser so this is was actually the drawback of the interactive web assembly rendering because at first the load time is a bit is a bit longer but once everything was finished and the r time is finished then this is cached and the user events will be then handled faster from the client's browser and if we actually check the websocket connection we'll see no socket con web socket connection was initialized because a server connection is not needed in this type of interactivity to be able to create an application of any level of complexity you need to First learn how to work with Crow operations crud stands for create read update and delete and these are essential operations in all applications in this video we will create the different components in our Blazer web app to perform these operations using scaffolding we will cover various topics including working with data in our Blazer web app connecting our project to a database understanding how form submission and validation work in Blazer and much more so let's get started so let us just create a new project here we're going to select a Blazer web app template here I link the application Blazer CR click on next and I'm going let the interactivity to be server so interactive server rendering and I'm going to set it leave it as it is per page component and not globally I'm going to create the project now okay the project is created the first thing we are going to need is we're going need to create the data model for us to be able then to perform the croud operations for that data model so I'm going to the project directory here and I'm going to add a models folder inside this folder I'm going to add a Class A model class let's let's say a model class for student let's give a few properties to this class public in ID property as always a property for the ID and then a property for the name I'll set it to be nullable so name for the AG and one for the let's say a date time property for the birthday let's just leave it with these four properties right now the Blazer actually gives us the option to create all of the pages or components to be able to perform the crowd operations for a specific model and we can do this by just going to the components folder to the pages folder here and I'm going to click on add a new scaffolded item that we go to raser components and click on eraser component using Entity framework it's basically a very easy way and a simple way to for us to get started with blazer even if we have some specific project and we could for example we could select we could only need like a create page an edit page or one of these we can select only one of these options here but for this video I'm going to tell Blazer to create all of the five all of the five pages for our crowd operations I'm going to select the model to be student the model that we created then I'm going to add a new DB context class here that we haven't created yet basically this is just the C class that connects our models to the database each time we create a new model a new data mod model we write its instance inside this context class and then when we want to access some specific data or some specific model we then again use the context to get the data from it so I'm just going to add a new context here I'm going to leave the database provider to be SQL Server click on ADD and let the Blazer do basically all the work for us okay inside the pages folder we have a student Pages folder with all of our crowd Pages or with our components we have a create component here a delete details component edit and an index component here as well and we're going to see what all of these do and how they work but firstly we're going to need to I'm going to create a database so that we store all of the data in it and then we do this croud operations by accessing the database so I'm going to go to view server Explorer click here on create new SQL Server database I'm going to need the server name of our my SQL Server management Studio C the server name here input it here and in the encrypt field here I'm going to set the encryption to optional or basically to false initially so that we do not need to log into the database with a password or so each time when we access the database click on trust server certificate and I'm going to give a name to our database let's say pleaser C data click on okay my database instance is created in the properties folder here we have the connection string which I'm going to need to take and paste it in the app settings. J basically when we added our scaffolded item Blazer created like an address here for the for the database a connections since we see here a connection string to be inputed there but I'm just going to substitute it with our database instance that I just created so here we see the encryption was put to false the datab base name is here and then this connection string should already be the service in program that CS file so right now all that's left to do is to add migrations to our database adding migrations basically means that we specify the art database schema so I'm going to need to go to tools n get package manager and package manager console and we need to add to write the command add migration and the name for the migration and basically what will be inputed in the database is the model that we created with its properties this is the migration is basically you can see it here a migrations folder we created in our project it's basically a C Class specifying a database schema and I'm just going to need to write the comment here update database and our model will be then stored in the database with our specifications and now we'll be we are ready to basically see how these croud operations work the index page if we can see here has let's find the route which is slash students so this is where we'll go first and just go to slash students okay we have an empty table here if I click on create new will be redirected to the create page let me give a name here to okay Sean the age 20 and I'm selecting a birthday if I click on create we see that we have a student basically was created in the database and then it's stored here we have its name the age the birthday which is not as well shown actually the date so we actually don't need the hour here but we'll modify it later and on the end on the last column we have three links that can that take us to the details page page with all of the details of the student the edit page allows us to modify the data here if I click on Save we see that the age was modified and if I click on delete here we have the option to delete this student from the database so you can see that our crowd operations are functional and work pretty well right now we just will see how each of this Pages actually works in detail so if I go back we'll start with the index page the main part of the index page here is the quick grid building component quick grid is a data grid component that is built in in Blazer quick grid can access data from different kind of sources here in the items attribute we are accessing the data from our DB Conta here on top of the page we're injecting the our context here and we're giving a name of DB and then we are taking the data from the context this buil-in component is very useful actually because it has it offers multiple features like sorting enabling pagination to the tables and much more actually which we're not going to see all in this video but let's just see below we see these property column tags that basically specify each column that will be inside of the table we are in this property attribute here we are specifying each property of our students model so the student name the students age birthday and we are accessing this by accessing the data from the context and Below on the last column as we saw we are using this template column buil-in component we are just specifying some links to go to the edit page Details page and to the delete page of that specific student using the student ID and this is what we can do in this quick grid component is that as we saw the birthday was not specified as we wanted it to we can basically add a format attribute and let's say dat set it to month day and year if I run the project this should be able to remove the time of the age but we don't have a student anymore here so let me create a new one James Johnson 40 pick a birthday and click on create we'll see that in the birthday column we do not see the time anymore we only see the specific date let me go back to our project we can actually we can use properties to change how this column's name will be displayed so birthday we can set it to if we want to change it let's say we can use the type property to set it to date of birth let's say we should see the column name will be changed here date of birth and this is basically it for the index page if I go now let's just go to the create page we can see that in a create page we're using an edit form building component and this building component is just substituting the form HTML tag and it makes it much easier to connect the data of the form to a specific model here we have we have specified the method type to be of post and we can see this model attribute that specifies the model dat the data model which is student and actually this connects the data that will be submitted from the form it connects it to the this student property here we can see that this student property here has an attribute above Supply parameter from form which basically specifies that as soon as the data is submitted in the form it will be bound to this property here then we'll use this property data here in this add student method below actually we can see that the form had an unvalid submit attribute as well which was set to add student so this is the method that will be invoked as soon as the data in the form was correctly submitted so it was validated the validation was also done correctly which we'll see in a bit and then the form was submitted the method here will be invoked and we'll basically store in the inside the context using this add method here our student that was submitted in the form we'll save the changes to the database and then we'll navigate back to the index page one last thing is the form name was specified to create here in this using this form name attribute and this is necessary in cases that we have multiple forms in our page and when we basically have a property below here we can specify the form name inside this property so that the data of each specific form will be bound to the correct property in our case we do not need this because we only have one form but if we would need to we could use it the last thing we see we have an enhan attribute in the edit form component this basically enables enhanced form handling in Blazer this is some something similar to the enhanced navigation that we saw in a few videos a few videos back so when a form is basically submitted the Blazer intercepts the form submission performs a fetch request to the server and gets a response from the server B basically and performs the needed changes in the Dom it's basically a feature that makes the form more interactive and enhances it so we can see basically saw also before how the form worked but let's just see now what we have inside the edit form we have some divs in each div we have a label for the input we have in the first case here we have an input text building components that take that only takes text input and its value is binded to with this bind value attribute is binded to the student. name so to the name property of the student model and in the second case we have an input number component then an input date component depending on the data that we are inputting there this is bounded to the specific property of the model so that then the all of the data that will be submitted by the form will be easily bound to our property to our student property here below and we can see basically that we have on the end of each div we have a validation message component here we saw on top also we have a data annotations validator and the validation summary component what this now do is that they validate the data so that the correct input will be submitted there to be more specific let me show you how this works if I go back to the models class that we created above we can input restrictions for our properties here let's say we can using data annotations I can put the name to be required and let's say I'm going to put the age to be in a Range within 18 and 35 so students have to be in an age between 18 and 35 then this data annotations validator will display an error message on the end of each input and also on top of the page validation summary with all of the errors that occurred so let me just run the project so that you can see how that basically works okay let's create a new page let's create a new student and let me put a name like them here let's put the age to be 36 let's inut a birthday click on Create and we see that the form was actually not submitted we see the error message here the field age must be between 18 and 35 just like we we specified it and we see the on top of the page a summary of all of the validation errors that occurred if I correct it to be 34 let's say and click on create this student will be stored in the database and then we can see it in our index page this was actually quite useful but one thing missing is that we would want actually to validate for the application to validate the input as soon as we click out of the input form we can enable this in Blazer but we're going to need to make our component page interactive I will do this we can just we just need to specify the render mode on top of the page to be interactive server since we created an application that allows interactive server rendering and if I run the application now it will be more interactive and the validation will happen just as soon as we click out of the form let's just try it one more time let say compter I put AG 15 and I just click away of the of this input form we'll see that this was validated and we see that the age field must be between 18 and 35 we can actually see in the first input form that we see a green outline which basically see says that the data input it is correct and this is what we'll see also if we fix the H here we'll see that the form is outlined with this green color here let me put a birthday here and create the other student so we have three students now let's go to the delete page so on top of the page we have like this big header asking us if we really want to delete the student and here is displayed if the student is not basically loaded yet we see this message if so we'll see all of the data of the student and then an edit form again an edit form component to basically delete this student now code block here what is what we see is that we see an ID property which has this attribute Supply parameter from query what this does is that the this ID property gets the value of from the URL when we go to that URL let me just go to the delete page of the First Student in the URL we see that we have an ID equal to two and what this does is that this property will'll get in this case this ID property will get the value from the URL and then we we're going to use it down below actually we have an un initialized Asing meth method which is a method that is initialized as soon as the component renders we are basically going to find the student by checking through our database for the student with that ID that we got from the URL and then we're going to use this student data here firstly to display the name the age the birthday of the student and then we're going to use it down below here in the edit form if the form is submitted by if when we click to the button here this unvalid submit method will be triggered the delete student method and here we basically go to the context and remove that student save the changes to the database and go back to the students uh to the index page let's just go to The Details page now The Details page as well has an ID property that gets the value from the URL then as soon as the component renders this un uninitialized Asing method is called it Loops through basically the student with that specific ID in the database and then it displays the data to the users as we can see here pretty simple the edit page then basically it is similar to our create page we have this edit form build-in component component but the only difference is that the data is already filled in the inputs of this form because as soon as the component is rendered uh a database check is being done to find the student with that ID that we get from the URL here when it finds this student then its data will be inputed to each input here and we can then make a change make a modification to any of the input that we would want to if we click on Save then the update student method will be triggered which you can see here below basically the first line basically just helps the context to track the changes in the context so sets the state of this entity to modified and then it the changes will be saved to the database if an error occurs will be redirected to a not found page otherwise will just then be redirected again to the students page here let me just show you how the edit works so if you click on edit we make we see that the input is already filled with the users data with the ID of two actually in our case if we make any modification here and save the changes the changes will be saved and we are still redirected to the index page now after completing the Blazer fundamentals make sure to watch my food menu web app project in Blazer it's a very simple project that will help you practice and reinforce what you have already learned I really appreciate you watching this far if you got value from the video don't forget to like it or subscribe to the channel for more content thank you as always for watching and I will see you in the next videothis Blazer framework crash course covers all the essential fundamentals needed to start building web apps with Rich and interactive uis Blazer is a modern front-end web framework based on HTML CSS and C that helps you build web apps faster Alan omary developed this course if you want to get started with Blazer and learn all the fundamentals needed to start building applications in Blazer you are in the right place we'll get started with learning what Blazer is with learn about the project structure and what each file does and we'll go into the different render modes in Blazer and how to create web apps with a crowd operations so just keep on watching well welcome to code the future this is Alan by the way and I help you learn CP and.net on your own without losing any time let's start with our first section in this video we'll get to know Blazer its main characteristics and what it is used for Blazer is the modern front end web framework part of the net platform which is based on HTML CSS and C this framework allows us to build our entire web app from the front end to the back end using a single development stack sharing code for common Logic on the client and server a key feature of Blazer is its component based architecture a Blazer component is a usable piece of web UI that encapsulates both its rendering and UI event handling logic you can create your own components but Blazer also provides many built-in components for many different use cases in Blazer components can be rendered from both the server and the client in order to deliver the best possible web app experience depending on the interactivity required different components or even Pages within the same application can be rendered from the server the client or even a comp comination of both all the render modes and their specifications we will see in detail later on in the series it's important to know that Blazer is not limited to web applications but it's also capable of building native mobile and desktop apps through a hybrid approach known as Blazer hybrid blending native and web Technologies so I have just opened up visual studio here just create new project and I'm going to need to find the Blazer web app template let me just see what we have here okay so the first one we got is the one we need click on next I'm leaving everything as default here the project name and it location and here we can see that we are using net 8 I'm going to leave every everything as it is the interactive render mode is selected as server by default we're going to see later on in another video all of these render modes in Blazer but for now we're just leaving everything as it is and the interactivity will leave as it is as well per page and component and let me just create our first Blazer web app okay our project is created just run our project here click on start without debugging and let's see our default project okay so here's our Blazer web application we have a homepage here just stating hello world welcome to your new app and then we see we have a navigation menu on the left or like a panel here where we can navigate to The Counter page we just have a counter that we can increase by clicking on the button and we also have a weather page that just loads some boilerplate weather forecast data so right now in this video we're just going to go back to our project and see what each file in our project contains every C based net project has a project file with a CS Pro extension here are usually inputed properties and settings that determine how the project will be built and compiled we have specified here the net version that we want our project to use and this other line enables notable reference types and here is specified that the licit usings are enabled in this project which automatically includes common namespace Imports based on the project type this feature basically reduces the need for repetitive using directives at the top of every file let's now go to program.cs file which is the entry point of our application let's just start from the top this line creates a new instance of web application Builder by ining the static create Builder method then we configure Services of for the application here we adding eraser components and interactive server components and in this line here this line here builds the web application instance or basically our app and we have now an app and then we write the middleware for a bunch of different things this line adds middleware to redirect HTTP requests to https then here we add middleware to serve static F static files like HTML CSS JavaScript from the web rout directory this line adds middleware to protect against cross site request forer your text and here we are mapping the app component as the root component for razor components in aing interactive server rendering mode and in the end we are on the application which is now ready to listen for and to handle HTTP requests let's go now to the www root folder which contains static web assets that are served directly to the client's web browser here you can have HTML CSS and JavaScript files as well as images or other static Assets in the properties folder then we have the launch settings. JSM file that contains settings related to how the application is launched during development they can be modified to sue the specific requirements of the project or different development environments we have as well the app settings. Json file which contains configuration settings for the application that you want to be part of your app at run time things like connection strings various application settings such as logging levels default values for certain parameters or even third party service configurations we have an an app settings. development. Json file as well which stores configuration settings specific to the development environment and just like this we can create files for the other specific environments like for staging and production as well let's go now to the components folder where we have all of the components of our app in app datar Razer we have the root component where we can see the root HTML document the Blazer router and the Blazer script tags inside the routes. Eraser file is defined the routing configuration for the application it basically specifies the mapping between URLs and the corresponding components or pages to render all of our pages are inside our Pages folder as we can see here we have the home the weather page or component now let's go to the layout folder which contains the layout components layout components Define the overall structure and appearance of our applications Pages we have the main layout. Razer file which is the main layout component component used by our application and it usually defines the overall structure of the of the application Pages such as the header the navigation the footer if needed and so on and then the nav menu data Razer file contains the markup and code for the navigation menu component lastly we can see that we have the imports. Razer file which is actually a special razor file that contains the using directives that import namespaces globally for use across all of our bler components within the project this way we do not need to specify the namespace in each individual component file so this was an overal introduction of the files in our project and what they are used for just as a quick reminder if you have been getting value so far please like the video and subscribe to the channel for more content now back to we left off let's start by navigating to the components folder in our project here you'll find various eraser files as you can see and this files in Blazer Define the usable components that make up different parts of our application's user interface now what exactly is a razor file well it's essentially a blend of HTML and C Razer is a markup syntax that allows us to Define rendering logic like conditionals and expressions alongside our HTML markup if we navigate to the pages folder we'll find the pages of our application also written as Razer files for example the homepage is defined by the Home data Razer file or we can call it the home component here we see the page directec specifying the route for this page this ensures that the home component is displayed when the user navigates to the route of the app additionally we have the page title component which sets the title for the current page displayed in the browser tab so except for the components that we can create we also have built-in components just like this page title component the rest of the file is normal HTML that defines the content for the page if we try to run our application we'll be redirected to the root of the app which is our homepage now let's take a look at the counter component it is located in the Pages directory as well this component renders a simple counter that increments each time a button is clicked notice the page directive specifying the route for the component and the render mode directive enables interactive server rendering and we will actually see in a separate video in more detail all the render modes in Blazer but this basically makes possible the user interactivity in our web app what we have next each time we select the click me button the onclick event is fired the increment count method then is called which is declared in our code block where we write most of our C code and this method increments the current count field which is defined above inside this code block as well and then the current count is displayed inside the paragraph element using C syntax with the add sign if we navigate now to our counter page we can use the menu on the left to go there we can see how the counter Works each time we click the button the current count is then incremented and we can see its value displayed on the screen but how do we use components in specific parts of our application well we just add an HTML style tag with the name of the component for instance to add the counter component to the homepage we simply include a counter element in the home data rer file we can run the application and we will see that we have a counter in our homepage as well components can also have parameters which allow you to pass data to the component when it's used component parameters are defined by adding a public C property to the component which also needs to have a parameter attribute we can then specify a value for a component param parameter using an HTML style attribute that matches the property name so we can define a parameter on the code Block in the counter component to specify how much it increments with every button click we are defining a public int increment amount property and we're setting its initial value to one so that it increases with one and we need to change the increment count method to use the increment amount value when incrementing the value of current count now in home doar Razer we can update the counter element to add an increment amount attribute that changes the increment amount to let's say 10 but you can put here any value any integer we can run the app again and we will see that the home component now has a counter that increments by 10 each time we click the button we can go and see in our counter page that the counter increments only by one since these are two different counters and one was the default value given to the property of the component and that concludes our brief overview of components in bler and how to use them webui elements can trigger different kinds of events in response to user interactions and we'll see how to handle these events in order to create Dynamic and responsive user interfaces in our Blazer applications some of the common UI events that will cover are click events Mouse events keyboard events form events and focus events event handlers in Blazer are attached to HTML elements or Blazer components using special attributes but we'll see now how it works works okay so let's go back to our project we have here just like a simple Blazer web project just created just like in previous videos as well and let me just open up the solution Explorer so in our counter page we basically see in the previous videos as well that we have actually handled an event in this component we have handled here the unclick event event with this event handler right here so basically the unclick event is specified in the button element with this unclick attribute and it has received a value of the method that we would want to basically be called as soon as this event is fired so after we have uh the buttons clicked this method is being called and we have specified the method in our code block below just like we saw in the previous video and if we click on the button this increases the current count variable and it is basically displayed here above there's also another way to handle this events we could use a Lambda expression in the value of this onclick attribute and we could just increase the current count fied with this increment operator and this would do the same thing that this method does we usually do it with methods but if it's something pretty simple or short we could use a Lambda expression let me just test it here so this still works just the same way now I'm we're just going to see some other type of events that we can handle in this video let me just take firstly an example of a form event I am taking the oninput event which basically is an event that is handled as soon as we inut some data in an input tag uh we'll see how this works I'm just going to take like an input elements single tag I'm just giving it a type of text basically just to specify that it receives text and here we can just write this add sign to get the event to to write the event attribute which uh has a name of on input and will give a value to this attribute like handle input which will be the name of the method which will'll use to handle this we could manually just write another method just like we did below here but if we just hover over this name of the method we can see a light bulp here which gives us an option to generate for us an event handler or an asynchronous event handler so a synchronous or an asynchronous event handler depending on the use case so basically just a method to help us Define what we want to do with our event I'm just clicking the first one to have a synchronous event handler which is just a method and we can see by default here that this method also takes a change event argument this arguments basically just contain some additional information about the the event that is erased we could basically just use the argu this argument ments in the as a parameter in our methods they are not necessary if we do not want the information that this arguments give us we we do not have to use them but we'll see why they are useful just right here so how I want to handle this event is that basically I just want as soon as we type something in the input I want to show it just below for this reason I'm just going to take a paragraph tag here and I going to have a string variable below naming it text giving it an initial value of like an empty string and I'm displaying its value here by using the add sign I'm taking the value of the variable right here just below the input tag and I'm just going to put all this part in a single div so that they are like in two different lines and I would want them to be like to have a bit space from above for this reason I'm just going to give them like a boot strap class of margin four it just gives some margin on top on bottom in each side basically just a boot strap class and right here on the method now as soon as we input something on the input so we're going to set the text variable to the value of the input and for this reason we're using this argument we can see here that this argument contains different properties if we use this value property here this gives us the information of the value let's input it in our input tag we see an error here this happens because this expression is basically an object we can just simply cast it to string since we are assigning it to a string variable we also see this other underline here which basically is the compiler is telling us that this expression could be null and if we just put the exclamation mark on the end we're telling the compiler that the value of the expression won't be null let me run the application so we see the result okay here we have our form as soon as we input something on the input it is automatically the method is being called and the on the text variable everything that we inut in our form is displayed just down below so let me just now see like a mouse event for this reason I'm just going to make the codes so that as soon as we hover over some specific div we would want the some text to appear or something for this reason I'm just taking a div element here I'm making it a bit visible so I'm giving it a b border so I'm making the border to be one pixel solid and black and here I'm just going to need to input I'm going to need another actually another variable I'm taking uh I'm naming it like the text so as soon as we hover over some specific a division we want text to be displayed just using a paragraph tag again and here I'm just inputting the value of the the text and we need to specify the event attribute here on we have different Mouse events that can be triggered that we can actually handle I'm just using the on Mouse over and we'll handle this event with a handle mouse or like a mouse over method then click over here and generate an event handler as you can see in this different event we have a different argument than the argument of the other event this is just because that this event take different kind of information about that specific about that specific event which once again we can use if we want to or if we do not want to we we don't have to use this arguments in my case I'm just going to display to the div text like a text of overing over the div just some text let me run this and as soon as we we see this this div with a a border and as soon as I hover over with the mouse we see this text being displayed inside the div because the method was triggered and we updated the value of this D text variable that was inside the div inside the paragraph text here now let's just see another event let me just take the example of the keyboard keyboard events so we have different kind of keyboard events I'm just going to use the unkey down event now I'm just going to show you how it works so it's triggered as soon as we input something as we press something in a keyboard and for for this for this demonstration I'm just going to use this first div that we wrote above so I'm just going to change the event handler here so I'm taking an ony down attribute and I handle it with the method and the key down so you can see again other argument the keyboard event argument that contains information about that this event for this case I'm just going to I'm just going to set to the text variable the value of the key that we have pressed so to do this I'm just taking the event we have the different properties here and I just need to write to use this key property to get the value of that key you can see how this will work if I run the application so now we'll we're handling this event in this first input and as if I press something on my keyboard we see this displayed then so basically the last key that we have inputed that we have pressed we see displayed below this doesn't only take numbers and characters but also the other the other keys in our keyboard okay so one last a couple last events that we'll see now are the focus events so we have an on focus and one on blur event which basically just are triggered the first one when we click on a form and the second one when we click out of a form okay so I'm still going to use this first form for this demonstration as well so I'm just removing this event handler and I'm using firstly on the unfocus event and the focus will be the name of the method and on the same input I'm just also handling the on blur event with the method I'm giving it the name of handle blur so now let us just generate an event handler for each one of those so we see yet again another argument that contains information about this event and but we're not going to use it in our case so I'm just basically going to display to the text something like you are typing whenever we click on the form or basically the form is focused you that's okay I would suggest and for the handle blur method let us change so for the onblur event let us generate an event handler and just some different text there you are not typing you have clicked away let's see how this works so as soon as I click on the form we see this text as soon as I clicked outside the form then this other so basically the umblr event was triggered so when we click the form the on Focus event is triggered and we see this message displayed and then we need to click actually not just overover outside the form the input but click outside the input to to be able to trigger the onpl event and there are different kind of of events that we can handle but these were some of the types just to give you an understanding on how handling web UI events works as an overview data binding connects our applications UI with underlying data sources with data binding we can synchronize the state of our components with changes in data resulting in a responsive and dynamic user experience so we are in Visual Studio here I have opened up a project that I've been working on in this series so basically just a blank project where on the counter component here on the counter page and I've just left a small piece of code from the previous video when we saw event handling and basically we have an inside a div element we have an input when we type anything in our input this we have specified an event handler here to basically just take the value of whatever we inut there and paste it into this paragraph using this this add sign to display the value of the text field that we have specified below and basically what we have seen here is a oneway data binding so the one a one way data binding occurs when the information or the data flows only in One Direction which is basically used to display data in the UI so this happens when we take the data uh from a c codee or from a database and just display it in our UI usually using this at sign and the difference between one-way data binding and two-way data binding is that on in two-way data binding the data flows in both directions so basically whenever a value changes in the UI this also updates our C code or the data in our database and vice versa whenever we change something right here in the C in our C code this will also update our UI and to basically do this we need the we can just delete this code we do not need this event handler here we can use the bind attribute and we can bind our input here to the text field so just this line here will do the same thing that our event handler did whatever we write in our input the content of our input will be binded to this text field and then here below we are displaying the text field value let me just run our project so here in our counter page if I type something and I'm going to click away we see that the content of our input was binded to the text variable and just like we saw there The Binding occurred on the on change event actually that's what happens by default but we can change the binding event by just using the bind attribute bind then colum and then event we want the binding to happen on input so as soon as we type any key in our keyboard we would want the binding to happen and the value of the text to be updated let me just H load the project here we refresh as just after any character I type we see that the value of the paragraph element just updates okay one other concept that is work mentioning is that we can basically choose to to run a specific block of code after The Binding happens uh this would be very useful if we had a search box and we would basically want to query in a database and would want some action to occur if we type something in our search box to do this just need to use this bind after attribute and here we can specify the the name of the method that we want to be triggered so let me just create a method I'm just name the method search here we can create an asynchronous method here just we're just simulating a search like we're searching something in the database so async task since we're writing an asynchronous method I'm naming it search I mean that's the name of the method that we specified above and we would want to basically didn't just take another string field here naming it a result giving it an initial value of an empty string we're going to display it just below inside the paragraph tag we're using the oneway data binding here with this add sign and when our method our search method is triggered we want to update the value of our result field to let's say let's write the number here 150 results were found and we can also just use this task not delay method here to delay the execution of the following line with let's say 3 seconds so since this is an asynchronous method we need the the wait keyword before the method let me just run the project one more time to see how it works okay so as soon as we type something here after 3 seconds we should be able to see meth the search method was triggered and we see this displayed in our paragraph below so that was Data binding in Blazer please make sure to leave a comment if you have any questions and just as a reminder you can check out my C ebook if you want to learn more about C or even if you already know the language just to have a high quality reference guide at all times we'll explore each render mode in Blazer introducing them discussing their usage and we'll cover some examples in action we'll start by using a default Blazer web app project as we've been doing so far in this series so let's get started the first render mode we are going to see is static server side the rendering by default our bler components are static Ally rendered from the server what this means is that as soon as a request is routed to our component playe HTML will be rendered as a response from the server and that's basically it no state is maintained on the server static components are great when you do not need to handle UI events from users but you only want to render some plain HDML most of the components in our default app are statically rendered such as the homepage the weather page or the layout component but Blazer can actually enhance static components to make user interactions more responsive for example Blazer can enhance page navigation and form handling enhanced navigation in Blazer allows users to navigate between different pages or components within a Blazer application while preserving the application State users can transition between different View faster and smoother without full page reloads what happens in the background is that Blazer intercepts the navigation and makes a fet request to the server Blazer receives the HTML from the server and then applies the needed changes to the Dome Blazer enhances navigation by default while forms can be optionally enhanced if you want to let us now take a look at at streaming rendering streaming rendering allows your application to render parts of a web page or component as data becomes available from the server this surrender mode is particularly useful when your page needs to perform some long asynchronous tasks before it fully renders such as making a fetch request to an API or pulling data from the database with streaming rendering in Blazer the server starts sending HTML content to the client as soon as it's available rather than waiting for the entire page or component to be fully rendered you usually see some placeholder content like those loading do do dot messages on the screen this allows users to start interacting with the application sooner even before the content is fully loaded when the ASN tasks complete then the rest of the content will be rendered streaming rendering is used on our weather page if you refresh the page you'll see this placeholder content loading do do dot displayed after moment the weather forecast data will then render on the screen if we navigate to our code we'll find that streaming rendering is enabled by applying this streaming rendering attribute we can see below that we are specifying an if block if we don't have the forecast data the loading paragraph is surrendered otherwise we display a table with the weather forecast data in our code block we can observe an uninitialized async method which is a method that is invoked when a component is initialized asynchronously here we're simply simulating an asynchronous call using this task ad delay method and we're not making an API call or something like that and then we're generating the data below once the data is generated the component re renders and the update becomes visible to the client so as we saw earlier initially we see the loading text displayed and after about half a second the table with the data appears now let's explore how we can create fully interactive bler components capable of handling UI events from the browser the two primary interactive render modes we have in Blazer are interactive server rendering and interactive web assembly rendering interactive server rendering manages UI events from the server via websocket connection with the browser Blazer transmits UI events to the server through this connection then Blazer updates the browser Dom with the rendered changes alternatively Blazer components can utilize the interactive web assembly render modes for interactive rendering on the client Cent side in this mode the component code is downloaded to the browser and executed client side using a web assembly based net around time in interactive server rendering the server always requires an open connection with the browser which may result in server costs or some latency the second approach interactive web assembly rendering initially has a longer load time while the net around time is downloaded but once it's done uh it is cached available for future use and as a result it uploads the entire workload from the server to the client there is also a third interactive render mode that combines the strengths of the previous two modes interactive outo render mode components utilizing this mode are initially rendered from the ser server while in the background the net web assembly around time is downloaded upon completion of the download the component automatically switches to web assembly based rendering for future visits so this page loads faster initially as it's surrendered from the server but afterwards the workload is entirely offloaded to the client and no connection with the server is needed our default Blazer project has only one component that uses interactive server mode which is our counter component on top of the page we can see that we are using the surrender mode directive attribute and we're specifying the interactivity to be of type interactive server if we go to our counter page uh basically we when we perform an onclick event on this button we see that the counter increases so the page is basically interactive if you can go click on the page with the right of the mouse and go to inspect to use our developer tools here I'm going to network let me reload the page and here we'll see a websocket connection which has a status of pending what this basically means is that websocket connection is open with the server and is active and if I go to another page if I wait wait a bit we'll see here 16 seconds comma 44 and basically this means that the websocket action was opened for this amount of time so whenever we use components that use the interactive server rendering the web so con connection is opened and then it's closed when we are not using it again if I'm going back to the counter we'll see another webset connection being opened here if I go back to another page the web c connection is was open for 8 seconds for about 8 Seconds and our default laser project does not support the other two render modes so the interactive web assembly rendering or the interactive Auto render mode so for this reason we're going to need to create a new project let me just go to our menu above and create a new project so we're going to create again a Blazer web app project Pro click on next I'm going to leave the name as it is and the location of the files and here in this page now we have the option to select the interactivity type so basically we have here the option to select to set the interactivity of our project To None to server web assembly and auto so basically the first one is the first render mode that we learned which was the static server side rendering with no interactivity at all the second one was the interactive server rendering then the interactive web assembly rendering and then the interactive Auto rendering for this project I'm going to select the uh interactive Auto rendering this project will give us the option also to check how the interactive web assembly rendering works so that I can show you these two types together so I'm going to select this and next we have the option to choose the interactivity location what this means is that as it is per page or component this means that we're going to need to set up the interactivity of each page or each component we specified for each component one by one if we set it to Global all of our components of our application will be set with the same interactivity with the interactive Auto rendering in our case so I'm going to leave it per pager component and going to click on create to create our project okay the project is being loaded what we can see in our solution Explorer is that basically here we have two projects we have a server project and and the client project the server project contains all of our server code and as you can see this is similar to the project structure of our previous Blazer Web projects that we have been creating so far and about the client project the client project basically builds the code that's going to be downloaded on the browser and then that is going to run client side on the users br browser so in the we can just go and check to in program.cs in our server code we can see that the interactivity is set to so it's been it's enabled the interactive server rendering the and the interactive web assembly rendering here we can if we would check what we have in our server project we would see that the on if we go to Pages we will see that all of our Pages or all of our components are as before except the counter page or the counter component this happens because this component was the only component that we had also in our previous projects that is interactive and for this reason this is pushed down in the client project if we check on pages counter data Razer we see that here we have the counter component and basically all of the components or pages that we would want to be eventually run from the browser we all we set this components we place these components in our client project we'll see that by using this render mode directive attribute on top we have set the interactivity to be interactive Auto so basically interactive autor rendering and I'm just going to run the project firstly to see how this work works okay so we are in our homepage I'm going to just inspect the page to open up the developer tools and I'm going to network here and if we try to go to our counter page we'll see all of this stuff being downloaded all of this libraries being downloaded as you can see this takes a while but our page is actually interactive the counter works so what happened here if we filter on websocket we see that the websocket connection is opened so we have a connection with the server here but as well if we go to web assembly here all of these libraries from our client code are being download it and the most important one on here on top we see this net. native thatw file which is theet web assembly around time so this was being downloaded on the background and now it seems to be downloaded so how this works as we explained before let me just go back to our homepage we should see that the websocket connection here ended it was opened for 56 seconds for about 56 seconds but now if we go back to our counter page the counter page is interactive but no other webset connection was opened no circuit connection is actually active here this happens because right now the components rendering switched from interactive server rendering basically to interactive web assembly rendering now all of the UI events that the user triggers will be handled on the browser's side because we download did this net web assembly around time and this is how the interactive auor rendering works I'm going to go back to our project and I'm going to change go to the counter page and change the interactivity to be interactive web assembly so that you will see the difference let me just run the project okay let me go back to here and refresh I think I'm going to need to basically clear this storage data so that we'll see everything that's being downloaded there so if I go to the counter page the counter is not at first interactive this happens because the load time of the component is a bit bigger in the interactive web assembly rendering because all of this stuff were being downloaded in the background when all of these library liaries and this net web assembly around time finished downloading then the component became interactive so all of the UI events were handled then by our by blazer from the users browser so this is was actually the drawback of the interactive web assembly rendering because at first the load time is a bit is a bit longer but once everything was finished and the r time is finished then this is cached and the user events will be then handled faster from the client's browser and if we actually check the websocket connection we'll see no socket con web socket connection was initialized because a server connection is not needed in this type of interactivity to be able to create an application of any level of complexity you need to First learn how to work with Crow operations crud stands for create read update and delete and these are essential operations in all applications in this video we will create the different components in our Blazer web app to perform these operations using scaffolding we will cover various topics including working with data in our Blazer web app connecting our project to a database understanding how form submission and validation work in Blazer and much more so let's get started so let us just create a new project here we're going to select a Blazer web app template here I link the application Blazer CR click on next and I'm going let the interactivity to be server so interactive server rendering and I'm going to set it leave it as it is per page component and not globally I'm going to create the project now okay the project is created the first thing we are going to need is we're going need to create the data model for us to be able then to perform the croud operations for that data model so I'm going to the project directory here and I'm going to add a models folder inside this folder I'm going to add a Class A model class let's let's say a model class for student let's give a few properties to this class public in ID property as always a property for the ID and then a property for the name I'll set it to be nullable so name for the AG and one for the let's say a date time property for the birthday let's just leave it with these four properties right now the Blazer actually gives us the option to create all of the pages or components to be able to perform the crowd operations for a specific model and we can do this by just going to the components folder to the pages folder here and I'm going to click on add a new scaffolded item that we go to raser components and click on eraser component using Entity framework it's basically a very easy way and a simple way to for us to get started with blazer even if we have some specific project and we could for example we could select we could only need like a create page an edit page or one of these we can select only one of these options here but for this video I'm going to tell Blazer to create all of the five all of the five pages for our crowd operations I'm going to select the model to be student the model that we created then I'm going to add a new DB context class here that we haven't created yet basically this is just the C class that connects our models to the database each time we create a new model a new data mod model we write its instance inside this context class and then when we want to access some specific data or some specific model we then again use the context to get the data from it so I'm just going to add a new context here I'm going to leave the database provider to be SQL Server click on ADD and let the Blazer do basically all the work for us okay inside the pages folder we have a student Pages folder with all of our crowd Pages or with our components we have a create component here a delete details component edit and an index component here as well and we're going to see what all of these do and how they work but firstly we're going to need to I'm going to create a database so that we store all of the data in it and then we do this croud operations by accessing the database so I'm going to go to view server Explorer click here on create new SQL Server database I'm going to need the server name of our my SQL Server management Studio C the server name here input it here and in the encrypt field here I'm going to set the encryption to optional or basically to false initially so that we do not need to log into the database with a password or so each time when we access the database click on trust server certificate and I'm going to give a name to our database let's say pleaser C data click on okay my database instance is created in the properties folder here we have the connection string which I'm going to need to take and paste it in the app settings. J basically when we added our scaffolded item Blazer created like an address here for the for the database a connections since we see here a connection string to be inputed there but I'm just going to substitute it with our database instance that I just created so here we see the encryption was put to false the datab base name is here and then this connection string should already be the service in program that CS file so right now all that's left to do is to add migrations to our database adding migrations basically means that we specify the art database schema so I'm going to need to go to tools n get package manager and package manager console and we need to add to write the command add migration and the name for the migration and basically what will be inputed in the database is the model that we created with its properties this is the migration is basically you can see it here a migrations folder we created in our project it's basically a C Class specifying a database schema and I'm just going to need to write the comment here update database and our model will be then stored in the database with our specifications and now we'll be we are ready to basically see how these croud operations work the index page if we can see here has let's find the route which is slash students so this is where we'll go first and just go to slash students okay we have an empty table here if I click on create new will be redirected to the create page let me give a name here to okay Sean the age 20 and I'm selecting a birthday if I click on create we see that we have a student basically was created in the database and then it's stored here we have its name the age the birthday which is not as well shown actually the date so we actually don't need the hour here but we'll modify it later and on the end on the last column we have three links that can that take us to the details page page with all of the details of the student the edit page allows us to modify the data here if I click on Save we see that the age was modified and if I click on delete here we have the option to delete this student from the database so you can see that our crowd operations are functional and work pretty well right now we just will see how each of this Pages actually works in detail so if I go back we'll start with the index page the main part of the index page here is the quick grid building component quick grid is a data grid component that is built in in Blazer quick grid can access data from different kind of sources here in the items attribute we are accessing the data from our DB Conta here on top of the page we're injecting the our context here and we're giving a name of DB and then we are taking the data from the context this buil-in component is very useful actually because it has it offers multiple features like sorting enabling pagination to the tables and much more actually which we're not going to see all in this video but let's just see below we see these property column tags that basically specify each column that will be inside of the table we are in this property attribute here we are specifying each property of our students model so the student name the students age birthday and we are accessing this by accessing the data from the context and Below on the last column as we saw we are using this template column buil-in component we are just specifying some links to go to the edit page Details page and to the delete page of that specific student using the student ID and this is what we can do in this quick grid component is that as we saw the birthday was not specified as we wanted it to we can basically add a format attribute and let's say dat set it to month day and year if I run the project this should be able to remove the time of the age but we don't have a student anymore here so let me create a new one James Johnson 40 pick a birthday and click on create we'll see that in the birthday column we do not see the time anymore we only see the specific date let me go back to our project we can actually we can use properties to change how this column's name will be displayed so birthday we can set it to if we want to change it let's say we can use the type property to set it to date of birth let's say we should see the column name will be changed here date of birth and this is basically it for the index page if I go now let's just go to the create page we can see that in a create page we're using an edit form building component and this building component is just substituting the form HTML tag and it makes it much easier to connect the data of the form to a specific model here we have we have specified the method type to be of post and we can see this model attribute that specifies the model dat the data model which is student and actually this connects the data that will be submitted from the form it connects it to the this student property here we can see that this student property here has an attribute above Supply parameter from form which basically specifies that as soon as the data is submitted in the form it will be bound to this property here then we'll use this property data here in this add student method below actually we can see that the form had an unvalid submit attribute as well which was set to add student so this is the method that will be invoked as soon as the data in the form was correctly submitted so it was validated the validation was also done correctly which we'll see in a bit and then the form was submitted the method here will be invoked and we'll basically store in the inside the context using this add method here our student that was submitted in the form we'll save the changes to the database and then we'll navigate back to the index page one last thing is the form name was specified to create here in this using this form name attribute and this is necessary in cases that we have multiple forms in our page and when we basically have a property below here we can specify the form name inside this property so that the data of each specific form will be bound to the correct property in our case we do not need this because we only have one form but if we would need to we could use it the last thing we see we have an enhan attribute in the edit form component this basically enables enhanced form handling in Blazer this is some something similar to the enhanced navigation that we saw in a few videos a few videos back so when a form is basically submitted the Blazer intercepts the form submission performs a fetch request to the server and gets a response from the server B basically and performs the needed changes in the Dom it's basically a feature that makes the form more interactive and enhances it so we can see basically saw also before how the form worked but let's just see now what we have inside the edit form we have some divs in each div we have a label for the input we have in the first case here we have an input text building components that take that only takes text input and its value is binded to with this bind value attribute is binded to the student. name so to the name property of the student model and in the second case we have an input number component then an input date component depending on the data that we are inputting there this is bounded to the specific property of the model so that then the all of the data that will be submitted by the form will be easily bound to our property to our student property here below and we can see basically that we have on the end of each div we have a validation message component here we saw on top also we have a data annotations validator and the validation summary component what this now do is that they validate the data so that the correct input will be submitted there to be more specific let me show you how this works if I go back to the models class that we created above we can input restrictions for our properties here let's say we can using data annotations I can put the name to be required and let's say I'm going to put the age to be in a Range within 18 and 35 so students have to be in an age between 18 and 35 then this data annotations validator will display an error message on the end of each input and also on top of the page validation summary with all of the errors that occurred so let me just run the project so that you can see how that basically works okay let's create a new page let's create a new student and let me put a name like them here let's put the age to be 36 let's inut a birthday click on Create and we see that the form was actually not submitted we see the error message here the field age must be between 18 and 35 just like we we specified it and we see the on top of the page a summary of all of the validation errors that occurred if I correct it to be 34 let's say and click on create this student will be stored in the database and then we can see it in our index page this was actually quite useful but one thing missing is that we would want actually to validate for the application to validate the input as soon as we click out of the input form we can enable this in Blazer but we're going to need to make our component page interactive I will do this we can just we just need to specify the render mode on top of the page to be interactive server since we created an application that allows interactive server rendering and if I run the application now it will be more interactive and the validation will happen just as soon as we click out of the form let's just try it one more time let say compter I put AG 15 and I just click away of the of this input form we'll see that this was validated and we see that the age field must be between 18 and 35 we can actually see in the first input form that we see a green outline which basically see says that the data input it is correct and this is what we'll see also if we fix the H here we'll see that the form is outlined with this green color here let me put a birthday here and create the other student so we have three students now let's go to the delete page so on top of the page we have like this big header asking us if we really want to delete the student and here is displayed if the student is not basically loaded yet we see this message if so we'll see all of the data of the student and then an edit form again an edit form component to basically delete this student now code block here what is what we see is that we see an ID property which has this attribute Supply parameter from query what this does is that the this ID property gets the value of from the URL when we go to that URL let me just go to the delete page of the First Student in the URL we see that we have an ID equal to two and what this does is that this property will'll get in this case this ID property will get the value from the URL and then we we're going to use it down below actually we have an un initialized Asing meth method which is a method that is initialized as soon as the component renders we are basically going to find the student by checking through our database for the student with that ID that we got from the URL and then we're going to use this student data here firstly to display the name the age the birthday of the student and then we're going to use it down below here in the edit form if the form is submitted by if when we click to the button here this unvalid submit method will be triggered the delete student method and here we basically go to the context and remove that student save the changes to the database and go back to the students uh to the index page let's just go to The Details page now The Details page as well has an ID property that gets the value from the URL then as soon as the component renders this un uninitialized Asing method is called it Loops through basically the student with that specific ID in the database and then it displays the data to the users as we can see here pretty simple the edit page then basically it is similar to our create page we have this edit form build-in component component but the only difference is that the data is already filled in the inputs of this form because as soon as the component is rendered uh a database check is being done to find the student with that ID that we get from the URL here when it finds this student then its data will be inputed to each input here and we can then make a change make a modification to any of the input that we would want to if we click on Save then the update student method will be triggered which you can see here below basically the first line basically just helps the context to track the changes in the context so sets the state of this entity to modified and then it the changes will be saved to the database if an error occurs will be redirected to a not found page otherwise will just then be redirected again to the students page here let me just show you how the edit works so if you click on edit we make we see that the input is already filled with the users data with the ID of two actually in our case if we make any modification here and save the changes the changes will be saved and we are still redirected to the index page now after completing the Blazer fundamentals make sure to watch my food menu web app project in Blazer it's a very simple project that will help you practice and reinforce what you have already learned I really appreciate you watching this far if you got value from the video don't forget to like it or subscribe to the channel for more content thank you as always for watching and I will see you in the next video\n"