Bootstrap model not working blazer server side ?

Ahmed Abd El Aziz 315 Reputation points
2023-07-19T20:14:15.26+00:00

I work on asp.net core blazer server side app . i face issue bootstrap model not open on all project pages

although it bootstrap model open from 2 days without change any thing

I use cdn and not use local version bootstrap as

so How to install bootstrap locally and how to use it and which place i will put bootstrap

and what reference for bootstrap modal

cdn not open on my country this is prevented from isp

so How to use local bootstrap version and which place i will use

are there are another scripts required for open bootstrap model

when publish my app on another country so cdn is opened and bootstrap model working

but on my local network or country not working because cdn not work

please help me

_host file

<head>

   

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>UC.AppRepository.UI</title>

    <base href="~/" />





    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">

</head>

screen shoot from issue on network tab

issue bootstrap

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,779 questions
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,664 questions
0 comments No comments
{count} votes

2 answers

Sort by: Most helpful
  1. Bruce (SqlWork.com) 71,506 Reputation points
    2023-07-19T22:29:53.24+00:00

    the default blazor server template comes with the bootstrap CSS installed in wwwroot. Your CSS load errors appear to due to your wwwroot not being correct. You appear to have multiple loads of bootstrap and your site.css is not found.

    You should not install or use the Bootstrap javascript file as it is not supported with virtual dom technologies like Blazor or react.

    this means several of the bootstrap components will not work without writing Blazor support code.

    for a Modal, your blazor code should add and remove the bootstrap classes to show and hide a modal. you will need to add blazer click handlers for the buttons and close icon if rendered.

    there is really not a lot of need for jQuery with a blazor project either.

    as you appear to be using Radzen controls, why bootstrap?

    0 comments No comments

  2. Chen Li - MSFT 1,221 Reputation points
    2023-07-20T03:12:54.7366667+00:00

    Hi @Ahmed Abd El Aziz,

    If the online reference doesn't work, you can download the Bootstrap library into your project.

    Right click the "wwwroot" folder, click "Add" =>"Client-Side Library...", then in the popup window select the Bootstrap library and set the target location, after that click the "Install" button.

    User's image

    Then, you can add find the bootstrap reference file in the target location and add the script reference in the _Host.cshtml page like this:

    <link href="~/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="~/lib/bootstrap/js/bootstrap.min.js"></script>
    

    In addition, the official website of Bootstrap also provides many download methods, you can refer to it.


    If the answer is helpful, please click "Accept Answer" and upvote it.

    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,

    Chen Li

    0 comments No comments

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.