All – Page 2 – Sachin Tekriwal Blog

Blazor Interview Questions and answer.

1. What Is Blazor?

Building contemporary, scalable, and cross-platform Web applications with C# and.NET is made possible with the free, open-source, Blazor Web framework.
It was originally intended for C# and.NET developers who wanted to create web client applications using the C# language that Blazor, a project of Microsoft and the open-source community, was developed.

Modern, swift, and quickly changing best describes Blazor. Both client-side and server-side coding is supported by Blazor. .NET is used to write both the server-side and client-side app logic.

Blazor generates the user interface as HTML and CSS for wide browser compatibility, including mobile browsers, despite the fact that the code is written in.NET and C#.

2. Describe The Components In The Blazor Framework?

The Razor template engine, which is used by Blazor, creates HTML and sends it to web browsers. Together, HTML and C# syntax can be used in Razor templates, which are subsequently compiled by the Razor engine to produce HTML.

For the logic in Blazor Components, we have two options: we can split the logic and write the component functions into a separate C# class file.

For writing the C# functions alongside the HTML, we utilize the @code block. The “. razor” extension is used by Blazor to identify components.

3. Why Should I Use Blazor?

Developers with backgrounds in C# and.NET who are not at ease with JavaScript are the target audience for Blazor. Blazor has the following benefits:

Use C# instead of JavaScript when writing code.
Share app logic between the client and the server.
Utilize the.NET libraries that already exist in the.NET environment.
Gain from the performance, dependability, and security of.NET.
Build your application using a reliable, feature-rich, and user-friendly collection of languages, frameworks, and tools.
Utilize Visual Studio on Windows, Linux, and macOS to be productive.

4. What Purposes Does Blazor Serve?

For creating web-based apps, Blazor is utilized. This can apply to websites, mobile applications, and anything else you can create with JavaScript.

You can carry out a variety of typical development activities with the help of the framework, including rendering HTML and component code, obtaining data through HTTP, and client-side routing.

It has complete access to the JavaScript APIs of the browser when used on one. Therefore, Blazor programs can utilize both.NET methods from JavaScript functions and.NET methods from JavaScript functions.

Developers utilize JavaScript interop when the framework lacks a certain API or component or when they wish to work with the JavaScript ecosystem.

5. What Do You Mean By Blazor WebAssembly?

Microsoft has developed a new UI technology called Blazor WebAssembly. Utilizing a component-based design, Blazor enables developers to construct single-page applications (SPAs) using C# and.NET.

A.NET runtime is included in the client-side, in-browser implementation of Blazor called Blazor WebAssembly. With the introduction of Blazor WebAssembly, C# can now be used to develop client-side SPAs.

Previously, Blazor Server and ASP.NET Core MVC, both of which are server-side solutions, could be used to build websites.

Blazor WebAssembly is for you if you want to broaden your skill set, use new Microsoft technologies, or are just interested in WebAssembly in general.

6. What Benefits And Drawbacks Does Blazor WebAssembly Offer?

Benefits:

Network with less lag
offline assistance.
Understanding JavaScript is not required for client-side interactions.

Drawbacks:

Large page download size.
Limited.Net Assemblies support.
Client-side debugging is not very effective.
Not very safe; the browser will download DLLs.
Dependency on the browser; Internet Explorer is not supported.

7. What Is The Role Of Directing In Blazor?

Routes are URL models, and routing is model planning that includes an action to filter purchases and determine how to handle each sale. ASP.net Core Endpoint Routing is used by the Blazor specialized application.

The shifting toward the relationship for the Blazor part is beginning to be recognized by ASP.net Core using the MapBlazorHub extension technique for endpoint guidance.

The client-side routing is provided by the Blazor client application. The switch is set up in the App. cshtml record of the Blazor client application.

The fallback course is determined by the Blazor Server application license. It is effective in directing planning with little demand.

The fallback strategy can be used when different strategies are not supported. The _Host—cshtml portion mostly describes the fallback mechanism.

8. Which Existence Cycle Approaches Are Used By Blazor Components?

In the present example of Blazor pieces as constructed, as well as nonconcurrent tactics, the Blazor application grants diverse skills to direct tasks are:

Instated
OnInitializedAsync
OnParametersSet
OnParameters
SetAsync
OnAfterRender
OnAfterRenderAsync

9. By “Blazor Server,” What Do You Mean?

In order to express the logic for the client browser, Microsoft Blazor Server decouples the application levels using Blazor Components (in the form of Razor components).

The ASP.Net Core framework served as the foundation for Blazor. It offers assistance with hosting Razor components in an ASP.NET Core application on the server.

For connecting to the DOM at the client-side in the ASP.Net server, Blazor employs the SignalR.

10. What Benefits And Drawbacks Does The Blazor Server Offer?

Benefits:

Use with any software.
An incredible little page download space is used.
JavaScript has no prerequisites.
Code will be, in a sense, on the server, which is far more secure.
Full support of online social activities while you are employing spot internet concentration from a professional.

Drawbacks:

Monitoring SignalR events requires more resources.
High network of sluggishness for coordinated worker activities
Each scenario requires a working professional; there should be no disconnected aid.

11. What Circumstances Would Make It Wise For Me To Use Blazor Server?

For our.NET apps, Blazor enables us to create rich, user-friendly interfaces. Numerous justifications exist for using Blazor Server.

When you must transfer work from the client to the employee.
The current application justification should not be altered for any persuasive reason.
Applications that require the use of low-controlled devices can benefit greatly from it.
The association set up for Blazor Server apps just needs a little download.

12. Which Stages Does Blazor Uphold?

Applications from Blazor can be shown and used on platforms including Windows, Linux, macOS, the cloud, and the web. Applications on the client and worker sides are both maintained by Blazor.

