DEV Community: Steve Mak

How to make an URL to be shorter?

Steve Mak — Tue, 07 Jan 2025 16:21:54 +0000

Have you experience on sharing a long URL to other people and think so difficult to input into your mobile device?

Here is the guide for you to create a short URL and convert it to QR code with logo in the center which make it more meaningful.

Sample
https://medium.com/@ssmak/whats-the-difference-between-live-reload-and-hot-reload-9a013fb4c288

Result
https://i.gourl.ing/e8txa5

Step 1
Visit the website: https://shortest.me/.
Shortest.me is a web platform that let you create a short URL and QR code.
You can also setup a password for the link even an expiry time. Especially, the service is free today.

Step 2
Paste the long URL into the provided field.

Step 3
a: Select the icon here or
b: You can select your custom image here
c: You can setup a password for the link
d: You can setup the expiry date
e: Click the ‘Start’ button to generate the short URL or QR code.

Step 4
Share the short URL or QR code with others.

This process makes it easier to share long URLs and adds a personalized touch with the QR code logo.

Enjoy and make your life easier!

Ionic

Steve Mak — Sat, 26 Nov 2022 14:09:33 +0000

Quick Start

For full documentation, please visit to the official website:

CLI

Install/Update Ionic as global CLI

npm install -g ionic

New project

ionic start myApp

Link project to Ionic AppFlow

ionic link

Preview in web browser

ionic serve

Build web assets and prepare your app for any platform targets

ionic build

Add a native platform to your Ionic project

ionic capacitor add android
ionic capacitor add ios

Open the project in Xcode

ionic capacitor open ios

Sync web assets folder to ios/android folder

ionic capacitor copy ios
ionic capacitor copy android

Live reload with capacitor

ionic capacitor run ios -l --external
ionic capacitor run android -l

Install native plugin

// Install Core library (once per project)
npm install @ionic-native/core --save

// Install Ionic Native TypeScript wrapper
npm install @ionic-native/barcode-scanner --save

// Install Cordova plugin
npm install phonegap-plugin-barcodescanner --save

// Update native platform project(s) to include newly added plugin
ionic cap sync

Overview of ASP.NET & ASP.NET Core

Steve Mak — Sat, 26 Nov 2022 11:31:37 +0000

ASP.NET

Reference

ASP.NET Web Forms ^.aspx

Initial release on January 5, 2002.
A framework for building modular pages out of components, with UI events being processed server-side.
Web Forms was included in the original .NET Framework 1.0 release in 2002.
The first programming model available in ASP.NET.
Code-behind model.
Unlike newer ASP.NET components, Web Forms is not supported by ASP.NET Core.
File extension: .aspx, .cshtml, .vbhtml

Reference

https://docs.microsoft.com/en-us/aspnet/web-forms

ASP.NET MVC

Initial release on March 13, 2009.
Stable release on November 28, 2018.
Allows for building web pages using the model–view–controller design pattern.

Reference

ASP.NET Web Pages (Razor) ^{.cshtml .vbhtml}

Initial release on January 2011.
A lightweight syntax for adding dynamic code and data access directly inside HTML markup.
The namespace for Razor Engine is System.Web.Razor

Reference

https://docs.microsoft.com/en-us/aspnet/web-pages

ASP.NET Web API

A framework for building Web APIs on top of the .NET Framework.

Reference

https://docs.microsoft.com/en-us/aspnet/web-api

ASP.NET WebHooks

Implements the Webhook pattern for subscribing to and publishing events via HTTP.

Reference

https://docs.microsoft.com/en-us/aspnet/webhooks

SignalR

A real-time communications framework for bi-directional communication between client and server.

Reference

https://docs.microsoft.com/en-us/aspnet/signalr

ASP.NET AJAX

An extension with both client-side as well as server-side components for writing ASP.NET pages that incorporate Ajax functionality.

ASP.NET Dynamic Data

A scaffolding extension to build data driven web applications..

ADO.NET

A data access technology from the Microsoft .NET Framework that provides communication between relational and non-relational systems through a common set of components.

Entity Framework (EF)

