Blazor Server Login Page - different appearance on Server

Cenk 1,021 Reputation points
2022-09-27T13:04:26.647+00:00

Hi there,

I deployed my Blazor Server app on Windows 10 Pro. I realized that the Login page layout is quite different. There is no problem with the appearance of other pages. I couldn't understand why, I will be glad if you help.

Here is Login screenshot on the server:
245153-login-server.png

Here is how Login displays on my development PC:
245143-resim.png

Here is the Login.cshtml:

@page  
  
@using Microsoft.AspNetCore.Authorization  
@using Microsoft.AspNetCore.Mvc.TagHelpers  
@using IMS.WebApp.Shared  
@model LoginModel  
@attribute [AllowAnonymous]  
  
@{  
    Layout = "/Pages/Shared/_EmptyLayout.cshtml";  
}  
@{  
    ViewData["Title"] = "Log in";  
}  
  
<main class="form-signin">  
    <form id="account" method="post">  
          
        <img class="mb-4" src="~/css/images/logo.png" alt="" width="300" height="180" style="display: flex; align-items: center; justify-content: center;">  
          
        <h1 class="h3 mb-3 fw-normal" style="align-items: center; text-align: center;">Please sign in</h1>  
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>  
        <div class="form-floating">  
            <input asp-for="Input.Email" class="form-control" autocomplete="username" aria-required="true"/>  
            <label asp-for="Input.Email" class="form-label"></label>  
            <span asp-validation-for="Input.Email" class="text-danger"></span>  
            @*<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">  
            <label for="floatingInput">Email address</label>*@  
        </div>  
        <div class="form-floating">  
            <input asp-for="Input.Password" class="form-control" autocomplete="current-password" aria-required="true"/>  
            <label asp-for="Input.Password" class="form-label"></label>  
            <span asp-validation-for="Input.Password" class="text-danger"></span>  
            @*<input type="password" class="form-control" id="floatingPassword" placeholder="Password">  
            <label for="floatingPassword">Password</label>*@  
        </div>  
  
        <div class="col-md-12 text-center">  
            <button id="login-submit" class="w-50 btn btn-lg btn-primary" type="submit">Sign in</button>  
        </div>  
        <p class="mt-5 mb-3 text-muted" style="align-items: center; text-align: center;">© 2022</p>  
    </form>  
</main>  
  
  
@section Scripts {  
    <partial name="_ValidationScriptsPartial" />  
}  

Here is _EmptyLayout.cshtml:

@using Microsoft.AspNetCore.Hosting  
@using Microsoft.AspNetCore.Mvc.ViewEngines  
@inject IWebHostEnvironment Environment  
@inject ICompositeViewEngine Engine  
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
    <title>@ViewData["Title"] - Vorlance</title>  
  
    <environment include="Development">  
        <link rel="stylesheet" href="~/Identity/lib/bootstrap/dist/css/bootstrap.css" />  
        @*<link rel="stylesheet" href="~/Identity/css/site.css" />*@  
        <link href="~/css/signin.css" rel="stylesheet" />  
    </environment>  
    <environment exclude="Development">  
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"  
              integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"  
              asp-fallback-href="~/Identity/lib/bootstrap/dist/css/bootstrap.min.css"  
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />  
        <link rel="stylesheet" href="~/Identity/css/site.css" asp-append-version="true" />  
    </environment>  
</head>  
<body>  
      
    <div class="container">  
        <partial name="_CookieConsentPartial" optional />  
        <main role="main" class="pb-1">  
            @RenderBody()  
        </main>  
    </div>  
      
  
    <environment include="Development">  
        <script src="~/Identity/lib/jquery/dist/jquery.js"></script>  
        <script src="~/Identity/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>  
        <script src="~/Identity/js/site.js" asp-append-version="true"></script>  
    </environment>  
    <environment exclude="Development">  
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"  
                asp-fallback-src="~/Identity/lib/jquery/dist/jquery.min.js"  
                asp-fallback-test="window.jQuery"  
                crossorigin="anonymous"  
                integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2">  
        </script>  
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"  
                asp-fallback-src="~/Identity/lib/bootstrap/dist/js/bootstrap.bundle.min.js"  
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"  
                crossorigin="anonymous"  
                integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj">  
        </script>  
        <script src="~/Identity/js/site.js" asp-append-version="true"></script>  
    </environment>  
  
    @await RenderSectionAsync("Scripts", required: false)  
</body>  
</html>  
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,591 questions
0 comments No comments
{count} votes

Accepted answer
  1. Zhi Lv - MSFT 32,356 Reputation points Microsoft Vendor
    2022-09-28T07:39:51.067+00:00

    Hi @Cenk ,

    The issue might relate the <environment> tag in the _EmptyLayout page.

    The Environment Tag Helper conditionally renders its enclosed content based on the current hosting environment. include & exclude attributes control rendering the enclosed content based on the included or excluded hosting environment names.

    Code like this:

    <environment include="Development">  
        <strong>IWebHostEnvironment.EnvironmentName is Development</strong>  
    </environment>  
    
    <environment exclude="Development">  
        <strong>IWebHostEnvironment.EnvironmentName is not Development</strong>  
    </environment>  
    

    More detail information, see Environment Tag Helper in ASP.NET Core.


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best regards,
    Dillion