Applications for Blazor’s laborer side are created with ASP.NET Core. WebAssembly is used to run the customer-side Blazor apps in web programs.

Blazor is used to build online apps, cloud-neighborhood applications, local flexible applications, and Windows client applications.

13. What Distinguishes Blazor WebAssembly From Blazor Server?

Blazor provides Blazor server and Blazor WebAssembly as its two application development methods. Blazor Server applications manage UI interactions through a live SignalR connection while hosting Blazor components on the server.

ASP.NET Core renders Razor components, compiles C# code on the server, and then uses SignalR to send the produced UI elements back to the browser.

The Blazor WebAssembly apps use a WebAssembly runtime that is exclusive to.NET, unlike Blazor Server, which hosts components client-side in the browser.

.NET must be transformed into browser components by the runtime. The client-side browser manages every component and its rendering process.

14. When Should I Use Blazer WebAssembly Instead Of Blazer Server?

For C# and.NET developers who wish to create client-side web applications that run in the browser without a server, Blazor WebAssembly provides an alternative.

A Blazor WebAssembly program does not need a server, in contrast to Blazor Server, and all code is performed in the browser. Here are several scenarios when Blazor WebAssembly could be preferable over Blazor Server.

You want to create static web pages quickly.
You lack server-side and ASP.NET programming knowledge.
On the server, managing and distributing code is not something you want to do.
You want to make use of CPU, memory, and storage as well as client browsers.
You want to create web applications that can operate entirely offline.
Real-time replies and a continuously updating UI are what you want to design.
To add live alerts, local browser storage, messages, and server workers, you want to make use of contemporary technologies, such as progressive web applications (PWA).

15. What Does Routing Mean In Blazor?

A route is a pattern of a URL, and routing is a process of pattern matching that keeps track of the requests and decides what to do with each one. ASP.net Core Endpoint Routing is used by the Blazor server application.

Incoming connections for the Blazor component are now being accepted by ASP.net Core using the MapBlazorHub extension method of endpoint routing.

Client-side routing is offered by the Blazor client application. The Blazor client app’s App.cshtml file contains the router configuration information.

Blazor Client App

Blazor Server App

16. How Does Blazor Server Handle Authorization?

The process of authorization verifies that the user has permission to access the resource of the program.

In other words, it enables you to limit user access to a resource in accordance with roles, claims, and rules. By leveraging attributes, built-in components, and the definition of authorization rules, Blazor’s ASP.NET Core authorization system can be implemented.

Blazor’s built-in AuthorizeView component can display page content dependent on the user’s authentication status. Along with role-based authorization, this component also provides policy-based authorization.

This component comes in very handy when you want to display page content according to a user’s role, policy, or authentication status.

The authentication state of the user is known thanks to AuthentizationStateProvider.

17. How Can The Blazor Server App Be Created And Operated Using CLI Commands?

To create a Blazor server app using the asp.net core CLI, open a command line and enter the following command:

18. How Can The Blazor WebAssembly App Be Created And Executed Using CLI Commands?

By utilizing the asp.net core CLI, we can construct a Blazor WebAssembly program by opening the command line and entering the following command:

19. What Does Blazor’s Data Binding Mean?

In this battle to be the greatest web development framework, Blazor is giving other contemporary web development frameworks a tough fight.

Bindings are the key to interacting with data or control objects like Textboxes, Selects, or Forms components.

With One-way, Two-way Data Binding and robust event binding behavior, Blazor offers the finest approach to using bindings.

20. How Is Two-Way Data Binding Carried Out In Blazor?

In this case, information flows simultaneously from the source to the destination and from the destination to the source.

For example, let’s say we use the data variables of my component class(es) as a source and need to access the value of this variable on the HTML UI in order to display or edit some messages.

We have @bind from the razor in Blazor to read the value of any data variable in a Blazor component.

When the user edits the data and shifts the attention to another element, @bind keeps the value it received from the ref and updates the original source element.

21. Can Blazor WebAssembly Communicate With SQL Server Or Other Databases?

Blazor is.NET code that runs on the client. The IL code will be downloaded to the client-side, making reverse engineering easy. And because of that, you ought to avoid including any secrets—like passwords—in your Blazor WASM code.

Your Blazor application would need to connect with a remote database using a username-password combination, which could only be saved in the app. Don’t do that — it’s a massive security risk.

You should only use a service, which has a restricted access layer, to access distant data. Create a service API around your database that exposes the operations you wish to provide, such as REST, for example.

You can then use security tokens on that API to make sure that only authorized users can access the API and, therefore, your data.

What is Program.cs in ASP.NET Core 7?

Program.cs

The Program class is the entry point for the ASP.NET Core application. It contains the application startup code.

It Configure and register the services required by the appRegister middleware components and configure the app’s request handling pipeline.

What is a host?

On startup, ASP.NET Core apps configure and launch a host. It is responsible for the startup and lifetime management of the application. The host contains the application configuration and the Kestrel server (an HTTP server) that listens for requests and sends responses.

It also sets up the logging, dependency injection, configuration, request processing pipeline, etc.

There are three different hosts capable of running an ASP.NET Core app.

WebApplication (or Minimal Host)
Generic Host
WebHost

WebHost was used in the initial versions of ASP.NET Core. Generic Host replaced it in ASP.NET Core 3.0. WebApplication was introduced in ASP.NET Core 6.0.

What is WebApplication (Minimal Host)

The WebApplication is the core of your ASP.NET Core application. It contains the application configuration and the HTTP server (Kestrel) that listens for requests and sends responses.

WebApplication behaves similarly to the Generic Host, exposing many of the same interfaces but requiring fewer configure callbacks.

We need to configure the WebApplication before we run it. There are two essential tasks that we need to perform before running the app.

Configure and add the services for dependency injection.
Configure the request pipeline, which handles all requests made to the application.

We do all these things in the program.cs

Understanding program.cs