Initial release on August 11, 2008.
Stable release on September 29, 2019.
An open source object-relational mapping (ORM) framework for ADO.NET. It was a part of .NET Framework, but since Entity Framework version 6 it is separated from .NET framework.
The first version of Entity Framework (EFv1) was included with .NET Framework 3.5 Service Pack 1 and Visual Studio 2008 Service Pack 1, released on 11 August 2008.

LINQ

LING to SQL

Allows to be used to query Microsoft SQL Server databases, including SQL Server Compact databases.

LING to Entities

The LINQ to Entities provider allows LINQ to be used to query various RDBMS data sources. Several database server specific providers with Entity Framework support are available.

ASP.NET Core

Reference

https://en.wikipedia.org/wiki/ASP.NET_Core

.NET Core is a free and open-source, managed computer software framework for Windows, Linux, and macOS operating systems.[5] It is a cross-platform[6] successor to .NET Framework.[7] The project is primarily developed by Microsoft and released under the MIT License.
ASP.NET Core version 3 works only on .NET Core dropping support of .NET Framework.

Identity Core

MVC Core

Initial release on 27 June 2016.

Razor Page

Web API

Blazor

Entity Framework Core (EF Core)

A modern object-database mapper for .NET. It supports LINQ queries, change tracking, updates, and schema migrations.
Reference: https://github.com/dotnet/efcore

gRPC

NuGet

Cheatsheet for LINQ

Steve Mak — Sat, 26 Nov 2022 11:25:09 +0000

Intro.

A query variable is always an enumerable type that will produce a sequence of elements when it is iterated over in a foreach statement or a direct call to its IEnumerator.MoveNext method.

Syntax

from .. in ..
[ join .. in .. on .. equals .. ]
[ where | orderby .. ascending | descending | let ]
[ group .. by .. into .. ]
select new {}

Group clause

var queryCountryGroups =
    from country in countries
    group country by country.Name[0];

Select clause

var queryNameAndPop =
    from country in countries
    select new { Name = country.Name, Pop = country.Population };

Orderby clause

IEnumerable<Country> querySortedCountries =
    from country in countries
    orderby country.Area, country.Population descending
    select country;

Join clause

var categoryQuery =
    from cat in categories
    join prod in products on cat equals prod.Category
    select new { Category = cat, Name = prod.Name };

Let clause

string[] names = { "Svetlana Omelchenko", "Claire O'Donnell", "Sven Mortensen", "Cesar Garcia" };
IEnumerable<string> queryFirstNames =
    from name in names
    let firstName = name.Split(' ')[0]
    select firstName;

foreach (string s in queryFirstNames)
    Console.Write(s + " ");
//Output: Svetlana Claire Sven Cesar

Subqueries in a query expression

var queryGroupMax =
    from student in students
    group student by student.GradeLevel into studentGroup
    select new
    {
        Level = studentGroup.Key,
        HighestScore =
            (from student2 in studentGroup
             select student2.Scores.Average())
             .Max()
    };

// percentileQuery is an IEnumerable<IGrouping<int, Country>>
var percentileQuery =
    from country in countries
    let percentile = (int) country.Population / 10_000_000
    group country by percentile into countryGroup
    where countryGroup.Key >= 20
    orderby countryGroup.Key
    select countryGroup;

// grouping is an IGrouping<int, Country>
foreach (var grouping in percentileQuery)
{
    Console.WriteLine(grouping.Key);
    foreach (var country in grouping)
        Console.WriteLine(country.Name + ":" + country.Population);
}

Standard query operators

Ref: https://docs.microsoft.com/en-us/dotnet/api/system.linq.enumerable.selectmany?view=netcore-3.1

Where Select SelectMany Skip SkipWhile
Take TakeWhile Join GroupJoin Concate
OrderBy OrderByDescending ThenBy ThenByDescending Reverse
GroupBy Distinct Union Intersect Except
AsEnumerable AsQueryable ToArray ToList ToDictionary
ToLookup OfType Cast SequenceEqual First
FirstOrDefault Last LastOrDefault Single SingleOfDefault
ElementAt ElementAtOrDefault DefaultEmpty All Any
Contains Count LongCout Sum Min
Max Average Aggregate equal/Equals from/From
in/In into/Into key let Group
Range Repeat

Learning Notes of ADO.NET

Steve Mak — Sat, 26 Nov 2022 11:24:25 +0000

Primary Objects

