0

Hello I am actually generating a html file from cshtml template for reporting purpose. The issue is when i use cdn link for bootstrap in the cshtml file the html rendered got all the css i designed but when using a local access of bootstrap it the style is not rendered at all its also the same thing when trying to render images from local file. Here is the code for generating the html file:

var httpContex = new DefaultHttpContext
            {
                RequestServices=_serviceProvider
            };
            var actionContext = new ActionContext(httpContex, new RouteData(), new ActionDescriptor());
            await using var outputWriter = new StringWriter();
            var viewResutl = _viewEngine.FindView(actionContext, templateFileName, false);
            var viewDictionnary = new ViewDataDictionary<TViewModel>(new EmptyModelMetadataProvider(), new ModelStateDictionary())
            {
                Model = viewModel
            };
            var tempDataDictionnary = new TempDataDictionary(httpContex, _tempDataProvider);
            if (!viewResutl.Success)
            {
                throw new KeyNotFoundException($"could not render the HTML,because {templateFileName} template does not exist");
            }
            try
            {
                var viewContext = new ViewContext(actionContext, viewResutl.View, viewDictionnary, tempDataDictionnary, outputWriter, new HtmlHelperOptions());
                await viewResutl.View.RenderAsync(viewContext);
                return outputWriter.ToString();
            }
            catch(Exception ex)
            {
                _logger.LogError(ex, "Could not render the HTML because of an error");
                return string.Empty;
            }

Here is part of the cshtml file :

@model XXXXXReporter.ViewModels.XXXXXModel
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>@Model.title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="~/StaticFiles/bootstrap.min.css"/>
</head>
<body style="min-height:100vh">
    <div class="container-fluid" >
        <div class="row">
            <div class="col">
                <h2 class="text-center">XXXX Advanced Reporting System</h2>
            </div>
            <div class="col">
                <img src="~/XXXXlogo.png" alt="ANY IMAGE" />
            </div>
            
        </div >
        <div class="row border border-info border-2 rounded bg-info" style="margin-top: 200px;">
            <h3 class="text-center text-white">General Availabilty And Sensor Status[PRTG]</h3>
        </div>
        <div class="row " style="margin-top: 200px;">
            <p>Period Time:<span>All Period</span></p>
            <p>Report By:<span>XXXX</span></p>
            <p>Creation Date:<span>@DateTime.Now</span></p>
            
        </div>
        <div class="row" style="margin-top: 430px;">
            
                    @foreach (var elem in Model.panelList)
                    {
                        
                                @Html.Raw(elem)
                         
                    }
               
        
    </div>
</body>
</html>

This line of code <link rel="stylesheet" href="~/StaticFiles/bootstrap.min.css"/> is never generated when the html is rendered (by commenting the cdn link above it) The project is a .net Core Web API i have overiden the use of static file using this code in startup.cs:

app.UseStaticFiles(new StaticFileOptions
            {
                FileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, @"StaticFiles")),
                RequestPath = "/StaticFiles"
            });

As stated in my previous question bootstrap and css not working with .net core api i think the problem is with the way razor render the html. Is there a way to make it render the static file I pass in the cshtml file?or is there a correct way to generate html from a template using .net core API? Regards,

  • Does what you said `is never generated when the html is rendered` means when you using f12 to see the elements of your page, there's no `` in it? https://i.stack.imgur.com/cuATA.png – Tiny Wang Sep 06 '21 at 02:43
  • You mean your css file has successfully set to html file, but the style content doesn't work right? So, if the css file has loaded? I mean if the route for this file is correct. Here I changed my file name so I met 404 error and this lead the style missing. https://i.stack.imgur.com/QiT2I.png – Tiny Wang Sep 06 '21 at 08:36
  • @TinyWang `````` is present in the HTML code when you press F12 but when you look under the styles tab there is no css there like it will normaly do. Here is what it shows when i click an element (without the cdn): [Imgur](https://i.imgur.com/xbBahOA.png) and here is what it shows with cdn: [Imgur](https://i.imgur.com/xj0uqdh.png) – Harimanda Jerrys Randriamire Sep 06 '21 at 08:41
  • Hi, thanks for your effort, and according to your screenshot, it seems that when you using the local css file, there's no classes like `.bg-info` etc. but when using cdn, these css settings are contained. So could you pls create a new file such as temp.css and copy data from the response of cdn, and change your `href="~/StaticFiles/bootstrap.min.css"` to the newly created file? https://i.stack.imgur.com/hUbPb.png – Tiny Wang Sep 06 '21 at 08:57
  • Or copy the response and cover your local `~/StaticFiles/bootstrap.min.css` file. Because I think your local css file may be lack of classes. – Tiny Wang Sep 06 '21 at 09:01
  • @TinyWang for more information i looked under the network tab and it doest even show 404 but a failed response [cssFailed](https://i.imgur.com/ouqIpFY.png) – Harimanda Jerrys Randriamire Sep 06 '21 at 09:09
  • It worked in my side when I create a folder under the root folder and copy my css file to under the created folder. And I used your configurations in startup.cs, the code to add css file as well. Could you pls check the url of loading your css file? https://i.stack.imgur.com/tVZ15.png For me, it's `https://localhost:44389/StaticFiles/bootstrap.min.css` – Tiny Wang Sep 06 '21 at 09:24
  • @TinyWang requesting the bootstrap via the url return 200 sucess [direct bootstrap access](https://i.imgur.com/Let1nQT.png) – Harimanda Jerrys Randriamire Sep 06 '21 at 10:06
  • @TinyWang i may have missed it but i am building it in WEB API not WEB APP – Harimanda Jerrys Randriamire Sep 06 '21 at 10:08

1 Answers1

0

Thanks for all your answer. It was caused by puppeteersharp who was unable to serve the static file. For the CSS i am using await page.AddStyleTagAsync(new AddTagOptions { Path = "StaticFiles/bootstrap.min.css" }); to inject the css to the page. For the static image I am encoding it to base64 to make it displayable from there.