2 additional answers

Sort by: Most helpful
  1. Bruce (SqlWork.com) 66,056 Reputation points
    2022-09-27T14:59:49.167+00:00

    To the browsers dev tools to determine the difference. Maybe a css file did not load, or the window size makes a difference.


  2. Cenk 1,021 Reputation points
    2022-09-28T06:38:19.227+00:00

    @Zhi Lv - MSFT I saw that you helped before in this post (asp-net-core-embedded-resource-microsoft-identity-is-not-found-when-environm) but I couldn't find it on the Program.cs. Would you please guide me?

    Program.cs

    using IMS.Plugins.EFCore;  
    using IMS.UseCases;  
    using IMS.UseCases.Activities;  
    using IMS.UseCases.Customers;  
    using IMS.UseCases.Interfaces;  
    using IMS.UseCases.Inventories;  
    using IMS.UseCases.PluginInterfaces;  
    using IMS.USeCases.PluginInterfaces;  
    using IMS.UseCases.Products;  
    using IMS.UseCases.Reports;  
    using IMS.UseCases.Validations;  
    using IMS.UseCases.Vendors;  
    using IMS.WebApp.Areas.Identity;  
    using IMS.WebApp.Data;  
    using Microsoft.AspNetCore.Components.Authorization;  
    using Microsoft.AspNetCore.Identity;  
    using Microsoft.EntityFrameworkCore;  
    using IMS.UseCases.Interfaces.Customer;  
    using IMS.UseCases.Interfaces.Order;  
    using IMS.UseCases.Interfaces.OrderDetail;  
    using IMS.UseCases.Interfaces.Vendor;  
    using IMS.UseCases.OrderDetails;  
    using IMS.UseCases.Orders;  
    using Microsoft.Extensions.DependencyInjection.Extensions;  
    using NLog.Web;  
    using Radzen;  
      
      
    var builder = WebApplication.CreateBuilder(args);  
      
    // Add services to the container.  
    var connectionString = builder.Configuration.GetConnectionString("InventoryManagement");  
    builder.Services.AddDbContext<ApplicationDbContext>(options =>  
        options.UseSqlServer(connectionString));  
    builder.Services.AddDatabaseDeveloperPageExceptionFilter();  
    builder.Services.AddDefaultIdentity<IdentityUser>(options => options.SignIn.RequireConfirmedAccount = false)  
        .AddRoles<IdentityRole>()  
        .AddEntityFrameworkStores<ApplicationDbContext>();  
    builder.Services.AddRazorPages();  
    builder.Services.AddServerSideBlazor();  
    builder.Services.AddScoped<AuthenticationStateProvider, RevalidatingIdentityAuthenticationStateProvider<IdentityUser>>();  
    builder.Services.AddSingleton<WeatherForecastService>();  
      
    builder.Services.AddDbContextFactory<IMSContext>(options =>  
        {  
            options.UseSqlServer(builder.Configuration.GetConnectionString("InventoryManagement"));  
        }  
    );  
    //Radzen DialogService  
    builder.Services.AddScoped<DialogService>();  
    //DI Repo  
    builder.Services.AddTransient<IInventoryRepository, InventoryRepository>();  
    builder.Services.AddTransient<IProductRepository, ProductRepository>();  
    builder.Services.AddTransient<IInventoryTransactionRepository, InventoryTransactionRepository>();  
    builder.Services.AddTransient<IProductTransactionRepository, ProductTransactionRepository>();  
    builder.Services.AddTransient<IOrderDetailRepository, OrderDetailRepository>();  
      
    //vendors  
    builder.Services.AddTransient<IVendorRepository, VendorRepository>();  
    //Customers  
    builder.Services.AddTransient<ICustomerRepository, CustomerRepository>();  
    //Order  
    builder.Services.AddTransient<IOrderRepository, OrderRepository>();  
    //DI Use cases  
    builder.Services.AddTransient<IViewInventoriesByNameUseCase, ViewInventoriesByNameUseCase>();  
    builder.Services.AddTransient<IAddInventoryUseCase, AddInventoryUseCase>();  
    builder.Services.AddTransient<IEditInventoryUseCase, EditInventoryUseCase>();  
    builder.Services.AddTransient<IViewInventoryByIdUseCase, ViewInventoryByIdUseCase>();  
    builder.Services.AddTransient<IViewProductsByNameUseCase, ViewProductsByNameUseCase>();  
    builder.Services.AddTransient<IAddProductUseCase, AddProductUseCase>();  
    builder.Services.AddTransient<IViewProductByIdUseCase, ViewProductByIdUseCase>();  
    builder.Services.AddTransient<IEditProductUseCase, EditProductUseCase>();  
    builder.Services.AddTransient<IDeleteProductUseCase, DeleteProductUseCase>();  
    builder.Services.AddTransient<IPurchaseInventoryUseCase, PurchaseInventoryUseCase>();  
    builder.Services  
        .AddTransient<IValidateEnoughInventoriesForproducingUseCase, ValidateEnoughInventoriesForproducingUseCase>();  
    builder.Services.AddTransient<IProduceProductUsecase, ProduceProductUsecase>();  
    builder.Services.AddTransient<ISellProductUseCase, SellProductUseCase>();  
    builder.Services.AddTransient<ISearchInventoryTransactionsUseCase, SearchInventoryTransactionsUseCase>();  
    builder.Services.AddTransient<ISearchProductTransactionsUseCase, SearchProductTransactionsUseCase>();  
    //vendors  
    builder.Services.AddTransient<IViewVendorsByNameUseCase, ViewVendorsByNameUseCase>();  
    builder.Services.AddTransient<IAddVendorUseCase, AddVendorUseCase>();  
    builder.Services.AddTransient<IEditVendorUseCase, EditVendorUseCase>();  
    builder.Services.AddTransient<IViewVendorByIdUseCase, ViewVendorByIdUseCase>();  
    builder.Services.AddTransient<IViewAllVendorsUseCase, ViewAllVendorsUseCase>();  
    //customers  
    builder.Services.AddTransient<IAddCustomerUseCase, AddCustomerUseCase>();  
    builder.Services.AddTransient<IEditCustomerUseCase, EditCustomerUseCase>();  
    builder.Services.AddTransient<IViewCustomerByIdUseCase, ViewCustomerByIdUseCase>();  
    builder.Services.AddTransient<IViewCustomersByNameUseCase, ViewCustomersByNameUseCase>();  
    builder.Services.AddTransient<IViewAllCustomersUseCase, ViewAllCustomersUseCase>();  
    //orders  
    builder.Services.AddTransient<IAddOrderUseCase, AddOrderUseCase>();  
    builder.Services.AddTransient<IEditOrderUseCase, EditOrderUseCase>();  
    builder.Services.AddTransient<IViewOrderByIdUseCase, ViewOrderByIdUseCase>();  
    builder.Services.AddTransient<IViewOrdersByCustomerNameUseCase, ViewOrdersByCustomerNameUseCase>();  
    builder.Services.AddTransient<IViewAllOrdersUseCase, ViewAllOrdersUseCase>();  
    builder.Services.AddTransient<IAddOrderListUseCase, AddOrderListUseCase>();  
    builder.Services.AddTransient<IViewOrdersByStatusUseCase, ViewOrdersByStatusUseCase>();  
    builder.Services.AddTransient<ICancelOrderUseCase, CancelOrderUseCase>();  
    builder.Services.AddTransient<IAnnualStatusViewModel, AnnualStatusViewModel>();  
    builder.Services.AddTransient<IGetOrdersExportUseCase, GetOrdersExportUseCase>();  
    //order details  
    builder.Services.AddTransient<IAddOrderDetailUseCase, AddOrderDetailUseCase>();  
    builder.Services.AddTransient<IEditOrderDetailUseCase, EditOrderDetailUseCase>();  
    builder.Services.AddTransient<ICancelOrderDetailUseCase, CancelOrderDetailUseCase>();  
    builder.Services.AddTransient<IViewOrderDetailsByOrderIdUseCase, ViewOrderDetailsByOrderIdUseCase>();  
    builder.Services.AddTransient<IPassiveOrderDetailUseCase, PassiveOrderDetailUseCase>();  
    builder.Services.AddTransient<IDeleteOrderDetailByIdUseCase, DeleteOrderDetailByIdUseCase>();  
      
    //logging  
    builder.Logging.ClearProviders();  
    builder.Logging.AddConsole();  
    builder.Host.UseNLog();  
      
    //Aspnetcore_Environment  
    builder.WebHost.UseWebRoot("wwwroot");  
    builder.WebHost.UseStaticWebAssets();  
      
    var app = builder.Build();  
      
    var scope = app.Services.CreateScope();  
    var imsContext = scope.ServiceProvider.GetRequiredService<IMSContext>();  
    //imsContext.Database.EnsureDeleted();  
    //imsContext.Database.EnsureCreated();  
      
    // Configure the HTTP request pipeline.  
    if (app.Environment.IsDevelopment())  
    {  
        app.UseMigrationsEndPoint();  
    }  
    else  
    {  
        app.UseExceptionHandler("/Error");  
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.  
        app.UseHsts();  
    }  
      
    app.UseHttpsRedirection();  
      
    app.UseStaticFiles();  
      
    app.UseRouting();  
      
    app.UseAuthentication();  
    app.UseAuthorization();  
      
    app.MapControllers();  
    app.MapBlazorHub();  
    app.MapFallbackToPage("/_Host");  
      
    app.Run();  
    

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.