(Ref: https://docs.microsoft.com/en-us/dotnet/framework/data/adonet/data-providers)

Connection - Provides connectivity to a data source.
Command - Enables access to database commands to return data, modify data, run stored procedures, and send or retrieve parameter information.
DataReader - Provides a high-performance stream of data from the data source.
DataAdapter - Provides the bridge between the DataSet object and the data source. The DataAdapter uses Command objects to execute SQL commands at the data source to both load the DataSet with data and reconcile changes that were made to the data in the DataSet back to the data source.
DataSet - Contains a collection of one or more DataTable objects consisting of rows and columns of data, and also primary key, foreign key, constraint, and relation information about the data in the DataTable objects. (DataTable, DataView, DataRow)

DataReader or DataSet

Use a DataSet to do the following:

Cache data locally in your application so that you can manipulate it. If you only need to read the results of a query, the DataReader is the better choice.
Remote data between tiers or from an XML Web service.
Interact with data dynamically such as binding to a Windows Forms control or combining and relating data from multiple sources.
Perform extensive processing on data without requiring an open connection to the data source, which frees the connection to be used by other clients.

Cheatsheet for Dotnet-CLI

Steve Mak — Sat, 26 Nov 2022 11:23:04 +0000

Reference

https://docs.microsoft.com/en-us/dotnet/core/tools/

List installed package

dotnet list package

Restores the dependencies and tools of a project

dotnet restore

Install new package to local project

dotnet add package <package_name>

Remove package from local project

dotnet remove package <package_name>

MongoDB

Steve Mak — Sat, 26 Nov 2022 11:20:50 +0000

Reference

https://docs.mongodb.com/manual/reference/

Default MongoDB Port

Default Port	Description
27017	The default port for mongod and mongos instances. You can change this port with port or --port.
27018	The default port for mongod when running with --shardsvr command-line option or the shardsvr value for the clusterRole setting in a configuration file.
27019	The default port for mongod when running with --configsvr command-line option or the configsvr value for the clusterRole setting in a configuration file.

Common Mongod options

mongod --help
mongod --dbpath <directory path>
mongod --logpath <file path>
mongod --port <port number>
mongod --auth
mongod --bind_ip localhost,123.123.123.123
// Let Mongod run as Daemon
mongod --fork
mongod --replSet "<Replicate set name>"
mongod --keyFile "<Key file path>"
mongod --sslMode requireSSL
mongod --sslCAFile <CA file path in PEM format>
mongod --sslPEMKeyFile <Key file path in PEM format>
mongod --config "<Configuration file path>"
mongod -f "<Configuration file path>'

Default Database Roles

Role	Privileges
Database User	readAnyDatabase, readWriteAnyDatabase
Database Administration	dbAdminAnyDatabase,userAdminAnyDatabase
Cluster Administration	-
Backup/Restore	-
Super User	root
userAdmin	-
dbAdmin	-
dbOwner	-
readWrite	-

Manage db user

//
// Create a new user
//
mongo admin --host localhost:27000 --eval '
  db.createUser({
    user: "m103-admin",
    pwd: "m103-pass",
    roles: [
      {role: "root", db: "admin"}
    ]
  })
'

// OR

use admin
db.createUser(
  {
    user: "myUserAdmin",
    pwd: passwordPrompt(), // or cleartext password
    roles: [ { role: "userAdminAnyDatabase", db: "admin" }, "readWriteAnyDatabase" ]
  }
)

//
// Grant role to db user
//
db.grantRolesToUser( "dba",  [ { db: "playground", role: "dbOwner"  } ] )

//
// Query the role privileges
//
db.runCommand( { rolesInfo: { role: "dbOwner", db: "playground" }, showPrivileges: true} )

MongoDB Shell (Common operations)

# Connect to MongoDB server
mongo "mongodb+srv://cluster0.rwrtm.mongodb.net/<dbname>" --username test
// OR
mongo --username root --password root123 --authenticationDatabase admin

# Show all existing databases
show dbs
# or
show databases

# Switch database
use <database_name>

# Show all collection within current database
show collections

# Create a new collection
db.createCollection('<collection_name>');

# Create index
db.<collection>.createIndex(
  { "product": 1 },
  { "name": "name_index" }
)

# Load data into database
load('loadMovieDetailsDataset.js')

# Shutdown the Mongod (*Must switch to 'admin' database first)
db.shutdownServer()
// OR
db.adminCommand( { shutdown: 1 } )

# Iterate next result set in cursor
it

# Select document
## Select all data with pretty print out
db.<collection_name>.find().pretty()
## Select with matching criteria for array or nested object
db.movieDetails.find({ "genres.1": "Western" })
## Projection: Select the 'genres' field in return only (1: include, 0: exclude)
db.movieDetails.find({ "year": 1982 }, { "genres": 1 })
## With comparison operators ($eq, $gt, $gte, $in, $lt, $lte, $ne, $nin)
db.movieDetails.find({ writers: { $in: [ 'Ethan Coen', 'Joel Coen' ]}})
## With element operators ($exists, $type)
db.movies.find({ viewerRating: { $type: 'int'}})
## With logical operators ($and, $not, $nor, $or)
db.shipwracks.find({$or: [{watlev: {$eq: 'always dry'}}, {$and: [{depth: {$type: 'int'}}, {depth: {$eq: 0}}]}]})
## With array operator ($all, $elemMatch, $size)
db.movieDetails({genres: {$all: ["Comedy", "Crime", "Drama"]}})
## WIth evaluation operators ($expr, $jsonSchema, $mod, $regex, $text, $where)
db.movieDetails({'awards.text': {$regex: /^Won .*/}})

# Insert document
## Insert only one document
db.<collection_name>.insertOne({});
## Insert few documents at a time
db.<collection_name>.insertMany([],{ "ordered": <boolean> });

# Update document
# Update only one document
db.moviesScratch.updateOne({"type": "movie"}, { $set: { "type": "book" } })
## Update few documents at a time
db.moviesScratch.updateMany({}, { $set: { "star": "" } })
## Update or Insert a new document if not existed
db.moviesScratch.updateOne({ title: "Steve Jobs" }, { $set: { title: "Steve Jobs", year: 2000, type: "movie", comment: [] }}, { upsert: true })
# Replace whole document (field '_id' is immutable and can't be changed)
db.moviesScratch.replaceOne({title:"Steve Jobs"}, tmp)

# Delete document
## Delete only one document
db.moviesScratch.deleteOne({title:"Steve Jobs 2"})
## Delete few documents at a time
db.moviesScratch.deleteMany({title:"Steve Jobs"})

User management commands:

db.createUser()
db.dropUser()

Collection management commands:

db.<collection>.renameCollection()
db.<collection>.createIndex()
db.<collection>.drop()

Database management commands:

db.dropDatabase()
db.createCollection()

Database status command:

db.serverStatus()

Log related command:

# Get the logging components:
db.getLogComponents()

# Change the logging level:
db.setLogLevel(0, "index")

# View the logs through the Mongo shell:
db.adminCommand({ "getLog": "global" })

Profile related command:

# Get profiling level
db.getProfilingLevel()

# Set profiling level:
db.setProfilingLevel(1)

# Set slowms to 0:
db.setProfilingLevel( 1, { slowms: 0 } )

# Get profiling data from system.profile:
db.system.profile.find().pretty()

Built-in management tools

Program	Description	Usage
mongostat	Get stats on a running mongod process.	mongostat --port 30000
mongodump	Get a BSON dump of a MongoDB collection.	mongodump --port 30000 --db applicationData --collection products
mongorestore	Restore a MongoDB collection from a BSON dump.	mongorestore --drop --port 30000 dump/
mongoexport	Export a MongoDB collection to JSON or CSV (or stdout!).	mongoexport --port 30000 --db applicationData --collection products -o products.json
mongoimport	Create a MongoDB collection from a JSON or CSV file.	mongoimport --port 30000 products.json

Replication

Log Format
1. Binary
2. Statement-Based
Roles
1. Primary
2. Secondary
3. Arbiter
4. Delayed
Commands

Command	Description
rs.status()	Getting replica set status.
rs.initiate()	Initiating the replica set.
rs.add()	Adding other members to replica set.
rs.isMaster()	Getting an overview of the replica set topology.
rs.stepDown()	Stepping down the current primary.

Cheatsheet for Composer

Steve Mak — Sat, 26 Nov 2022 11:19:11 +0000

Reference

https://getcomposer.org/doc/

Download & Install composer locally

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === '8a6138e2a05a8c28539c9f0fb361159823655d7ad2deecb371b04a83966c61223adc522b0189079e3e9e277cd72b8897') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

