kaveer's blog

Passing Data from Controller to View in ASP.NET Core MVC In ASP.NET Core MVC, passing data from the controller to the view is a crucial part of rendering dynamic content. There are several ways to pass data, including ViewData , ViewBag , and Model . Let's explore these methods: 1. Passing Data Using Model The most common and recommended way to pass data from the controller to the view is by using a model . Steps: Create a Model : Define a class that will hold the data. Pass the Model : Use the View() method in the controller to pass the model data to the view. Use the Model in the View : In the view, specify the model type and access its properties. Example: Step 1: Create a Model public class Product { public int Id { get; set; } public string Name { get; set; } public decimal Price { get; set; } } Step 2: Controller public class ProductController : Controller { public IActionResult Index() { var product = new Product ...

Creating Controllers & Actions in ASP.NET Core MVC In ASP.NET Core MVC, Controllers are responsible for handling incoming HTTP requests and returning an appropriate response. Actions are methods within controllers that handle specific requests and provide the logic for what should happen when those requests are made. 1. Understanding Controllers Controllers are classes in ASP.NET Core that contain action methods . Each action method corresponds to a route in the application and performs a specific task, such as displaying a view or handling user input. Syntax : public class ControllerNameController : Controller { // Action methods go here } A controller class typically ends with "Controller", e.g., ProductController , HomeController . The Controller class inherits from the base class Controller provided by ASP.NET Core. 2. Creating a Basic Controller Let’s create a controller to handle product-related actions in a simple e-commerce applicat...

Understanding the MVC Pattern MVC (Model-View-Controller) is a software architectural pattern commonly used for developing user interfaces, especially in web applications. It helps in organizing the code in a way that separates the concerns of data, user interface, and the logic that connects the two. MVC makes the application more modular, maintainable, and testable. MVC Components: Model : Definition : The model represents the application's data and the business logic. It directly manages the data, logic, and rules of the application. Responsibilities : Represents the state of the application. Fetches data from the database (using ORM tools like Entity Framework). Contains business logic and validation rules. Sends data to the view. Can notify the controller of any changes or updates. View : Definition : The view is the presentation layer, representin...

Understanding ASP.NET Core Project Structure ASP.NET Core follows a structured and modular approach. Let's break down the key components of a typical ASP.NET Core project. 🔹 1️⃣ Project Structure Overview 📂 MyAspNetApp/ ├── 📄 Program.cs ➝ Application Entry Point ├── 📄 appsettings.json ➝ Configuration Settings ├── 📂 wwwroot/ ➝ Static Files (CSS, JS, Images) ├── 📂 Controllers/ ➝ Handles HTTP Requests (MVC API) ├── 📂 Models/ ➝ Defines Data Structures ├── 📂 Views/ ➝ Handles UI Rendering (Razor Views for MVC) ├── 📂 Middleware/ ➝ Custom Request Processing Logic 🔹 2️⃣ Program.cs - Application Entry Point This is where the ASP.NET Core app starts . It registers services , configures middleware , and sets up the request pipeline . Example Program.cs File: var builder = WebApplication.CreateBuilder(args); // Add services to the container builder.Services.AddControllersWithViews(); // Enables MVC var app = builder.Build(); // Configure Middleware P...

Template syntax is how Angular binds data and adds logic to your HTML. Let’s break down the essentials: interpolation ( {{ }} ), and structural directives like *ngIf and *ngFor . 🧩 Interpolation – {{ }} Interpolation is used to display data from your component class in the template. ✅ Example: <p>Hello, {{ name }}!</p> export class AppComponent { name = 'Angular'; } 🧰 Structural Directives Structural directives shape or change the structure of the DOM . They start with an asterisk * . 1. 🧾 *ngIf – Conditional Rendering Renders the element only if the condition is true . <p *ngIf="isLoggedIn">Welcome back!</p> <p *ngIf="!isLoggedIn">Please log in.</p> isLoggedIn = true; You can also use else : <div *ngIf="items.length > 0; else noItems"> <p>Items available!</p> </div> <ng-template #noItems> <p>No items found.</p> </ng-templat...

🧩 What is a Component Decorator? The @Component decorator is a TypeScript decorator that tells Angular: "Hey, this class is a component and here’s some extra information about it." It's applied above the class definition and includes a metadata object . 🔧 Basic Syntax import { Component } from '@angular/core'; @Component({ selector: 'app-my-component', templateUrl: './my-component.component.html', styleUrls: ['./my-component.component.css'] }) export class MyComponent { // Component logic here } 📦 Metadata Properties Breakdown Property Description selector The name used to include the component in HTML ( <app-my-component> ). template Inline HTML template. templateUrl External HTML file for the template. styles Inline styles for the component. styleUrls External CSS or SCSS files. providers List of services/providers available only to this ...

Creating components is a core concept in Angular because components are the building blocks of any Angular application. 🔹 What is an Angular Component? A component in Angular controls a view (HTML template) and contains logic to support that view (written in a TypeScript class). It typically consists of: A .ts file (logic) A .html file (template) A .css or .scss file (styling) 🔧 How to Create a Component ✅ Using Angular CLI (recommended) ng generate component component-name # OR ng g c component-name For example: ng g c user-profile This creates a folder like this: src/app/user-profile/ ├── user-profile.component.ts ← component logic ├── user-profile.component.html ← template ├── user-profile.component.css ← styles ├── user-profile.component.spec.ts ← test file 🧱 Anatomy of a Component user-profile.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-user-profile', temp...