Wangkanai.Responsive 4.8.0

.NET 6.0 .NET Core 3.1
dotnet add package Wangkanai.Responsive --version 4.8.0
NuGet\Install-Package Wangkanai.Responsive -Version 4.8.0
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="4.8.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Wangkanai.Responsive --version 4.8.0
#r "nuget: Wangkanai.Responsive, 4.8.0"
#r directive can be used in F# Interactive, C# scripting and .NET Interactive. 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=4.8.0

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

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

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.
    services.AddResponsive();

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

    // Add framework services.
    services.AddControllersWithViews();
}
  • 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.UseResponsive() before app.UseRouting .

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseSession();
    app.UseResponsive();
    
    app.UseRouting();

    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 asp.net 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 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
    </div>
</a>

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
        </div>
    </a>
</preference>

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.
    services.AddControllersWithViews();
}
  • AddResponsive(Action<ResponsiveOptions> options) Adds the responsive services to the services container.

Directory Structure

  • src - The source code of this project lives here
  • tests - The test code of this project lives here
  • samples - Contains sample web application of usage
  • docs - Contains the documentation on how utilized this library

Contributing

All contribution are welcome, please contact the author.

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute]. <a href="https://github.com/wangkanai/Detection/graphs/contributors"> <img src="https://opencollective.com/wangkanai/contributors.svg?width=890&button=false" /> </a>

Financial Contributors

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

Individuals

Individuals Contributors

Organizations

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

<a href="https://opencollective.com/wangkanai/organization/0/website"><img src="https://opencollective.com/wangkanai/organization/0/avatar.svg"></a> <a href="https://opencollective.com/wangkanai/organization/1/website"><img src="https://opencollective.com/wangkanai/organization/1/avatar.svg"></a> <a href="https://opencollective.com/wangkanai/organization/2/website"><img src="https://opencollective.com/wangkanai/organization/2/avatar.svg"></a> <a href="https://opencollective.com/wangkanai/organization/3/website"><img src="https://opencollective.com/wangkanai/organization/3/avatar.svg"></a> <a href="https://opencollective.com/wangkanai/organization/4/website"><img src="https://opencollective.com/wangkanai/organization/4/avatar.svg"></a> <a href="https://opencollective.com/wangkanai/organization/5/website"><img src="https://opencollective.com/wangkanai/organization/5/avatar.svg"></a> <a href="https://opencollective.com/wangkanai/organization/6/website"><img src="https://opencollective.com/wangkanai/organization/6/avatar.svg"></a> <a href="https://opencollective.com/wangkanai/organization/7/website"><img src="https://opencollective.com/wangkanai/organization/7/avatar.svg"></a> <a href="https://opencollective.com/wangkanai/organization/8/website"><img src="https://opencollective.com/wangkanai/organization/8/avatar.svg"></a> <a href="https://opencollective.com/wangkanai/organization/9/website"><img src="https://opencollective.com/wangkanai/organization/9/avatar.svg"></a>

Product Versions
.NET net5.0 net5.0-windows net6.0 net6.0-android net6.0-ios net6.0-maccatalyst net6.0-macos net6.0-tvos net6.0-windows net7.0 net7.0-android net7.0-ios net7.0-maccatalyst net7.0-macos net7.0-tvos net7.0-windows
.NET Core netcoreapp3.1
Compatible target framework(s)
Additional computed target framework(s)
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
4.8.0 62 11/30/2022
4.7.0 62 11/28/2022
4.6.0 58 11/27/2022
4.5.0 61 11/26/2022
4.4.0 62 11/24/2022
4.3.0 61 11/24/2022
4.2.0 93 11/15/2022
4.1.0 94 11/9/2022
4.0.0 84 11/9/2022
3.5.2 339 9/27/2022
3.5.1 184 9/19/2022
3.5.0 247 9/13/2022
3.4.0 177 9/13/2022
3.3.300 216 9/9/2022
3.3.200 280 8/23/2022
3.3.100 178 8/21/2022
3.2.0 1,342 6/23/2022
3.1.0 875 3/6/2022
3.0.0 727 2/9/2022
3.0.0-alpha3 71 2/9/2022
3.0.0-alpha2 67 2/8/2022
3.0.0-alpha1 91 2/4/2022
2.0.1 10,541 9/25/2020
2.0.0 14,779 12/29/2019
2.0.0-beta15 528 12/27/2019
2.0.0-beta14 446 12/25/2019
2.0.0-beta13 756 12/8/2019
2.0.0-beta12 2,809 8/2/2019
2.0.0-beta11 1,205 5/2/2019
2.0.0-beta04 645 5/3/2019