I am using bootstrap tab in .net 8 blazor web app to render component.

Question

I am using bootstrap tab in .net 8 blazor web app to render component.

Kuldeep Y 41

@page "/QSSManagement"

@using TCSManagement.Shared.Model

@using TCSManagement.Shared.Model.QSSManagementModels

@inject HttpClient Http

@inject IJSRuntime _jsRuntime;

@inject NavigationManager UriHelper

@inject Blazored.SessionStorage.ISessionStorageService session

<Authorized>

    <div class="content">

        <div class="container-fluid">

            <PageTitle>TCSManagement</PageTitle>

            <div class="content-header">

                <div class="container-fluid">

                    <div class="row mb-2">

                        <div class="col-sm-6">

                            <h1 class="m-0">QSS Management</h1>

                        </div>

                        <div class="col-sm-6">

                            <ol class="breadcrumb float-sm-right">

                                <li class="breadcrumb-item"><a href="/">Home</a></li>

                                <li class="breadcrumb-item active">QSS Management</li>

                            </ol>

                        </div>

                    </div>

                </div>

            </div>

            <div class="card">

                <div class="card-body">

                    @if (ShowexportLoading == true)

                    {

                        <div class="overlayspin" id="loadingOverlay">

                            <!-- Spinner -->

                            <div class="spinner"></div>

                            <p class="loading-text">Please wait Export in Progress....</p>

                        </div>

                    }

                    <ul class="nav nav-tabs">

                        <li class="nav-item">

                            <a class="nav-link active compActive" data-toggle="tab" data-id="0" href="#company">Company</a>

                        </li>

                        <li class="nav-item">

                            <a class="nav-link fabactive" id="idFactory" data-toggle="tab" data-id="1" href="#factory" @onclick="@(()=> Getallfactorydata())">Factory</a>

                        </li>

                        <li class="nav-item">

                            <a class="nav-link" id="idSection" data-toggle="tab" data-id="2" href="#section" @onclick="@(()=>  Getallsectionsdata())">Section</a>

                        </li>

                        <li class="nav-item">

                            <a class="nav-link" id="idTool" data-toggle="tab" data-id="3" href="#tool" @onclick="@(()=>  Getalltoolsdata())">Tool</a>

                        </li>

                        <li class="nav-item">

                            <a class="nav-link" id="idChamber" data-toggle="tab" data-id="4" href="#chamber" @onclick="@(()=> Getallchambersdata())">Chamber</a>

                        </li>

                        <li class="nav-item">

                            <a class="nav-link" id="idDevice" data-toggle="tab" data-id="5" href="#device" @onclick="@(() => Getalldevicesdata())">Device</a>

                        </li>

                        <li class="nav-item">

                            <a class="nav-link" data-toggle="tab" data-id="6" href="#ipconfiguration" @onclick="@(() => Getallipaddressesdata("null"))">Ipconfiguration</a>

                        </li>

                        <li class="nav-item">

                            <a class="nav-link" id="idAddress" data-toggle="tab" data-id="7" href="#address" @onclick="@(() => Getalladdresses("null"))">Address</a>

                        </li>

                        <li class="nav-item">

                            <a class="nav-link" data-toggle="tab" data-id="8" href="#tooltype" @onclick="@(() => Getalltooltypes("null"))">Tool Type</a>

                        </li>

                        <li class="nav-item">

                            <a class="nav-link" id="idContact" data-toggle="tab" data-id="9" href="#contact" @onclick="@(() => Getallcontacts("null"))">Contact</a>

                        </li>

                        <li class="nav-item">

                            <a class="nav-link" data-toggle="tab" data-id="10" href="#collector" @onclick="@(() => Getallcollector("null"))">Collector</a>

                        </li>

                        &nbsp;&nbsp;

                        <a id="ExportCSV" style="float:right;margin-top:5px" @onclick="@(() => ExporttoCSV())"><img src="./images/CsvImage.jpg" style="width:32px; height:32px" /></a>

                        &nbsp;&nbsp;

                        <li class="nav-item">

                            <a class="nav-link" data-toggle="tab" data-id="11" href="#qssorder" @onclick="@(() => GetQssOrdersDetails())">Qss Orders</a>

                        </li>

                        <li class="nav-item">

                            <a class="nav-link" data-toggle="tab" data-id="12" href="#specsheet">Spec Sheets</a>

                        </li>

                    </ul>

                   

                    <div class="tab-content">

                        <div class="tab-pane active compActive" id="company">

                            <br />

                            <CompanyTab CompName="ClickHandlerCompany" CompDrdUpdate="ClickHandlerCompanyDRD" />

                        </div>

                        <div class="tab-pane" id="factory">

                            <br />

                            <FactoryTab factorydata="@factorydata" ShowHideSpinner="@ShowHideSpinner" companydata="@companydata" ExportComIDFabName="ClickHandlerfabData" />

                        </div>

                        <div class="tab-pane" id="section">

                            <br />

                            <SectionTab sectiondata="@sectiondata" ShowHideSpinner="@ShowHideSpinner" companydata="@companydata" Export_SecName_ComId_fabId="ClickHandlerSecData" />

                        </div>

                        <div class="tab-pane" id="tool">

                            <br />

                            <ToolTab toolsdata="@toolsdata" ShowHideSpinner="@ShowHideSpinner" companydata="@companydata" Export_ToolName_QsssecId_ComId_fabId="ClickHandlerToolData" />

                        </div>

                        <div class="tab-pane" id="chamber">

                            <br />

                            <ChamberTab chamberdetails="@chamberdetails" ShowHideSpinner="@ShowHideSpinner" companydata="@companydata" Export_ChambName_Qsstooid_QsssecId_ComId_fabId="ClickHandlerChamData" />

                        </div>

                        <div class="tab-pane" id="device">

                            <br />

                            <DeviceTab devicesdetails="@devicesdetails" ShowHideSpinner="@ShowHideSpinner" companydata="@companydata" Export_DeviceName_chambId_Qsstooid_QsssecId_ComId_fabId="ClickHandlerDeviceData" />

                        </div>

                        <div class="tab-pane" id="ipconfiguration">

                            <br />

                            <IPConfigurationTab ipaddressesdetails="@ipaddressesdetails" ShowHideSpinner="@ShowHideSpinner" IpNameExport="ClickHandlerIpAddress" />

                        </div>

                        <div class="tab-pane" id="address">

                            <br />

                            <AddressTab addressesdetails="@addressesdetails" ShowHideSpinner="@ShowHideSpinner" />

                        </div>

                        <div class="tab-pane" id="tooltype">

                            <br />

                            <ToolTypeTab tooltypesdetails="@tooltypesdetails" ShowHideSpinner="@ShowHideSpinner" />

                        </div>

                        <div class="tab-pane" id="contact">

                            <br />

                            <ContactTab contactsdetails="@contactsdetails" ShowHideSpinner="@ShowHideSpinner" />

                        </div>

                        <div class="tab-pane" id="collector">

                            <br />

                            <CollectorTab collectorsdetails="@collectorsdetails" ShowHideSpinner="@ShowHideSpinner" CollectorNameExport="ClickHandlerCollectorData" />

                        </div>

                        <div class="tab-pane" id="qssorder">

                            <br />

                            <QssOrders ShowHideSpinner="@ShowHideSpinner" qssOrdersdata="@qssOrdersdata" />

                        </div>

                        <div class="tab-pane" id="specsheet">

                            <br />

                            <SpecSheetTab specsheetdata="@specsheetdata" />

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</Authorized>