Check composer version

./composer.phar --version

Create a new project based on existing repository

./composer create-project --prefer-dist laravel/laravel .

Make directory writable within the Laravel application

1) storage
2) bootstrap/cache

LDAP

Steve Mak — Sat, 26 Nov 2022 11:17:48 +0000

LDAP (Lightweight Directory Access Protocol)

LDAP目錄的條目（entry）由屬性（attribute）的一個聚集組成，並由一個唯一性的名字參照，即專有名稱（distinguished name，DN）。例如，DN能取這樣的值：「ou=people,dc=wikipedia,dc=org」。
LDAP is appropriate for any kind of directory-like information, where fast lookups and less-frequent updates are the norm.
LDAP does not define how programs work on either the client or server side. It defines the "language" used for client programs to talk to servers (and servers to servers, too).

Normal Attribute Name (X.500 standard)

Attribute	Meaning	Example
dn	Distinguished name
dc
o	Organization
ou
c	Country	Country: e.g GB for Great Britain.
cn	Common name	CN=Guy Thomas. Actually, this LDAP attribute can be made up from givenName joined to SN.
sn	Surname
givenName
homeDrive		Home Folder: connect. Tricky to configure.
name		name = Guy Thomas. Exactly the same as CN.
displayName
objectClass	objectClass = User. Also used for Computer, organizationalUnit, even container. Important top-level container.
title	Job title	title = Manager
description	Description
mail	E-mail
wWWHomePage	User's home page

