Quick Start

1. Create a new Project - Create a new ASP.NET 5.0 Web App

2. NuGet Packages - Add the following NuGet packages to the project:

   • Tuxboard.Core
   • Microsoft.EntityFrameworkCore.Tools

3. Change your ConnectionString - Point to your new database (in appsettings.json). It's currently set to localhost and a Tuxboard database. Change the database to whatever you want. You also have the option of changing the schema. Name your connection setting "TuxboardConfig"

   {
       "Logging": {
           "LogLevel": {
               "Default": "Information",
               "Microsoft": "Warning",
               "Microsoft.Hosting.Lifetime": "Information"
           }
       },
       "AllowedHosts": "*",
       "TuxboardConfig": {
           "ConnectionString": "Server=localhost;Database=Tuxboard;Trusted_Connection=True;",
           "Schema": "dbo"
       }
   }
   

4. Add the Tuxboard DbContext - We need to specify the Migrations Assembly which is located in our project. In your Startup.cs, add the Tuxboard DbContext to your ConfigureServices method. Replace "WebApplication4" with your main project name.

       public void ConfigureServices(IServiceCollection services)
       {
           var appConfig = new TuxboardConfig();
           
           Configuration
               .GetSection(nameof(TuxboardConfig))
               .Bind(appConfig);
   
           services.AddDbContext<TuxDbContext>(
               options =>
                   options.UseSqlServer(appConfig.ConnectionString,
                       x => x.MigrationsAssembly("WebApplication4")));
   
           services.AddRazorPages();
   
           // For Dependency Injection
           services.AddTransient<IDashboardService, DashboardService>();
           services.AddTransient<ITuxDbContext, TuxDbContext>();
       }
   

5. Create the database

   1. Select the Package Manager Console in Visual Studio.
   2. Type: Add-Migration Initial (if you get an error, add Microsoft.EntityFrameworkCore.Design and Microsoft.EntityFrameworkCore.Tools to the project using NuGet). You should see a Migrations folder after creating your migration.
   3. To update the database, type: Update-Database (this will create the database for you based on the connection string in the appsettings.json). This will create default data for your dashboard.

6. Add the Dashboard to the Index page -

   Index.cshtml.cs

   public class IndexModel : PageModel
   {
       private readonly ILogger<IndexModel> _logger;
   
       private readonly IDashboardService _service;
       private TuxboardConfig _config;
   
       public Dashboard Dashboard { get; set; }
   
       public IndexModel(
           ILogger<IndexModel> logger, 
           IDashboardService service,
           IConfiguration config)
       {
           _logger = logger;
           _service = service;
           config
               .GetSection(nameof(TuxboardConfig))
               .Bind(_config);
       }
   
       public async Task OnGet()
       {
           Dashboard = await _service.GetDashboardAsync(_config);
       }
   }
   

   Index.cshtml (Paste under the existing DIV)

   <section class="dashboard" id="@Model.Dashboard.DashboardId">
       @foreach (var tab in Model.Dashboard.Tabs)
       {
           foreach (var layout in tab.Layouts)
           {
               <div class="dashboard-tab">
   
                   @foreach (var row in layout.LayoutRows.OrderBy(e => e.RowIndex))
                   {
                       <div class="layout-row">
   
                           @foreach (var col in row.GetColumnLayout())
                           {
                               <div class="column @col.ColumnClass">
   
                                   @foreach (var wp in row.WidgetPlacements.Where(y => y.ColumnIndex == col.Index).OrderBy(e => e.WidgetIndex))
                                   {
                                       <!-- Widgets -->
                                       <div class="card @(wp.Collapsed ? "collapsed" : string.Empty)"
                                            @(Html.Raw(wp.Widget.Moveable ? "draggable=\"true\"" : ""))
                                            data-id="@wp.WidgetPlacementId">
   
                                           <div class="card-header">
                                               @wp.GetSettingValueByName("widgettitle")
                                           </div>
   
                                           <div class="card-body">
                                               @await Component.InvokeAsync(wp.Widget.Name, Model)
                                           </div>
   
                                       </div>
                                   }
                               </div>
                           }
                           <div class="clearfix"></div>
                       </div>
                   }
                   <div class="clearfix"></div>
               </div>
           }
       }
   </section>
   

7. Add your Widgets - By default, there are three widgets in the SQL Server dbo.Widgets table: General Info, HelloWorld, and Sample Table. We need to define those in the project. For now, we'll just create the HelloWorld widget.

   • Under Pages/Shared, create a folder called Components
   • Create a HelloWorld folder under Components
   • In the HelloWorld folder, create two files:
     • Default.cshtml
     • HelloWorldViewComponent.cs

   Default.cshtml

   @model Tuxboard.Core.Infrastructure.Models.WidgetModel
   
   <h4>Hello World Widget</h4>
   

   HelloWorldViewComponent.cs

   [ViewComponent(Name="helloworld")]
   public class HelloWorldViewComponent : ViewComponent
   {
       public IViewComponentResult Invoke(WidgetPlacement placement)
       {
           var widgetModel = new WidgetModel {Placement = placement};
           
           return View(widgetModel);
       }
   }
   

8. Run the project.

Notes

• As you can see, the Dashboard section uses Bootstrap's HTML Cards for the Widgets. You can easily use a different CSS framework to match your needs.
• This Quick Start creates a dashboard similar to project StaticDashboard.

Quick Links

• Check the Table of Contents on the right for more information about Tuxboard --------->
• FAQ
• To-Do's