Modal pop up not showing in ASP.NET Core 5

Question

I am working on an ASP.NET Core 5 MVC application, and i'm trying to display a bootstrap modal popup. I used the code below:

Index.cshtml:

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#addEmp">
    Ajouter
</button>
<table class="table table-bordered table-hover text-center">
    ...
</table>

_EmployeePartialView.cshtml:

@model Employee

<div class="modal fade" id="addEmp" aria-labelledby="addEmpLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addEmpLabel">Employee</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">                    
                        <form asp-action="Create">
                            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                            <div class="form-group">
                                <label asp-for="Name" class="control-label"></label>
                                <input asp-for="Name" class="form-control" />
                                <span asp-validation-for="Name" class="text-danger"></span>
                            </div>
                            <div class="form-group">
                                <label asp-for="Profession" class="control-label"></label>
                                <input asp-for="Profession" class="form-control" />
                                <span asp-validation-for="Profession" class="text-danger"></span>
                            </div>
                        </form>
                   
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>

        </div>
    </div>
</div>

EmployeeController:

public IActionResult Index()
    {
        List<Employee> emp = _dbcontext.Employees.ToList();
        return View(emp);
    }

    [HttpGet]
    public IActionResult Create()
    {
        Employee emp = new Employee();
        return PartialView("_EmployeePartialView", emp);
    }

But when i click on the button the modal popup is not showing without any errors. any suggestions??

Answer 1

1.Please firstly check if the partial view correctly load to your html page. You can F12 and check the Elements panel in browser.

2.Then please check your bootstrap version,because if you use Bootstrap v 5.0, it used data-bs-target instead of data-target.

3.Be sure the partial view locates in Views/Shared/ or Views/Employee/ folder.

Not sure how do you render the partial view, below I share two ways to render the partial view.

Use html helper to display the partial view:

@model List<Employee>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#addEmp">
    Ajouter
</button>
<table class="table table-bordered table-hover text-center">
     //...
</table>

@await Html.PartialAsync("_EmployeePartialView", new Employee())

Use ajax to call Create action to display the partial view:

@model List<Employee>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#addEmp">
    Ajouter
</button>
<table class="table table-bordered table-hover text-center">
</table>
<div id="display">

</div>
@section Scripts
{
    <script>
        $(function(){
            $.ajax({
                type: "get",
                url: "/Employee/Create",
                success: function (data) {
                    $("#display").html(data);

                }
            })
        })
    </script>
}

Result: