Browser Link in ASP .NET Core

What is Browser Link?

Browser Link is a feature in Visual Studio that creates a communication channel between the development environment and one or more web browsers. You can use Browser Link to refresh your web application in several browsers at once, which is useful for cross-browser testing.

How Does It Work?

Browser Link uses SignalR to create a communication channel between Visual Studio and the browser. When Browser Link is enabled, Visual Studio acts as a SignalR server that multiple clients (browsers) can connect to. Browser Link also registers an HTTP module with ASP.NET. This module injects special <script> references into every page request from the server. You can see the script references by selecting “View source” in the browser.

https://docs.microsoft.com/en-us/aspnet/visual-studio/overview/2013/using-browser-link/_static/image13.png

Your source files are not modified. The HTTP module injects the script references dynamically.

Because the browser-side code is all JavaScript, it works on all browsers that SignalR supports, without requiring any browser plug-in.

Earlier Discussion

We discussed about the browser link in .Net Framework earlier.

Take a look at here:

Browser Link option in Visual Studio

BrowserLink in ASP .NET Core

To use BrowserLink in ASP .NET Core, we should do few tweaks in the source code.

Install the following package in your project

Microsoft.VisualStudio.Web.BrowserLink

Or using packet manager

Install-Package Microsoft.VisualStudio.Web.BrowserLink -Version 2.2.0

And config BrowserLink in your startup.cs

if (env.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
    app.UseBrowserLink();
}

Start using

Now start using the BrowserLink from the tool bar dashboard

Happy Coding!

Simple steps to create MVC application in Visual Studio

Open Visual studio

Screenshot (2)

To create a new project

Select from menu bar File > New

Screenshot (3)

Select New Project option

Select from menu bar File > New > Project

Screenshot (4)

Select Visual C# from templates from the sidebar

Templates > Visual C#

Screenshot (5)

Select Web option from visual c# to create web application

Visual C# > Web

Screenshot (6)

In the middle bar you can find ASP .NET Web Application template Select the template

Choose the project name and solution name which you wish and select target file location to save project files

Select OK to continue process project creation

Screenshot (7)

Select MVC template from the template options, make sure MVC option is selected in check box

And then select OK to continue

Screenshot (8)

Project directories are getting created

Screenshot (10)

Now the project directories are generated with basic files needed to run application

Screenshot (11)

Select Internet Explorer or preferred browser from the option to debug & run the application

Press F5 or press button with name browser name to debug application

Screenshot (12)

Initial application will looks as follows, we can customize further as we want

Homepage

Screenshot (13)

Sub pages

Screenshot (14)

Screenshot (15)

Login features

Screenshot (19)

Screenshot (20)

We can customize the further in styling as well functionality from these templates.