Create a new ASP.NET core application using the ASP.NET Core Empty template. Open the program.cs and you will see the following lines.

var builder = WebApplication.CreateBuilder(args);var app = builder.Build();
app.MapGet("/", () => "Hello World!");
app.Run();

These four lines contain all the initialization code you need to create a web server and start listening for requests.

The first thing you notice in this file is that no main method exists. The main method is the entry point of every C# program. But C#9 introduced the top-level statements feature, where you do not have to specify a main method. This feature allows us to create one top-level file containing only statements. It will not have to declare the main method or namespace. That top-level file will become the entry point of our program.

The program file creates the web application in three stages. Create, Build, and Run

The earlier versions of ASP.NET Core created two files. One is program.cs and the other is startup.cs (known as startup class).

The program.cs is where we configured the host, and the startup class is where we used to configure the application. Since ASP.NET core 6, both processes and simplified and merged into a program.cs.

Create

The first line of the code creates an instance of the WebApplication builder.
var builder = WebApplication.CreateBuilder(args);

The CreateBuilder is a static method of WebApplication class.
It sets up a few basic features of the ASP.NET platform by default, including

Sets up HTTP server (Kestrel)
Logging
Configuration
Dependency injection container
Adds the following framework-provided services

This method returns a new instance of the WebApplicationBuilder class.

We use the WebApplicationBuilder object to configure & register additional services.

WebApplicationBuilder exposes the ConfigurationManager type, which exposes all the current configuration values. We can also add new configuration sources.

It also exposes an IServiceCollection directly for adding services to the DI container.

We then call the build method.

Build

The build method of the WebApplicationBuilder class creates a new instance of the WebApplication class.

We use the instance of the WebApplication to setup the middleware’s and endpoints.

The template has set up one middleware component using the MapGet extension method.

app.MapGet(“/”, () => “Hello World!”);

Run

The run method of the WebApplication instance starts the application and listens to http requests.

Program.cs in Various Project Templates

.NET SDK Provides several project templates for creating a new ASP.NET core application. The most commonly used templates are

ASP.NET Core Empty
ASP.NET Core Web App (Razor pages)
ASP.NET Core Web App (Model-View-Controller)
ASP.NET Core Web API

ASP.NET Core Web App (Model View Controller)
The following program class is from the template ASP.NET Core Web App (Model View Controller).

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler(“/Home/Error”);
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
name: “default”,
pattern: “{controller=Home}/{action=Index}/{id?}”);

app.Run();

ASP.NET Core Web API

var builder = WebApplication.CreateBuilder(args); //Create

// Add services to the container.

builder.Services.AddControllers();

// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build(); //Build

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.UseSwagger();
app.UseSwaggerUI();
}

app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();

app.Run(); //Run

Create a web API using .NET Core 7 with the Unit of Work pattern and a generic repository.

Here’s an example of how you can create a web API using .NET Core 7 with the Unit of Work pattern and a generic repository.

First, let’s define the generic repository and the unit of work:

// Generic Repository Interface
public interface IRepository<TEntity> where TEntity : class
{
    TEntity GetById(int id);
    IEnumerable<TEntity> GetAll();
    void Add(TEntity entity);
    void Update(TEntity entity);
    void Delete(TEntity entity);
}

// Unit of Work Interface
public interface IUnitOfWork : IDisposable
{
    IRepository<TEntity> GetRepository<TEntity>() where TEntity : class;
    void SaveChanges();
}

Next, we’ll implement the generic repository and the unit of work:

// Generic Repository Implementation
public class Repository<TEntity> : IRepository<TEntity> where TEntity : class
{
    private DbContext _context;
    private DbSet<TEntity> _dbSet;

    public Repository(DbContext context)
    {
        _context = context;
        _dbSet = context.Set<TEntity>();
    }

    public TEntity GetById(int id)
    {
        return _dbSet.Find(id);
    }

    public IEnumerable<TEntity> GetAll()
    {
        return _dbSet.ToList();
    }

    public void Add(TEntity entity)
    {
        _dbSet.Add(entity);
    }

    public void Update(TEntity entity)
    {
        _dbSet.Update(entity);
    }

    public void Delete(TEntity entity)
    {
        _dbSet.Remove(entity);
    }
}

// Unit of Work Implementation
public class UnitOfWork : IUnitOfWork
{
    private DbContext _context;
    private Dictionary<Type, object> _repositories;

    public UnitOfWork(DbContext context)
    {
        _context = context;
        _repositories = new Dictionary<Type, object>();
    }

    public IRepository<TEntity> GetRepository<TEntity>() where TEntity : class
    {
        if (!_repositories.ContainsKey(typeof(TEntity)))
        {
            var repository = new Repository<TEntity>(_context);
            _repositories.Add(typeof(TEntity), repository);
        }

        return (IRepository<TEntity>)_repositories[typeof(TEntity)];
    }

    public void SaveChanges()
    {
        _context.SaveChanges();
    }

    public void Dispose()
    {
        _context.Dispose();
    }
}

Now, let’s create a sample entity and a web API controller that uses the unit of work and repository:

// Sample Entity
public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    // other properties
}

// Web API Controller
[ApiController]
[Route("api/products")]
public class ProductsController : ControllerBase
{
    private IUnitOfWork _unitOfWork;
    private IRepository<Product> _productRepository;

    public ProductsController(IUnitOfWork unitOfWork)
    {
        _unitOfWork = unitOfWork;
        _productRepository = _unitOfWork.GetRepository<Product>();
    }

    // GET api/products
    [HttpGet]
    public IActionResult Get()
    {
        var products = _productRepository.GetAll();
        return Ok(products);
    }

    // GET api/products/{id}
    [HttpGet("{id}")]
    public IActionResult Get(int id)
    {
        var product = _productRepository.GetById(id);
        if (product == null)
        {
            return NotFound();
        }
        return Ok(product);
    }

