个人中心
gpt4 book ai didi

Bootstrap dropdown doesn't work in Blazor Web Assembly(引导下拉菜单在Blazor Web Assembly中不起作用)

转载 作者：bug小助手 更新时间：2023-10-25 13:45:47 24 4
gpt4 key购买 nike



This is my code

这是我的代码


@page "/items/creer"
@page "/items/modifier/{Id:int}"
@inject IItemService _itemService
@inject IDepartementService _departementService
@inject NavigationManager _navigationManager

@if (IsProcessing)
{
    <div style="position:fixed;top:50%;left:50%;margin-left:-100px;">
        <img src="images/ajax-loader.gif" />
    </div>
}
else
{
    <div class="container mt-5">
        <h3 class="card-title text-primary mb-3 ml-3">@Titre un item</h3>

        <EditForm Model="Item" OnValidSubmit="GererItem">
            <DataAnnotationsValidator />
            <ValidationSummary />
            <div class="form-group mt-3">
                <label>Nom</label>
                <InputText @bind-Value="Item.Nom" class="form-control"></InputText>
                <ValidationMessage For="()=>Item.Nom"></ValidationMessage>
            </div>
            <div class="form-group mt-3">
                <label>Image</label>
                <InputText @bind-Value="Item.Image" class="form-control"></InputText>
                <ValidationMessage For="()=>Item.Image"></ValidationMessage>
                <img src="@Item.Image" class="img-fluid w-25" />
            </div>
            <div class="form-group mt-3">
                <label>Départements</label>
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        @(Item.Departement != null ? Item.Departement.Nom : "Choisir un département...")
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                        @foreach (var departement in Departements)
                        {
                            <button class="dropdown-item" type="button" @onclick="() => SelectDepartement(departement)">@departement.Nom</button>
                        }
                    </div>
                </div>
            </div>
            <div class="mt-3 mb-3">
                <button class="btn btn-primary py-2">@Titre</button>
                <NavLink href="items" class="btn btn-secondary">Retour</NavLink>
            </div>
        </EditForm>
    </div>
}

@code {
    public bool IsProcessing { get; set; } = false;
    public ItemDto Item { get; set; } = new ItemDto
        {
            Id = 0,
            Nom = "",
            Departement = null
        };
    [Parameter]
    public int Id { get; set; }
    private string Titre { get; set; } = "Créer";
    private IEnumerable<DepartementDto> Departements { get; set; } = new List<DepartementDto>();

    private void SelectDepartement(DepartementDto departement)
    {
        Item.Departement = departement;
    }


    protected override async Task OnInitializedAsync()
    {
        IsProcessing = true;
        if (Id != 0)
        {
            Titre = "Modifier";
            Item = await _itemService.Obtenir(Id);
        }
        Departements = await _departementService.ObtenirTous();
        IsProcessing = false;
    }

    private async Task GererItem()
    {
        if (Id == 0)
        {
            await _itemService.Creer(Item);
        }
        else
        {
            await _itemService.Modifier(Item);
        }

        _navigationManager.NavigateTo("items");
    }
}

This is what I imported in Index.html:

这是我在index.html中导入的内容：


<!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>Epicerie_Client</title>
    <base href="/" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="Epicerie_Client.styles.css" rel="stylesheet" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>

<body>
    <div id="app">
        <div id="app" style="position:fixed;top:50%;left:50%;margin-top:-50px;">
            <img src="images/loader.gif" />
        </div>
    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="js/common.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>

My problem is when I get on the page and I click on the dropdown, nothing happen. So I have to refresh the page in order to get the dropdown working... Do you know what I'm doing wrong?

我的问题是，当我进入页面并点击下拉菜单时，什么也没有发生。因此，我必须刷新页面才能使下拉菜单工作…你知道我做错了什么吗？


I do not understand why I have to reload the page in order to get the dropdown list working? I imported the script in my index.html, so I do not understand this bug.

我不明白为什么我必须重新加载页面才能使下拉列表工作？我将脚本导入到我的index.html中，所以我不理解这个错误。


更多回答

This looks like all you need is a simple select using InputSelect. Are you trying to select multiple departments of just one?

看起来您所需要的只是使用InputSelect进行简单的选择。您是否正在尝试选择一个部门中的多个部门？

优秀答案推荐
更多回答

24 4 0
文章推荐： add sonarqube to jenkings without add dependency in build.gradle and do that with commandline(在不增加build.gradle依赖的情况下向Jenking添加Sonarqube，并使用命令行完成该操作)
文章推荐： R2DBC and Transient fields(R2DBC和瞬变场)
文章推荐： Is there a way to see all the AGE created tables?(有没有办法查看所有陈年制作的表格？)
文章推荐： how to order by multiple columns in supabase?(如何在上库中按多列排序？)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com