Radzen Upload component look and feel not working

Radzen Studio Blazor WebAssembly
1

I'm using the Razden Upload component to enable file upload. The strange thing I noticed is that the control does not look like the one displayed in your demo. This is how it looks now

Screenshot 2022-10-03 at 4.16.03 PM
Screenshot 2022-10-03 at 4.16.03 PM972×790 62.4 KB 

@using Radzen.Blazor
@using Radzen
@page "/"
<PageTitle>Index</PageTitle>
  <RadzenContent>
  <div class="row">
    <div class="col-sm" style="width: 200px; height: 216px">
      <img Style="width: 150px; height: 159px; border-radius: 2px; border: 4px solid #4f4f50" src=@testurl? />
      <RadzenUpload style="border-top: 10px none #4f4f50; border: 10px none #4f4f50; border-radius: 1px; margin: 10px" Url="https://localhost:7077/upload/image" Progress=@(args => OnProgress(args, "Single file upload")) Complete=@OnComplete></RadzenUpload>
    </div>
    <div class="col-sm" style="width: 200px; height: 216px; border: 4px solid #4f4f50; border-radius: 5px">
      abcde
      <div class="row" style="margin: 5px">
     <RadzenLabel Text="abcde" Style="margin: 5px" />
      </div>
    <div class="row" style="margin: 5px">
     <RadzenLabel Text="abcde" Style="margin: 5px" />
      </div>
    <div class="row" style="margin: 5px">
     <RadzenLabel Text="abcde" Style="margin: 5px" />
      </div>
    </div>
    
  </div>
  </RadzenContent>

and in the index file looks like this

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>FCJ-Native</title>
    <base href="/" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="FCJ-Native.Client.styles.css" rel="stylesheet" />
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
</head>

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>

What I'm I doing wrong? Please advice

2

You’ve missed to include desired theme CSS.

3

The Radzen.Blazor.js file is also not included. Check the getting started instructions.

4

@enchev @korchev

Please see the updated index file. Still no luck

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>test</title>
    <base href="/" />
    <link href="_content/Radzen.Blazor/css/material.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
</head>

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
</body>

</html>
5

Check with your browser developer tools if the CSS file loads successfully.

6

There is no _content folder in wwwroot folder .When I copied from another project manually I keep getting conflicting assets with the same target path

7

You should check the Microsoft documentation about static web assets (where the _content folder comes from). In short it is part of the Radzen.Blazor nuget package and is resolved at runtime by the Blazor runtime.