<NotAuthorized>

    <div class="login-status"><h1 style="color:red;position: absolute;left: 50%;top: 50%;">You Are Not Logged in .....</h1></div>

</NotAuthorized>

</AuthorizeView>

Above code i am using for navigate between the tabs in .net 8 blazor web app but instead of activating and render the component it just changing the url with 'href' property how i can fix this, please guide me.
Note -: above code is working in .net 7 blazor application.

Anonymous

2024-03-27T12:33:28.8333333+00:00

Hi @Kuldeep Y , according to the code snippet and your description, it looks like you are writing an Authorize View which has some differences between .net 7 and .net 8, since you mentioned the code worked well in .net 7, could you please follow this section to see whether you've changed all the required part for the migration, especially the render mode, root path and AddCascadingAuthenticationState?
AgaveJoe 30,126 Reputation points

2024-03-27T12:39:57.8233333+00:00

There are fundamental changes in .NET 8 Blazor. One the one thing that seems to come up when folks migrate to 8 is the not using the correct rendering mode. The rendering mode is based on Server Side (SSR) and Client Side (CSR) perspectives and coding patterns related to each. It is not clear what type of .NET 7 Blazor you migrated from and what kind of .NET 8 Blazor application you migrated to. So it is difficult to guess what's wrong at this point.