    // POST api/products
    [HttpPost]
    public IActionResult Post([FromBody] Product product)
    {
        if (product == null)
        {
            return BadRequest();
        }

        _productRepository.Add(product);
        _unitOfWork.SaveChanges();

        return CreatedAtAction(nameof(Get), new { id = product.Id }, product);
    }

    // PUT api/products/{id}
    [HttpPut("{id}")]
    public IActionResult Put(int id

, [FromBody] Product product)
    {
        if (product == null || id != product.Id)
        {
            return BadRequest();
        }

        var existingProduct = _productRepository.GetById(id);
        if (existingProduct == null)
        {
            return NotFound();
        }

        existingProduct.Name = product.Name;
        // update other properties

        _productRepository.Update(existingProduct);
        _unitOfWork.SaveChanges();

        return NoContent();
    }

    // DELETE api/products/{id}
    [HttpDelete("{id}")]
    public IActionResult Delete(int id)
    {
        var product = _productRepository.GetById(id);
        if (product == null)
        {
            return NotFound();
        }

        _productRepository.Delete(product);
        _unitOfWork.SaveChanges();

        return NoContent();
    }
}

In this example, we have a Product entity, and we create a web API controller named ProductsController. The controller receives an instance of IUnitOfWork in its constructor, which provides access to the unit of work and the generic repository.

Within the controller actions, we use the repository methods to perform CRUD operations on the Product entity. The unit of work manages the transaction and ensures that changes are saved atomically.

Generic Repository implementation in C#

Example of a generic repository implementation in C#:

using System;
using System.Collections.Generic;
using System.Linq;

public interface IRepository<T>
{
    T GetById(int id);
    IEnumerable<T> GetAll();
    void Add(T entity);
    void Update(T entity);
    void Delete(T entity);
}

public class Repository<T> : IRepository<T>
{
    private List<T> _entities;

    public Repository()
    {
        _entities = new List<T>();
    }

    public T GetById(int id)
    {
        return _entities.FirstOrDefault(e => GetId(e) == id);
    }

    public IEnumerable<T> GetAll()
    {
        return _entities;
    }

    public void Add(T entity)
    {
        _entities.Add(entity);
        Console.WriteLine("Added: " + entity.ToString());
    }

    public void Update(T entity)
    {
        Console.WriteLine("Updated: " + entity.ToString());
    }

    public void Delete(T entity)
    {
        _entities.Remove(entity);
        Console.WriteLine("Deleted: " + entity.ToString());
    }

    // Helper method to retrieve the ID of an entity
    private int GetId(T entity)
    {
        // Replace this with the appropriate logic to extract the ID from your entity
        // For demonstration purposes, assuming an 'Id' property exists
        var idProperty = typeof(T).GetProperty("Id");
        return (int)idProperty.GetValue(entity);
    }
}

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }

    public override string ToString()
    {
        return $"Product: Id={Id}, Name={Name}";
    }
}

public class Customer
{
    public int Id { get; set; }
    public string Name { get; set; }

    public override string ToString()
    {
        return $"Customer: Id={Id}, Name={Name}";
    }
}

public class Program
{
    public static void Main(string[] args)
    {
        IRepository<Product> productRepository = new Repository<Product>();
        IRepository<Customer> customerRepository = new Repository<Customer>();

        // Add products
        Product newProduct = new Product { Id = 1, Name = "Keyboard" };
        productRepository.Add(newProduct);

        // Add customers
        Customer newCustomer = new Customer { Id = 1, Name = "John Doe" };
        customerRepository.Add(newCustomer);

        // Update a product
        Product existingProduct = productRepository.GetById(1);
        if (existingProduct != null)
        {
            existingProduct.Name = "Wireless Keyboard";
            productRepository.Update(existingProduct);
        }

        // Delete a customer
        Customer customerToDelete = customerRepository.GetById(1);
        if (customerToDelete != null)
        {
            customerRepository.Delete(customerToDelete);
        }
    }
}

In this example, we have a generic repository defined by the IRepository<T> interface, which provides common methods for data access: GetById, GetAll, Add, Update, and Delete.

The Repository<T> class is the implementation of the generic repository, which uses a List<T> to store the entities. The implementation showcases basic CRUD operations for the entities. It also includes a helper method GetId to extract the ID from an entity, assuming there is an Id property.

The Product and Customer classes are sample entities used in the example.

In the Main method, we create instances of Repository<Product> and Repository<Customer>, representing repositories for the Product and Customer entities, respectively. We then demonstrate adding products and customers, updating a product, and deleting a customer using the repository methods.

.NET 7 with Entity Framework Database First approach

In .NET 7, the preferred approach for working with Entity Framework (EF) is using the Code First approach rather than the Database First approach. However, you can still use the Database First approach in .NET 7 if you prefer.

To use the Database First approach in .NET 7 with Entity Framework, follow these steps:

Install the necessary packages: Make sure you have the required EF packages installed in your project. You will need the Microsoft.EntityFrameworkCore package and the database provider package for your specific database (e.g., Microsoft.EntityFrameworkCore.SqlServer for SQL Server). You can install these packages using NuGet.
Add a reference to your database: In your project, add a reference to your existing database. This can be done by adding a connection string to the appsettings.json file or through the DbContextOptionsBuilder in your code.
Scaffold the models: Use the EF command-line tools (or the Package Manager Console) to scaffold the models based on your existing database. Open the terminal and navigate to the project’s root directory, then run the following command:

dotnet ef dbcontext scaffold "YourConnectionString" Microsoft.EntityFrameworkCore.SqlServer -o Models

Replace "YourConnectionString" with the actual connection string to your database. This command will generate the entity classes based on your database schema and place them in the “Models” folder.

