Wangkanai.Responsive 3.5.1

Prefix Reserved
There is a newer version of this package available.
See the version list below for details.
dotnet add package Wangkanai.Responsive --version 3.5.1                
NuGet\Install-Package Wangkanai.Responsive -Version 3.5.1                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Wangkanai.Responsive" Version="3.5.1" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Wangkanai.Responsive --version 3.5.1                
#r "nuget: Wangkanai.Responsive, 3.5.1"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install Wangkanai.Responsive as a Cake Addin
#addin nuget:?package=Wangkanai.Responsive&version=3.5.1

// Install Wangkanai.Responsive as a Cake Tool
#tool nuget:?package=Wangkanai.Responsive&version=3.5.1                

Wangkanai Responsive View

ASP.NET Core Responsive middleware for routing base upon request client device detection to specific view. Also in the added feature of user preference made this library even more comprehensive must for developers whom to target multiple devices with view rendered and optimized directly from the server side.

Please show me some love and click the

NuGet Badge NuGet Badge

Build Status Open Collective Patreon GitHub

This project development has been in the long making of my little spare time. Please show your appreciation and help me provide feedback on you think will improve this library. All developers are welcome to come and improve the code by submit a pull request. We will have constructive good discussion together to the greater good.


Installation of Responsive library is now done with a single package reference point.

PM> install-package Wangkanai.Responsive

This library host the component services to resolve the access client device type. To the services your web application is done by configuring the Startup.cs by adding the detection service in the ConfigureServices method.

