在弹出模式中显示 UserDetails 不显示 ASP.NET CORE MVC

Question

我正在尝试在单击 <tr> 时使用用户详细信息创建 popup modal。我在控制器上创建函数

[HttpGet]
        public IActionResult GetUserDetails(int? Id)
        {
            TicketVM ticketVM = new()
            {
                ApplicationUser = _unitOfwork.ApplicationUser.Get(Id.GetValueOrDefault())
            };

            if (Id == null)
            {
                return NotFound();
            }

            if(ticketVM.ApplicationUser == null)
            {
                return NotFound();
            }

            return View(ticketVM);
        }

在我的 Index.cshtml

@model IEnumerable<VmSTicketing.Models.Ticket>

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/AdminLTE/_Layout.cshtml";

}


<br />
<div class="row">
    <div class="col-6">
        <h2 class="text-primary">Lista tiketa</h2>
    </div>
    <div class="col-6 text-right">
        <a class="btn btn-primary" asp-action="Upsert"><i class="fas fa-plus"></i> &nbsp; Novi tiket</a>
    </div>
</div>

<br />

<div class="p-4 border rounded">
    <table id="tblData" class="table table-striped table-bordered" style="width:100%">
        <thead class="thead-dark">
            <tr class="table-info">
                <th>Opis</th>
                <th>Datum i vrijeme slanja</th>
                <th>Vrsta Tiketa</th>
                <th>Status</th>
                <th>Datum i vrijeme zavrsetka</th>
                <th>Korisnik</th>
                <th></th>
            </tr>
        </thead>
    </table>
</div>

<partial name="UserDetails" />


@section Scripts{
    <script src="~/js/ticket.js"></script>
}

然后在 ticket.js 中添加类似

的内容

function loadDataTable() {
    dataTable = $('#tblData').DataTable({
        "ajax": {
            "url": "/Manager/Ticket/GetAll"
        },
        "columns": [
            { "data": "description", "width": "10%" },
            { "data": "dateAndTime", "width": "15%" },
            { "data": "ticketType.name", "width": "10%" },
            { "data": "status", "width": "10%" },
            { "data": "answered", "width": "15%" },
            { "data": "applicationUser.name", "width": "10%" },
            {
                "data": "id",
                "render": function (data) {
                    return `
                            <div class="text-center">
                                <a href="/Manager/Discussion/OpenDiscussion/${data}" class="btn btn-primary text-white" style="cursor:pointer">
                                    <i class="fas fa-comments"></i>
                                </a>
                                <a href="/Manager/Ticket/Details/${data}" class="btn btn-success text-white" style="cursor:pointer">
                                    <i class="fas fa-info"></i>
                                </a>
                                <a onclick=Delete("/Manager/Ticket/Delete/${data}") class="btn btn-danger text-white" style="cursor:pointer">
                                    <i class="fas fa-trash-alt"></i> 
                                </a>                              
                            </div>
                           `;
                }, "width": "15%"
            }
        ]
    });
}

这是我弹出的函数window

$(".detalji").click(function () {
    var id = $(this).attr("userDetails");
    $.get("/Manager/Ticket/UserDetails?id=" + id, function (result, status) {
        $("#container").append(result);
        $("#userDetails").modal({ show: true })
    })
})

但是当我点击 <tr> 时没有任何显示，并且在控制台日志中出现错误

jquery.min.js:2 GET https://localhost:44315/Manager/Ticket/GetUserDetails?id=undefined 500

我试图了解问题所在并尝试调试，但我认为问题出在我的函数中，其中模态弹出窗口谁能告诉我哪里做错了，哪里做错了？

这是演示

DEMO

更新

UserDetails.cshtml

   @model VmSTicketing.Models.ViewModels.TicketVM

<div class="modal fade" id="userDetails">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
                <h3 class="modal-title">Podaci o Useru</h3>
            </div>
            <div class="modal-body">
                <div class="row dataTable">
                    <div class="col-md-4">
                        <label class="control-label">Ime i Prezime</label>
                    </div>
                    <div class="col-md-8">
                        <input type="text" class="form-control" asp-for="Ticket.ApplicationUser.Name" disabled id="ImePrezime" name="ImePrezime">
                    </div>
                </div>

                <br>

                <div class="row dataTable">
                    <div class="col-md-4">
                        <label class="control-label">Email Adresa</label>
                    </div>
                    <div class="col-md-8">
                        <input type="text" class="form-control" asp-for="Ticket.ApplicationUser.Email" disabled id="Email" name="Email">
                    </div>
                </div>

                <br>

                <div class="row dataTable">
                    <div class="col-md-4">
                        <label class="control-label">Broj Telefona</label>
                    </div>
                    <div class="col-md-8">
                        <input type="text" asp-for="Ticket.ApplicationUser.PhoneNumber" class="form-control" disabled id="BrTel" name="BrTel">
                    </div>
                </div>
                <br />

                <div class="row dataTable">
                    <div class="col-md-4">
                        <label class="control-label">Klijent</label>
                    </div>
                    <div class="col-md-8">
                        <input type="text" asp-for="Ticket.ApplicationUser.Client" class="form-control" disabled id="klijent" name="klijent">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