Use the generated models: You can now use the generated entity classes in your code to query and manipulate the database. Make sure to configure your DbContext class to use the correct connection string and database provider.

Keep in mind that the Code First approach is generally recommended because it provides better control and flexibility over the database schema. However, if you have an existing database and prefer the Database First approach, the steps above should help you get started with Entity Framework in .NET 7.

Integrate a Bootstrap 5 template into a .NET 7 layout

To integrate a Bootstrap 5 template into a .NET 7 layout, you’ll need to follow these general steps:

Create a new .NET 7 project: Start by creating a new .NET 7 project in your preferred development environment, such as Visual Studio.
Add Bootstrap 5 files: Download the Bootstrap 5 files from the official website (https://getbootstrap.com/) or a trusted source. Extract the contents of the downloaded ZIP file.
Add Bootstrap CSS and JavaScript references: In your .NET project, navigate to the appropriate location to add static files, such as the wwwroot folder. Copy the Bootstrap CSS (bootstrap.min.css) and JavaScript (bootstrap.min.js) files into the corresponding folders within your project, such as wwwroot/css and wwwroot/js.
Include Bootstrap references in the layout: Open the layout file (usually named _Layout.cshtml or similar) in your project. Add the following lines within the <head> section to reference the Bootstrap CSS file:

<link rel="stylesheet" href="~/css/bootstrap.min.css" />

And add the following line before the closing </body> tag to reference the Bootstrap JavaScript file:

<script src="~/js/bootstrap.min.js"></script>

Customize layout markup: Modify the layout markup to match the structure and elements of the Bootstrap 5 template you want to integrate. Replace or modify the existing HTML elements to include the necessary Bootstrap classes, components, and structure.
Link CSS and JavaScript files: Ensure that any custom CSS or JavaScript files required by the Bootstrap template are properly linked within the layout file. Add them within the <head> section or at the end of the <body> section, depending on the template’s requirements.
Use Bootstrap components: Utilize Bootstrap’s CSS classes and components throughout your application’s views and pages. Update your existing views or create new ones, taking advantage of Bootstrap’s responsive grid system, typography, forms, buttons, navigation, and other components.
Test and refine: Run your .NET project and test the integration of the Bootstrap 5 template. Make any necessary adjustments to ensure proper rendering and functionality.

These steps provide a general guideline for integrating a Bootstrap 5 template into a .NET 7 layout. The specific implementation may vary depending on your project structure and requirements.

Basic JavaScript concepts

This tutorial covers some basic JavaScript concepts and provides examples to help you understand and practice.

Variables and Data Types:
Variables are used to store and manipulate data in JavaScript. There are different data types in JavaScript, including numbers, strings, booleans, arrays, and objects.

// Number
let age = 25;

// String
let name = "John";

// Boolean
let isStudent = true;

// Array
let numbers = [1, 2, 3, 4, 5];

// Object
let person = {
  name: "John",
  age: 25,
  isStudent: true
};

Functions:
Functions are blocks of reusable code that perform specific tasks. They can take parameters and return values.

function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("John");

Conditional Statements:
Conditional statements allow you to make decisions based on certain conditions. The most common ones are if statements and switch statements.

let num = 10;

if (num > 0) {
  console.log("Positive");
} else if (num < 0) {
  console.log("Negative");
} else {
  console.log("Zero");
}

Loops:
Loops are used to repeatedly execute a block of code. The most commonly used loops are for loops and while loops.

for (let i = 0; i < 5; i++) {
  console.log(i);
}

let count = 0;
while (count < 5) {
  console.log(count);
  count++;
}

Arrays:
Arrays are used to store multiple values in a single variable. They can hold values of different data types and can be accessed using indices.

let numbers = [1, 2, 3, 4, 5];
console.log(numbers.length);
console.log(numbers[2]);
numbers.push(6);
console.log(numbers);

Objects:
Objects are used to store multiple values as key-value pairs. They allow you to represent complex data structures.

let person = {
  name: "John",
  age: 25,
  isStudent: true
};

console.log(person.name);
console.log(person["age"]);
person.location = "New York";
console.log(person);

String Manipulation:
Strings are used to represent text in JavaScript. You can perform various operations on strings, such as concatenation, slicing, and converting case.

let str = "Hello, World!";
console.log(str.length);
console.log(str.toUpperCase());
console.log(str.slice(0, 5));
console.log(str.indexOf("World"));

Math Operations:
JavaScript provides built-in Math object and various methods for mathematical operations.

let num1 = 5;
let num2 = 3;

console.log(num1 + num2); // Addition
console.log(num1 - num2); // Subtraction
console.log(num1 * num2); // Multiplication
console.log(num1 / num2); // Division
console.log(num1 % num2); // Modulus
console.log(Math.pow(num1, num2)); // Exponentiation
console.log(Math.sqrt(num1)); // Square root
console.log(Math.round(3.7)); // Rounding
console.log(Math.random()); // Random number between 0 and 1

How to Create EC2 Instance in AWS

What is Amazon EC2 Instance?

An on-demand EC2 instance is an offering from AWS where the subscriber/user can rent the virtual server per hour and use it to deploy his/her own applications.

An EC2 instance is nothing but a virtual server in Amazon Web services terminology.

It stands for Elastic Compute Cloud. It is a web service where an AWS subscriber can request and provision a compute server in AWS cloud.

The instance will be charged per hour with different rates based on the type of the instance chosen. AWS provides multiple instance types for the respective business needs of the user.

Thus, you can rent an instance based on your own CPU and memory requirements and use it as long as you want. You can terminate the instance when it’s no more used and save on costs. This is the most striking advantage of an on-demand instance- you can drastically save on your CAPEX.

Let us see in detail how to launch an on-demand EC2 instance in AWS Cloud.

Login and access to AWS services

Step 1) In this step,