public void ConfigureServices(IServiceCollection services)
    // Add detection services container and device resolver service.

    // Needed by Wangkanai Detection
    services.AddSession(options =>
        options.IdleTimeout = TimeSpan.FromSeconds(10);
        options.Cookie.HttpOnly = true;
        options.Cookie.IsEssential = true;

    // Add framework services.
  • AddResponsive() Adds the detection services to the services container.

The current device on a request is set in the Responsive middleware. The Responsive middleware is enabled in the Configure method of Startup.cs file. Make sure that you have app.UseDetection() before app.UseRouting .

public void Configure(IApplicationBuilder app, IHostingEnvironment env)

    app.UseEndpoints(endpoints => endpoints.MapDefaultControllerRoute());

Adding the TagHelper features to your web application with following in your _ViewImports.cshtml

@using WebApplication1

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Wangkanai.Detection

Responsive Service

This is where thing get more interesting that is built upon detection service, or matter a fact detection service was built because of responsive service. The concept is that we would like to have views that correspond to what kind of device to accessing to our web app.

Responsive MVC

Responsive Views for MVC has 2 format for you to utilize. First is would be to most common is Suffix and the secord format is SubFolder. Lets make this follow example a suffix as of my opinionated would be the most common way to managed all the views. This suffix format is done by add device type before the file extension .cshtml like _ .mobile.cshtml_. Below is how you would structure your Views folder.

Responsive view file structure

Responsive Razor Pages

Responsive for razor pages newly added in wangkanai.detection 3.0. This enable completed responsive in core ecosystem. Same like Views in MVC we have suffix format where we add the device type in before the file extension .cshtml like .mobile.cshtml.

Responsive razor pages file structure

Responsive Tag Helpers

The next exciting feature add in wangkanai.detection 3.0 is Tag Helpers. This make you able to use the same view and just show/hide specific part of the views to the client base upon their type, this include Device, Browser, Platform, Engine, and Crawler that our detection resolver could determine from the resolver parsing services.

<device include="mobile">is mobile</device>
<device exclude="mobile">not mobile</device>
<browser include="chrome">is chrome</browser>
<browser exclude="chrome">not chrome</browser>
<platform include="windows">is windows</platform>
<platform exclude="windows">not windows</platform>
<engine include="blink">is blink</engine>
<engine exclude="blink">not blink</engine>
<crawler include="google">is google</crawler>
<crawler exclude="google">not google</crawler>

User Preference

When a client visit your web application by using a mobile device and you have responsive view for mobile device. But the visitor would like to view the web app with a desktop view, their click this link to change their preference to desktop view.

<a href="/Detection/Preference/Prefer">
    <div class="alert alert-light" role="alert">
        Desktop version

If the client selected to view in desktop view, he/she can switch back mobile view by the follow example;

<preference only="mobile">
    <a href="/Detection/Preference/Clear">
        <div class="alert alert-light" role="alert">
            Switch to mobile version

Responsive Options

You can customize the default behaviour of how responsive service would react to client request. You can go in deep by examining ResponsiveOptions.

public void ConfigureServices(IServiceCollection services)
    // Add responsive services.
    services.AddResponsive(options =>
        options.DefaultTablet  = Device.Desktop;
        options.DefaultMobile  = Device.Mobile;
        options.DefaultDesktop = Device.Desktop;
        options.IncludeWebApi  = false;
        options.Disable        = false;
        options.WebApiPath     = "/Api";

    // Add framework services.
  • AddDetection(Action<DetectionOptions> options) Adds the detection services to the services container.

Directory Structure

  • src - The source code of this project lives here
  • test - The test code of this project lives here
  • collection - Collection of sample user agents for lab testing
  • sample - Contains sample web application of usage
  • doc - Contains the documentation on how utilized this library


All contribution are welcome, please contact the author.


Code Contributors

This project exists thanks to all the people who contribute. [Contribute]. <a href=""><img src="" /></a>

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]


Individuals Contributors


Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

<a href=""><img src=""></a> <a href=""><img src=""></a> <a href=""><img src=""></a> <a href=""><img src=""></a> <a href=""><img src=""></a> <a href=""><img src=""></a> <a href=""><img src=""></a> <a href=""><img src=""></a> <a href=""><img src=""></a> <a href=""><img src=""></a>

Product Compatible and additional computed target framework versions.
.NET net5.0 is compatible.  net5.0-windows was computed.  net6.0 is compatible.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
.NET Core netcoreapp3.1 is compatible. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
7.8.0 2,739 11/27/2023
7.7.0 524 11/23/2023
7.6.0 543 11/17/2023
7.5.0 545 11/15/2023
7.4.0 92 11/1/2023
7.3.0 196 10/22/2023
7.2.0 95 9/28/2023
7.1.0 76 9/21/2023
7.0.0 830 7/20/2023
6.2.0 938 7/7/2023
6.1.0 757 7/1/2023
6.0.0 818 6/28/2023
5.4.0 1,529 6/16/2023
5.3.1 985 6/7/2023
5.3.0 1,205 5/15/2023
5.2.0 818 5/11/2023
5.1.1 974 4/13/2023
5.1.0 1,289 4/3/2023
5.0.0 1,032 1/18/2023
4.10.4 959 1/17/2023
4.10.3 972 1/10/2023
4.10.2 1,036 1/3/2023
4.10.1 962 12/31/2022
4.10.0 3,883 12/27/2022
4.9.0 1,008 12/23/2022
4.8.0 1,077 11/30/2022
4.7.0 937 11/28/2022
4.6.0 970 11/27/2022
4.5.0 1,003 11/26/2022
4.4.0 975 11/24/2022
4.3.0 1,013 11/24/2022
4.2.0 1,013 11/15/2022
4.1.0 1,018 11/9/2022
4.0.0 991 11/9/2022
3.5.2 2,023 9/27/2022
3.5.1 1,095 9/19/2022
3.5.0 1,389 9/13/2022
3.4.0 1,064 9/13/2022
3.3.300 1,111 9/9/2022
3.3.200 1,296 8/23/2022
3.3.100 1,061 8/21/2022
3.2.0 2,366 6/23/2022
3.1.0 1,886 3/6/2022
3.0.0 2,271 2/9/2022
3.0.0-alpha3 775 2/9/2022
3.0.0-alpha2 760 2/8/2022
3.0.0-alpha1 785 2/4/2022
2.0.1 28,214 9/25/2020
2.0.0 18,253 12/29/2019
2.0.0-beta15 1,373 12/27/2019
2.0.0-beta14 1,242 12/25/2019
2.0.0-beta13 1,579 12/8/2019
2.0.0-beta12 3,708 8/2/2019
2.0.0-beta11 2,066 5/2/2019
2.0.0-beta04 1,461 5/3/2019