Reference

GUI LDAP Client tool

http://www.ldapadmin.org/

Filter

Stream

Steve Mak — Sat, 26 Nov 2022 11:07:33 +0000

Convert n elements to an array list

List<Integer> numbers = Arrays.asList(1, 2, 3, 4, 5, 6);

Stream

Stream map

List<String> listOfStrings = Arrays.asList("1", "2", "3", "4", "5");

List<Integer> listOfIntegers = listOfStrings.stream()
        .map(Integer::valueOf)
        .collect(Collectors.toList());

System.out.println(listOfIntegers);

Stream reduce

//
// Example 1
//
List<Integer> numbers = Arrays.asList(1, 2, 3, 4, 5, 6);
int result = numbers
  .stream()
  .reduce(0, (subtotal, element) -> subtotal + element);
assertThat(result).isEqualTo(21);

//
// Example 2 (Use method reference)
//
int result = numbers.stream().reduce(0, Integer::sum);
assertThat(result).isEqualTo(21);

//
// Example 3
//
List<User> users = Arrays.asList(new User("John", 30), new User("Julie", 35));
int result = users.stream()
  .reduce(0, (partialAgeResult, user) -> partialAgeResult + user.getAge(), Integer::sum);
assertThat(result).isEqualTo(65);

Stream.flatMap

//
// Example 1
//
Merging Lists into a Single List
List<Integer> list1 = Arrays.asList(1,2,3);
List<Integer> list2 = Arrays.asList(4,5,6);
List<Integer> list3 = Arrays.asList(7,8,9);

List<List<Integer>> listOfLists = Arrays.asList(list1, list2, list3);

List<Integer> listOfAllIntegers = listOfLists.stream()
          .flatMap(x -> x.stream())
          .collect(Collectors.toList());

System.out.println(listOfAllIntegers);

//
// Example 2
//
String[][] dataArray = new String[][]{{"a", "b"}, 
        {"c", "d"}, {"e", "f"}, {"g", "h"}};

List<String> listOfAllChars = Arrays.stream(dataArray)
              .flatMap(x -> Arrays.stream(x))
              .collect(Collectors.toList());

System.out.println(listOfAllChars);

IntStream

// Converting IntStream to Array
int[] intArray = IntStream.of(1, 2, 3, 4, 5).toArray();

// Converting IntStream to List
List<Integer> list = IntStream.of(1,2,3,4,5)
            .boxed()
            .collect(Collectors.toList());

// Returns stream containing a single specified element.
IntStream.of(10); // 10

// Returns stream containing specified all elements.
IntStream.of(1, 2, 3); // 1,2,3