I recommend reading the reference documentation to make sure you are aware of the changes. Also, see the NET 7 Blazor to NET 8 Blazor migration guide.

https://learn.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-8.0?view=aspnetcore-8.0#blazor

https://learn.microsoft.com/en-us/aspnet/core/migration/70-80?view=aspnetcore-8.0&tabs=visual-studio#blazor
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Kuldeep Y 41 Reputation points

2024-04-04T07:23:20.5966667+00:00

Okay will check my code and render mode

1 answer

Your answer

Anonymous

2024-03-27T12:33:28.8333333+00:00

Hi @Kuldeep Y , according to the code snippet and your description, it looks like you are writing an Authorize View which has some differences between .net 7 and .net 8, since you mentioned the code worked well in .net 7, could you please follow this section to see whether you've changed all the required part for the migration, especially the render mode, root path and AddCascadingAuthenticationState?
AgaveJoe 30,126 Reputation points

2024-03-27T12:39:57.8233333+00:00

There are fundamental changes in .NET 8 Blazor. One the one thing that seems to come up when folks migrate to 8 is the not using the correct rendering mode. The rendering mode is based on Server Side (SSR) and Client Side (CSR) perspectives and coding patterns related to each. It is not clear what type of .NET 7 Blazor you migrated from and what kind of .NET 8 Blazor application you migrated to. So it is difficult to guess what's wrong at this point.

I recommend reading the reference documentation to make sure you are aware of the changes. Also, see the NET 7 Blazor to NET 8 Blazor migration guide.

https://learn.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-8.0?view=aspnetcore-8.0#blazor

https://learn.microsoft.com/en-us/aspnet/core/migration/70-80?view=aspnetcore-8.0&tabs=visual-studio#blazor
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Kuldeep Y 41 Reputation points

2024-04-04T07:23:20.5966667+00:00

Okay will check my code and render mode

Answer 1

Bruce (SqlWork.com) 77,686 Volunteer Moderator

your code is using hash navigation with onclick() handlers. the onclick event fires, then the navigation. blazor is expecting the hash target to be a component. as c# onclick handlers are async, they can not cancel navigation like javascript ones.

note: care must be used with bootstrap as it can change the dom with blazor knowing and blazer can overwrite bootstrap dom changes. you should avoid using any bootstrap javascript components. CSS ones are fine.

Kuldeep Y 41 Reputation points

2024-04-11T11:17:30.73+00:00

I have removed the Bootstrap JS but it is not working.
Bruce (SqlWork.com) 77,686 Reputation points Volunteer Moderator

2024-04-11T21:32:01.4366667+00:00

you need to change the hash navigation to page navigation.

https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-8.0

Share via

I am using bootstrap tab in .net 8 blazor web app to render component.

1 answer

Your answer