Wangkanai.Responsive
4.10.0
Prefix Reserved
See the version list below for details.
dotnet add package Wangkanai.Responsive --version 4.10.0
NuGet\Install-Package Wangkanai.Responsive -Version 4.10.0
<PackageReference Include="Wangkanai.Responsive" Version="4.10.0" />
paket add Wangkanai.Responsive --version 4.10.0
#r "nuget: Wangkanai.Responsive, 4.10.0"
// Install Wangkanai.Responsive as a Cake Addin #addin nuget:?package=Wangkanai.Responsive&version=4.10.0 // Install Wangkanai.Responsive as a Cake Tool #tool nuget:?package=Wangkanai.Responsive&version=4.10.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 ⭐
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 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 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 heretests
- The test code of this project lives heresamples
- Contains sample web application of usagedocs
- 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
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 Compatible and additional computed target framework versions. |
---|---|
.NET | net5.0 was computed. 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 is compatible. 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. |
-
.NETCoreApp 3.1
- Microsoft.Extensions.DependencyInjection.Abstractions (>= 3.1.0)
- Wangkanai.Detection (>= 6.11.0)
-
net6.0
- Microsoft.Extensions.DependencyInjection.Abstractions (>= 6.0.0)
- Wangkanai.Detection (>= 6.11.0)
-
net7.0
- Microsoft.Extensions.DependencyInjection.Abstractions (>= 7.0.0)
- Wangkanai.Detection (>= 6.11.0)
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 | 3,595 | 11/27/2023 | |
7.7.0 | 544 | 11/23/2023 | |
7.6.0 | 561 | 11/17/2023 | |
7.5.0 | 563 | 11/15/2023 | |
7.4.0 | 102 | 11/1/2023 | |
7.3.0 | 205 | 10/22/2023 | |
7.2.0 | 105 | 9/28/2023 | |
7.1.0 | 85 | 9/21/2023 | |
7.0.0 | 849 | 7/20/2023 | |
6.2.0 | 956 | 7/7/2023 | |
6.1.0 | 776 | 7/1/2023 | |
6.0.0 | 835 | 6/28/2023 | |
5.4.0 | 1,720 | 6/16/2023 | |
5.3.1 | 1,004 | 6/7/2023 | |
5.3.0 | 1,242 | 5/15/2023 | |
5.2.0 | 839 | 5/11/2023 | |
5.1.1 | 991 | 4/13/2023 | |
5.1.0 | 1,308 | 4/3/2023 | |
5.0.0 | 1,050 | 1/18/2023 | |
4.10.4 | 976 | 1/17/2023 | |
4.10.3 | 989 | 1/10/2023 | |
4.10.2 | 1,053 | 1/3/2023 | |
4.10.1 | 979 | 12/31/2022 | |
4.10.0 | 4,295 | 12/27/2022 | |
4.9.0 | 1,026 | 12/23/2022 | |
4.8.0 | 1,095 | 11/30/2022 | |
4.7.0 | 954 | 11/28/2022 | |
4.6.0 | 986 | 11/27/2022 | |
4.5.0 | 1,021 | 11/26/2022 | |
4.4.0 | 995 | 11/24/2022 | |
4.3.0 | 1,030 | 11/24/2022 | |
4.2.0 | 1,034 | 11/15/2022 | |
4.1.0 | 1,038 | 11/9/2022 | |
4.0.0 | 1,008 | 11/9/2022 | |
3.5.2 | 2,110 | 9/27/2022 | |
3.5.1 | 1,118 | 9/19/2022 | |
3.5.0 | 1,445 | 9/13/2022 | |
3.4.0 | 1,082 | 9/13/2022 | |
3.3.300 | 1,127 | 9/9/2022 | |
3.3.200 | 1,313 | 8/23/2022 | |
3.3.100 | 1,078 | 8/21/2022 | |
3.2.0 | 2,382 | 6/23/2022 | |
3.1.0 | 1,923 | 3/6/2022 | |
3.0.0 | 2,313 | 2/9/2022 | |
3.0.0-alpha3 | 789 | 2/9/2022 | |
3.0.0-alpha2 | 776 | 2/8/2022 | |
3.0.0-alpha1 | 802 | 2/4/2022 | |
2.0.1 | 29,780 | 9/25/2020 | |
2.0.0 | 18,440 | 12/29/2019 | |
2.0.0-beta15 | 1,420 | 12/27/2019 | |
2.0.0-beta14 | 1,279 | 12/25/2019 | |
2.0.0-beta13 | 1,618 | 12/8/2019 | |
2.0.0-beta12 | 3,732 | 8/2/2019 | |
2.0.0-beta11 | 2,082 | 5/2/2019 | |
2.0.0-beta04 | 1,482 | 5/3/2019 |