Wangkanai.Responsive 2.0.0

ASP.NET Core Detection

• Wangkanai.Detection
• Wangkanai.Responsive

ASP.NET Core client web browser detection extension to resolve devices, platforms, engine of the client.

ASP.NET Core Responsive middleware for routing base upon request client device detection to specific view

Installation

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

PM> install-package Wangkanai.Detection

Installation of Responsive library will bring in all dependency packages (This will include `Wangkanai.Detection.Device).

PM> install-package Wangkanai.Responsive

Configuration

This library host the component to resolve the access client device type.

Implement of the library into 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.AddDetection();

    // Add framework services.
    services.AddMvc();
}

• AddDetection() Adds the detection services to the services container.

If you would like to add Responsive is configured in the ConfigureServices method also:

public void ConfigureServices(IServiceCollection services)
{
    // Add responsive services.
    services.AddResponsive();

    // Add framework services.
    services.AddMvc();  
}

Or you can customize the responsive

public void ConfigureServices(IServiceCollection services)
{
    // Add responsive services.
    services.AddResponsive(options =>
    {
        options.View.DefaultTablet = DeviceType.Desktop;
        options.View.DefaultMobile = DeviceType.Desktop;
        options.View.DefaultDesktop = DeviceType.Desktop;
    });

    // Add framework services.
    services.AddMvc();  
}

• AddResponsive() Adds the Responsive services to the services container.

  • Suffix Ex *views/[controller]/[action]/index.mobile.cshtml*
  • SubFoler Ex *views/[controller]/[action]/mobile/index.cshtml*

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.

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    app.UseResponsive();

    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });
}

Global Resolver

This library host the component to resolve all the access client related resolver that could resolve.

Example of calling the detection service in the Controller using dependency injection.

public class HomeController : Controller
{
    private readonly IDetection _detection;

    public HomeController(IDetection detection)
    {
        _detection = detection;
    }

    public IActionResult Index()
    {
        return View(_detection);
    }
}

• IDetection is main service for you to access detection service.

When the Detection is pass to the view you can render results like the following example.

@model Wangkanai.Detection.Detection

<h3>UserAgent</h3>
<code>@Model.UserAgent</code>

<h3>Results</h3>

<table>
    <thead>
        <tr>
            <th>Resolver</th>
            <th>Type</th>
            <th>Version</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Device</th>
            <td>@Model.Device?.Type.ToString()</td>
            <td></td>
        </tr>
        <tr>
            <th>Browser</th>
            <td>@Model.Browser?.Type.ToString()</td>
            <td>@Model.Browser?.Version</td>
        </tr>
        <tr>
            <th>Platform</th>
            <td>@Model.Platform?.Type.ToString()</td>
            <td>@Model.Platform?.Version</td>
        </tr>
        <tr>
            <th>Engine</th>
            <td>@Model.Engine?.Type.ToString()</td>
            <td>@Model.Engine?.Version</td>
        </tr>
        <tr>
            <th>Crawler</th>
            <td>@Model.Crawler?.Type.ToString()</td>
            <td>@Model.Crawler?.Version</td>
        </tr>
    </tbody>
</table>