Share via

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

Kuldeep Y 36 Reputation points
2024-03-27T10:27:36.8166667+00:00

@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

<AuthorizeView>

<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.

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,231 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,413 questions

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Bruce (SqlWork.com) 57,646 Reputation points
    2024-04-04T16:27:33.11+00:00

    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.