如果你想在点击 table tr 时将 "data": "id" 传递给控制器，你可以使用这个：

$('#tblData').on('click', 'tr', function () {
            var Table = $('#tblData').DataTable(); 
            var id = Table.row(this).data().id;
           $.get("/Manager/Ticket/UserDetails?id=" + id, function (result, status) {
               $("#container").append(result);
               $("#userDetails").modal({ show: true })
           })
        });

更新：

如果你想对数据使用部分视图 Index.cshtml.Here 中的 TicketVM 数据是一个演示：

型号：

    public class TicketVM {
        public ApplicationUser ApplicationUser { get; set; }
    }
    public class ApplicationUser
    {
        public string Name { get; set; }
        public string Email { get; set; }
        public string PhoneNumber { get; set; }
        public string Client { get; set; }
    }

Index.cshtml（我把<partial name="UserDetails" />换成了<div id="modal"></div>）：

<br />
<div class="row">
    <div class="col-6">
        <h2 class="text-primary">Lista tiketa</h2>
    </div>
    <div class="col-6 text-right">
        <a class="btn btn-primary" asp-action="Upsert"><i class="fas fa-plus"></i> &nbsp; Novi tiket</a>
    </div>
</div>

<br />

<div class="p-4 border rounded">
    <table id="tblData" class="table table-striped table-bordered" style="width:100%">
        <thead class="thead-dark">
            <tr class="table-info">
                <th>Opis</th>
                <th>Datum i vrijeme slanja</th>
                <th>Vrsta Tiketa</th>
                <th>Status</th>
                <th>Datum i vrijeme zavrsetka</th>
                <th>Korisnik</th>
                <th></th>
            </tr>
        </thead>
    </table>
</div>


<div id="modal"></div>

UserDetails.cshtml（我把Ticket.ApplicationUser.xxx改成了ApplicationUser.xxx，因为我的Ticket模型structure.IF你的结构和我的不一样，不用改） :

@model VmSTicketing.Models.ViewModels.TicketVM
<div class="modal fade" id="userDetails">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
                <h3 class="modal-title">Podaci o Useru</h3>
            </div>
            <div class="modal-body">
                <div class="row dataTable">
                    <div class="col-md-4">
                        <label class="control-label">Ime i Prezime</label>
                    </div>
                    <div class="col-md-8">
                        <input type="text" class="form-control" asp-for="ApplicationUser.Name" disabled id="ImePrezime" name="ImePrezime">
                    </div>
                </div>

                <br>

                <div class="row dataTable">
                    <div class="col-md-4">
                        <label class="control-label">Email Adresa</label>
                    </div>
                    <div class="col-md-8">
                        <input type="text" class="form-control" asp-for="ApplicationUser.Email" disabled id="Email" name="Email">
                    </div>
                </div>

                <br>

                <div class="row dataTable">
                    <div class="col-md-4">
                        <label class="control-label">Broj Telefona</label>
                    </div>
                    <div class="col-md-8">
                        <input type="text" asp-for="ApplicationUser.PhoneNumber" class="form-control" disabled id="BrTel" name="BrTel">
                    </div>
                </div>
                <br />

                <div class="row dataTable">
                    <div class="col-md-4">
                        <label class="control-label">Klijent</label>
                    </div>
                    <div class="col-md-8">
                        <input type="text" asp-for="ApplicationUser.Client" class="form-control" disabled id="klijent" name="klijent">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

GetAll(使用假数据进行测试，并将prtial view传给js，js会添加到<div id="modal"></div>):

 [HttpGet]
            public IActionResult UserDetails(int? Id)
            {
                TicketVM t = new TicketVM
                {
                    ApplicationUser = new ApplicationUser { Client = "client", Email = "email", Name = "name", PhoneNumber = "phone" }
            };
                
                
    
                return PartialView("UserDetails",t);
            }

结果：

在弹出模式中显示 UserDetails 不显示 ASP.NET CORE MVC

Display UserDetails on popup Modal doesn't show up ASP.NET CORE MVC

javascript

c#

datatable

asp.net-core-mvc