Login to your AWS account and go to the AWS Services tab at the top left corner.
Here, you will see all of the AWS Services categorized as per their area viz. Compute, Storage, Database, etc. For creating an EC2 instance, we have to choose Computeà EC2 as in the next step.

Open all the services and click on EC2 under Compute services. This will launch the dashboard of EC2.

Here is the EC2 dashboard. Here you will get all the information in gist about the AWS EC2 resources running.

Step 2) On the top right corner of the EC2 dashboard, choose the AWS Region in which you want to provision the EC2 server.

Here we are selecting N. Virginia. AWS provides 10 Regions all over the globe.

Step 3) In this step

Once your desired Region is selected, come back to the EC2 Dashboard.
Click on ‘Launch Instance’ button in the section of Create Instance (as shown below).

Instance creation wizard page will open as soon as you click ‘Launch Instance’.

Choose AMI

Step 1) In this step we will do,

You will be asked to choose an AMI of your choice. (An AMI is an Amazon Machine Image. It is a template basically of an Operating System platform which you can use as a base to create your instance). Once you launch an EC2 instance from your preferred AMI, the instance will automatically be booted with the desired OS. (We will see more about AMIs in the coming part of the tutorial).
Here we are choosing the default Amazon Linux (64 bit) AMI.

Choose EC2 Instance Types

Step 1) In the next step, you have to choose the type of instance you require based on your business needs.

We will choose t2.micro instance type, which is a 1vCPU and 1GB memory server offered by AWS.
Click on “Configure Instance Details” for further configurations

In the next step of the wizard, enter details like no. of instances you want to launch at a time.
Here we are launching one instance.

Configure Instance

Step 1) No. of instances- you can provision up to 20 instances at a time. Here we are launching one instance.

Step 2) Under Purchasing Options, keep the option of ‘Request Spot Instances’ unchecked as of now. (This is done when we wish to launch Spot instances instead of on-demand ones. We will come back to Spot instances in the later part of the tutorial).

Step 3) Next, we have to configure some basic networking details for our EC2 server.

You have to decide here, in which VPC (Virtual Private Cloud) you want to launch your instance and under which subnets inside your VPC. It is better to determine and plan this prior to launching the instance. Your AWS architecture set-up should include IP ranges for your subnets etc. pre-planned for better management. (We will see how to create a new VPC in Networking section of the tutorial.
Subnetting should also be pre-planned. E.g.: If it’s a web server you should place it in the public subnet and if it’s a DB server, you should place it in a private subnet all inside your VPC.

Below,

Network section will give a list of VPCs available in our platform.
Select an already existing VPC
You can also create a new VPC

Here I have selected an already existing VPC where I want to launch my instance.

Step 4) In this step,

A VPC consists of subnets, which are IP ranges that are separated for restricting access.
Below,

Under Subnets, you can choose the subnet where you want to place your instance.
I have chosen an already existing public subnet.
You can also create a new subnet in this step.

Once your instance is launched in a public subnet, AWS will assign a dynamic public IP to it from their pool of IPs.

Step 5) In this step,

You can choose if you want AWS to assign it an IP automatically, or you want to do it manually later. You can enable/ disable ‘Auto assign Public IP’ feature here likewise.
Here we are going to assign this instance a static IP called as EIP (Elastic IP) later. So we keep this feature disabled as of now.

Step 6) In this step,

In the following step, keep the option of IAM role ‘None’ as of now. We will visit the topic of IAM role in detail in IAM services.

Step 7) In this step, you have to do following things

Shutdown Behavior – when you accidently shut down your instance, you surely don’t want it to be deleted but stopped.
Here we are defining my shutdown behavior as Stop.

Step 8) In this step,

In case, you have accidently terminated your instance, AWS has a layer of security mechanism. It will not delete your instance if you have enabled accidental termination protection.
Here we are checking the option for further protecting our instance from accidental termination.

Step 9) In this step,

Under Monitoring- you can enable Detailed Monitoring if your instance is a business critical instance. Here we have kept the option unchecked. AWS will always provide Basic monitoring on your instance free of cost. We will visit the topic of monitoring in AWS Cloud Watch part of the tutorial.
Under Tenancy- select the option if shared tenancy. If your application is a highly secure application, then you should go for dedicated capacity. AWS provides both options.

Step 10) In this step,

Click on ‘Add Storage’ to add data volumes to your instance in next step.

Add Storage

Step 1) In this step we do following things,

In the Add Storage step, you’ll see that the instance has been automatically provisioned a General Purpose SSD root volume of 8GB. ( Maximum volume size we can give to a General Purpose volume is 16GB)
You can change your volume size, add new volumes, change the volume type, etc.
AWS provides 3 types of EBS volumes- Magnetic, General Purpose SSD, Provisioned IOPs. You can choose a volume type based on your application’s IOPs needs.

Tag Instance

Step 1) In this step

you can tag your instance with a key-value pair. This gives visibility to the AWS account administrator when there are lot number of instances.
The instances should be tagged based on their department, environment like Dev/SIT/Prod. Etc. this gives a clear view of the costing on the instances under one common tag.

Here we have tagged the instance as a Dev_Web server 01
Go to configure Security Groups later

Configure Security Groups

Step 1) In this next step of configuring Security Groups, you can restrict traffic on your instance ports. This is an added firewall mechanism provided by AWS apart from your instance’s OS firewall.

You can define open ports and IPs.

Since our server is a webserver=, we will do following things

Creating a new Security Group
Naming our SG for easier reference
Defining protocols which we want enabled on my instance
Assigning IPs which are allowed to access our instance on the said protocols
Once, the firewall rules are set- Review and launch

Review Instances

Step 1) In this step, we will review all our choices and parameters and go ahead to launch our instance.

Step 2) In the next step you will be asked to create a key pair to login to you an instance. A key pair is a set of public-private keys.

