This is cshtml

  <a href="#" data-toggle="modal" data-target="#empmodal">
                                        @Html.DisplayFor(model => model.FullName, new { @id = "empName" })
                                    </a>


<div  id="empmodal">
    <div >
        <div >
            <div ></div>
            <div ></div>
        </div>
        <div >
            <div ></div>
            <div ></div>
            <div ></div>
        </div>
        <div >
            <div ></div>
            <div ></div>
            <div ></div>
        </div>
        <div >
            <div ></div>
            <div ></div>
            <div ></div>
        </div>
        <div >
            <div ></div>
            <div ></div>
            <div ></div>
        </div>
    </div>
</div>

this is my js

$('a').click(function (event) {
            var url = '@Url.Action("Details")' /*  input_index*/;

            $('.modal.new-employee-modal').modal({
                autofocus: false,
                onHidden: function () {
                    $('.modal.new-employee-modal').empty();
                    $('.modal.new-employee-modal').append(
                        `<div >
            <div >
                <div ></div>
                <div ></div>
            </div>
            <div >
                <div ></div>
                <div ></div>
                <div ></div>
            </div>
            <div >
                <div ></div>
                <div ></div>
                <div ></div>
            </div>
            <div >
                <div ></div>
                <div ></div>
                <div ></div>
            </div>
            <div >
                <div ></div>
                <div ></div>
                <div ></div>
            </div>
        </div>`)
                }
            })
                .modal('show');
            $.get(url).done(function (a) {
                $(".modal.new-employee-modal").html(a);

            });


        });

This is my particalview and pop-up in inside

 <div >
        <div >
            @{ ViewBag.Title = "employee details";
               
                }
        </div>
        <div ></div>
    </div>
    <div ></div>
    <div >
        <div ></div>
        <div >
            <div >
                <div >@EmployeeCardRes.FirstName</div>
                <div >@Model.FirstName</div>
            </div>
            <div >
                <div >@EmployeeCardRes.JobTitle</div>
                <div >@ViewBag.JobTitle</div>
            </div>
        </div>
        <div >
            <div >
                <div >@EmployeeCardRes.LastName</div>
                <div >@Model.LastName</div>
            </div>
            <div >
                <div >@EmployeeCardRes.PositionCode</div>
                <div >@ViewBag.Position</div>
            </div>
        </div>
        <div >
            <div >
                <div >@EmployeeCardRes.BirthDate</div>
                <div >@Model.BirthDate</div>
            </div>
            <div >
                <div >@EmployeeCardRes.ClassCode</div>
                <div >@ViewBag.Department</div>
            </div>
        </div>
        <div >
            <div >
                <div >@EmployeeCardRes.Gender</div>
                <div >@Model.Gender.EnumDisplayNameFor()</div>
            </div>
            <div >
                <div >@EmployeeCardRes.MobilePhoneNo</div>
                <div >@Model.MobilePhoneNo</div>
            </div>
        </div>
        <div >
            <div >
                <div >@EmployeeCardRes.CompanyEMail</div>
                <div >@Model.CompanyEMail</div>
            </div>
            <div >
                <div >@EmployeeCardRes.FirstEmploymentDate</div>
                <div >@Html.DisplayFor(model => model.FirstEmploymentDate)</div>
            </div>
        </div>
    </div>

I try to open popup.When I click on the link, the modal should open and it should fetch the data in the model.I'm not sure what I'm doing wrong in the examples I've looked at it's pretty much done like this.I need to go to the url I gave in javascript and open a partial view from the controller, that is, the last page I threw. Sorry for my English

CodePudding user response：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>popup modal</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div >
    
    <!-- Large modal -->
    <button  data-bs-toggle="modal" data-bs-target="#largeModal">Large modal</button>

    <div id="largeModal"  tabindex="-1" role="dialog">
        <div >
            <div >
                <div >
                    <h5 >Large Modal</h5>
                    <button type="button"  data-bs-dismiss="modal"></button>
                </div>
                <div >
                    <p>Add the <code>.modal-lg</code> class on <code>.modal-dialog</code> to create this large modal.</p>
                </div>
                <div >
                    <button type="button"  data-bs-dismiss="modal">Cancel</button>
                    <button type="button" >OK</button>
                </div>
            </div>
        </div>
    </div>
  
    </div>
</body>
</html>

CodePudding user response：

It is better you insert the complete bootstrap and modal libraries:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

And instead of links, maybe use a <button></button> or define an onclick event.