// Returns a sequential ordered int stream excludes the last element.
IntStream.range(1, 5); // 1,2,3,4

// Returns a sequential ordered int stream includes the last element.
IntStream.rangeClosed(1, 5); // 1,2,3,4,5

Setup a LAMP stack development within A MINUTE!

Steve Mak — Sat, 18 Sep 2021 06:41:15 +0000

Before the minute, it assumes you have the knowledge on Git and Docker, and already installed Git and Docker Desktop. If not, please pick from there:

Git - https://git-scm.com/downloads
Docker Desktop - https://www.docker.com/get-started

Long story short, let's go!

1) Clone the project from GitHub (ssmak/lamp 👈 Cool! it is my project! 😃)

git clone https://github.com/ssmak/lamp.git

2) Enter the project directory

cd lamp

3) Start the LAMP stack

docker-compose up -d

That's it! Please check with the link http://127.0.0.1. It is the document root and mapped to the project path of ~/container_volume/www/default/html. You can also access with HTTPS, a self-signed certificate has been already generated.

Furthers reading...

MySQL

Connect to MySQL with IP:PORT (127.0.0.1:3306) and the credential (user: root password: root).

PHP

Visit http://127.0.0.1/phpinfo.php and you can see the detail settings. Notes that many common modules have been already installed for you such as MySQLi, MongoDB, Memcached, Redis and GD, etc.

For more details, please visit the project on GitHub
https://github.com/ssmak/lamp

(The cover image of this post is not my work and just from Google search. Please let me know if you are the owner and require me to remove. THX!)

Maven

Steve Mak — Thu, 10 Dec 2020 01:17:46 +0000

Official Reference: https://maven.apache.org/guides/getting-started/maven-in-five-minutes.html

New a Maven project

mvn archetype:generate -DgroupId=com.mycompany.app -DartifactId=my-app -DarchetypeArtifactId=maven-archetype-quickstart -DarchetypeVersion=1.4 -DinteractiveMode=false

Clean up target folder (build folder)

mvn clean

Compile the source

mvn compile

Compile and Pack the compiled source

mvn package

Test the package

java -cp target/lt-vaadin-components-1.0-SNAPSHOT.jar <FULL_CLASS_NAME_WITH_PACKAGE>

Install local JAR to local Maven repository

mvn install:install-file -Dfile=<path-to-file> -DgroupId=<group-id> -DartifactId=<artifact-id> -Dversion=<version>

DEV Community: Steve Mak

How to make an URL to be shorter?

Ionic

Quick Start

CLI

Capacitor

Native

CLI

Overview of ASP.NET & ASP.NET Core

ASP.NET

ASP.NET Web Forms .aspx

ASP.NET MVC

ASP.NET Web Pages (Razor) .cshtml .vbhtml

ASP.NET Web API

ASP.NET WebHooks

SignalR

ASP.NET AJAX

ASP.NET Dynamic Data

ADO.NET

Entity Framework (EF)

LINQ

LING to SQL

LING to Entities

ASP.NET Core

Identity Core

MVC Core

Razor Page

Web API

Blazor

Entity Framework Core (EF Core)

gRPC

NuGet

Cheatsheet for LINQ

Intro.

Syntax

Group clause

Select clause

Orderby clause

Join clause

Let clause

Subqueries in a query expression

Standard query operators

Learning Notes of ADO.NET

Primary Objects

DataReader or DataSet

Cheatsheet for Dotnet-CLI

List installed package

Restores the dependencies and tools of a project

Install new package to local project

Remove package from local project

MongoDB

Reference

Default MongoDB Port

Common Mongod options

Default Database Roles

Manage db user

MongoDB Shell (Common operations)

User management commands:

Collection management commands:

Database management commands:

Database status command:

Log related command:

Profile related command:

Built-in management tools

Replication

Cheatsheet for Composer

Reference

Download & Install composer locally

Check composer version

Create a new project based on existing repository

Make directory writable within the Laravel application

LDAP

LDAP (Lightweight Directory Access Protocol)

Normal Attribute Name (X.500 standard)

Reference

GUI LDAP Client tool

Filter

Stream

Stream

IntStream

ASP.NET Web Forms ^.aspx

ASP.NET Web Pages (Razor) ^{.cshtml .vbhtml}