AWS stores the private key in the instance, and you are asked to download the private key. Make sure you download the key and keep it safe and secured; if it is lost you cannot download it again.

Create a new key pair
Give a name to your key
Download and save it in your secured folder

When you download your key, you can open and have a look at your RSA private key.

Step 3) Once you are done downloading and saving your key, launch your instance.

You can see the launch status meanwhile.

You can also see the launch log.

Click on the ‘Instances’ option on the left pane where you can see the status of the instance as ‘Pending’ for a brief while.

Once your instance is up and running, you can see its status as ‘Running’ now.
Note that the instance has received a Private IP from the pool of AWS.

Create a EIP and connect to your instance

An EIP is a static public IP provided by AWS. It stands for Elastic IP. Normally when you create an instance, it will receive a public IP from the AWS’s pool automatically. If you stop/reboot your instance, this public IP will change- it’dynamic. In order for your application to have a static IP from where you can connect via public networks, you can use an EIP.

Step 1) On the left pane of EC2 Dashboard, you can go to ‘Elastic IPs’ as shown below.

Step 2) Allocate a new Elastic IP Address.

Step 3) Allocate this IP to be used in a VPC scope.

Your request will succeed if you don’t have 5 or more than 5 EIPs already in your account.

Step 4) Now assign this IP to your instance.

Select the said IP
Click on Actions -> Associate Address

Step 5) In the next page,

Search for your instance and
Associate the IP to it.

Step 6) Come back to your instances screen, you’ll see that your instance has received your EIP.

Step 7) Now open putty from your programs list and add your same EIP in there as below.

Step 8) In this step,

Add your private key in putty for secure connection

Go to Auth
Add your private key in .ppk (putty private key) format. You will need to convert pem file from AWS to ppk using puttygen

Once done click on “Open” button

Once you connect, you will successfully see the Linux prompt.
Please note that the machine you are connecting from should be enabled on the instance Security Group for SSH (like in the steps above).

Once you become familiar with the above steps for launching the instance, it becomes a matter of 2 minutes to launch the same!

You can now use your on-demand EC2 server for your applications.

What is Spot Instance?

A spot Instance is an offering from AWS; it allows an AWS business subscriber to bid on unused AWS compute capacity. The hourly price for a Spot instance is decided by AWS, and it fluctuates depending on the supply and demand for Spot instances.

Your Spot instance runs whenever your bid exceeds the current market price. The price of a spot instance varies based on the instance type and the Availability Zone in which the instance can be provisioned.

When your bid price exceeds the market spot price of the instance called as the ‘spot price,’ your instance stays running. When the spot price overshoots the bid price, AWS will terminate your instance automatically. Therefore, it is necessary to plan the spot instances in your application architecture carefully.

Create a Spot Request

In order to launch a spot instance, you have to first create a Spot Request.

Follow the steps below to create a Spot Request.

On the EC2 Dashboard select ‘Spot Requests’ from the left pane under Instances.
Click on the button ‘Request Spot Instances” as shown below.

Spot instance launch wizard will open up. You can now go ahead with selecting the parameters and the instance configuration.

Find Instance Types

The first step for spot instance is to “Find instance types.”

Step 1) Select an AMI- an AMI is a template consisting of the OS platform and software to be installed in the instance. Select your desired AMI from the existing list. We are selecting Amazon Linux AMI for this tutorial.

Step 2) Capacity Unit- a Capacity Unit is your application requirement. You may decide to launch an instance based on the instance type, vCPU or custom configuration like your choice of vCPU/memory/storage requirements. Here we are selecting an Instance.

If you wish to customize the capacity, you can add your choice of

vCPU,
Memory and
Instance storage as below.

Step 3) Target Capacity depicts how many spot instances you wish to maintain in your request. Here we are selecting one.

Step 4) Bid Price – this is the maximum price we are ready to pay for the instance. We are going to set a particular price per instance/hour. This is the simplest to calculate based on our business requirement. We will see ahead how we should determine the bid price so that our bid price always remains high and doesn’t exceed the spot price so that our instance keeps running.

just below the bid price you can see a button of Pricing History. Click on that as shown below.

Here in Pricing History, we can see a graph depicting instance pricing trends with historical data. You can select the parameters and get an idea of the pricing of our desired instance over a period of time.

Select the product. We have selected our Linux AMI.
Select the instance type. We have selected m3.medium.
Note the average prices for over a day here.

Thus, from the chart below, we can see that the instance type that we are planning to provision lies in the pricing range of $0.01xx, and it seems that Availability Zone ‘us-east 1a’ has the lowest price.

cont. to step 4.

So let’s come back to our step of quoting a bid price.

For the sake of maintaining our instance always available and if it falls within our budget, we can quote a higher bid price. Here we have quoted a slightly higher price of $0.05.

You can see some trends in the wizard itself.

Note the instance types section
Select the instance type that we are planning to provision
Note the price that we are planning to bid. % of on-demand shows us that our quoted price is 75% of the on-demand price for the same instance type. This means we are saving 25% per hour as compared to an on-demand instance. You can further lower the price and save costs drastically.

Step 5) Once we are done looking at the trends and quoting our bid price, click on next.

Configure the Spot instance

Our next step is to configure the instance, in this step of the wizard, we’ll configure instance parameters like VPC, subnets, etc.

Let’s take a look.

Step 1) Allocation Strategy – it determines how your spot request is fulfilled from the AWS’s spot pools. There are two types of strategies:

Diversified – here, spot instances are balanced across all the spot pools
Lowest price – here, spot instances are launched from the pool which has lowest price offers

For this tutorial, we’ll select Lowest Price as our allocation strategy.

Step 2) Select the VPC- we’ll select from the list of available VPCs that we have created earlier. We can also create a new VPC in this step.

Step 3) Next we’ll select the security group for the instance. We can select an already existing SG or create a new one.

Step 4) Availability Zone- we’ll select the AZ where we want to place our instance based on our application architecture. We are selecting AZ- us-east-1a.

Step 5) Subnets- we are going to select the subnet from our list of already available list.

Step 6) Public IP- we’ll choose to assign the instance a public IP as soon as it launches. In this step, you can choose if you want AWS to assign it an IP automatically, or you want to do it manually later. You can enable/ disable ‘Auto assign Public IP’ feature here likewise.

Step 7) Key pair- A key pair is a set of public-private keys.

AWS stores the private key in the instance, and you are asked to download the private key. Make sure you download the key and keep it safe and secured; if it is lost you cannot download it again.

After selecting public IP, here we are selecting a key which we already have created in our last tutorial.

Review your Spot instance

Once we are done configuring our spot instance request in the 2 steps earlier in our wizard, we’ll take a look at the overall configuration.

We can also download a JSON file with all the configurations. Below is our JSON file.

After we are done reviewing, we can proceed with the launching by clicking the Launch button as shown below.

Once we select Launch, we can see a notification about the request getting created.

The spot request creation wizard will close, and the page will automatically direct back to the EC2 Dashboard.

You can see as shown below that the State of our request is ‘open’ which means that it is getting evaluated from the AWS’s side. AWS EC2 will check if the required instance is available in its spot pool.

After a couple of minutes, you can see that the state is changed to ‘active’, and now our spot request is successfully fulfilled. You can note the configuration parameters below.

Summary:

Because it is an on-demand server, we can keep it running when in use and ‘Stop’ it when it’s unused to save on your costs.

You can provision a Linux or Windows EC2 instance or from any of the available AMIs in AWS Marketplace based on your choice of OS platform.

We saw how to create a Spot Instance request successfully by determining our bid price.

Spot instances are a great way to save on costs for instances which are not application critical.

AWS EC2

AWS EC2 (Elastic Compute Cloud), which is a cloud computing service offered by Amazon Web Services. EC2 allows you to rent virtual servers in the cloud and run applications on them.

Here are the basic steps to get started with AWS EC2:

Create an AWS Account: If you don’t have an AWS account, go to the AWS website (https://aws.amazon.com/) and sign up for an account. You’ll need to provide your personal and payment information.
Sign in to the AWS Management Console: Once you have your AWS account, sign in to the AWS Management Console using your account credentials.
Launch an EC2 Instance: In the AWS Management Console, navigate to the EC2 service. Click on “Launch Instance” to start the process of creating a virtual server.
Choose an Amazon Machine Image (AMI): An AMI is a template for the root file system of the EC2 instance. Select an AMI that suits your requirements. AWS provides various pre-configured AMIs for different operating systems and applications.
Choose an Instance Type: Instance types determine the hardware of the host computer used for your EC2 instance. Each instance type has different CPU, memory, storage, and networking capacities. Choose an instance type based on your workload requirements.
Configure Instance Details: Configure additional details such as the number of instances you want to launch, network settings, security groups (firewall rules), and other options specific to your use case.
Add Storage: Specify the storage requirements for your EC2 instance. You can choose between different storage options like Amazon EBS (Elastic Block Store) volumes or instance store volumes.
Configure Security Groups: Security groups control inbound and outbound traffic for your EC2 instances. Define rules to allow specific traffic based on protocols, ports, and source/destination IP addresses.
Review and Launch: Review the configuration details you have provided for your EC2 instance. Make any necessary changes, if required, and then launch the instance.
Create a Key Pair: A key pair consists of a public key that is stored on the EC2 instance and a private key that you download. This key pair is used for secure login to your EC2 instance.
Connect to Your EC2 Instance: Once your EC2 instance is launched, you can connect to it using various methods such as SSH (for Linux instances) or Remote Desktop (for Windows instances). Use the private key from the key pair to securely access your instance.
Manage and Monitor Your EC2 Instances: You can perform various actions on your EC2 instances, such as stopping, starting, terminating, or resizing them. You can also monitor the performance of your instances using Amazon CloudWatch and set up alerts for specific metrics.

This tutorial provides a high-level overview of getting started with AWS EC2. There are many additional features and capabilities available, such as load balancing, auto scaling, and integrating with other AWS services, which you can explore based on your specific requirements.

I recommend referring to the official AWS documentation for more in-depth information: https://aws.amazon.com/documentation/ec2/

CSS media queries

CSS media queries are used to apply different styles based on various characteristics of the device or viewport. Media queries allow you to create responsive designs that adapt to different screen sizes, orientations, resolutions, and more.

Here are a few examples of commonly used CSS media queries:

Targeting specific screen widths:

/* Styles applied when the viewport width is 600 pixels or less */
@media (max-width: 600px) {
  /* CSS rules here */
}

/* Styles applied when the viewport width is 768 pixels or more */
@media (min-width: 768px) {
  /* CSS rules here */
}

Targeting specific device orientations:

/* Styles applied when the viewport is in landscape orientation */
@media (orientation: landscape) {
  /* CSS rules here */
}

/* Styles applied when the viewport is in portrait orientation */
@media (orientation: portrait) {
  /* CSS rules here */
}

Targeting high-resolution displays (e.g., Retina displays):

/* Styles applied when the device has a high pixel density */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  /* CSS rules here */
}

Combining multiple conditions:

/* Styles applied when the viewport width is between 600px and 1024px, and the orientation is landscape */
@media (min-width: 600px) and (max-width: 1024px) and (orientation: landscape) {
  /* CSS rules here */
}

These examples demonstrate different media query conditions that can be used to target specific device characteristics. Media queries allow you to adjust the layout, typography, or any other CSS properties based on the conditions specified, providing a flexible and responsive design for various devices and screen sizes.

It’s important to note that these examples are just a starting point, and you can customize the media queries based on your specific needs and design requirements.