在弹出窗口上显示 UserDetails 模式不显示 ASP.NET CORE MVC答案

【问题标题】：Display UserDetails on popup Modal doesn't show up ASP.NET CORE MVC在弹出窗口上显示 UserDetails 模式不显示 ASP.NET CORE MVC
【发布时间】：2021-03-10 10:35:48
【问题描述】：

单击<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%"
            }
        ]
    });
}

这是我的弹出窗口功能

$(".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>

【问题讨论】：

id 未定义：https://localhost:44315/Manager/Ticket/GetUserDetails?id=undefined。 $(this).attr("userDetailsMM"); 是什么？它不在您发布的代码中。此外，您的演示代码与此处显示的代码完全不同，并且演示似乎可以工作？
我发布 DEMO 只是为了让用户了解我要创建的内容。 userDetailsMM我没有发表我的观点。抱歉，我会更新我的问题
我的意思是，tr.table-info 行上的属性userDetailsMM 在哪里？它似乎不在您的代码中，这可能是它未定义的原因。
查看 Index.cshtml。在我的代码的开头
我有并且文本 userDetailsMM 直到 jquery 部分才会出现在您的代码中

标签： javascript c# datatable asp.net-core-mvc

【解决方案1】：

如果你想在点击表格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 中的数据 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模型结构。如果你的结构和我的不一样，你不需要改变它们）：

@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);
            }

结果：

【讨论】：

我这里有问题，因为我的弹出窗口显示但没有数据。因为我检查了 console.log(data) 它成功检索数据但弹出模式没有显示任何内容
你可以参考我更新的答案。我不明白你为什么使用$("#container").append(result);我在GetAll中将带有数据的部分视图返回给js。在js中，将其放入一个div .
让我测试一下，我会回来的 :) 谢谢 :)
对我不起作用！不幸的是，我改变了主意，将 Modal 加载到 <a href> 链接而不是 <tr> 中。所以在Korisnik 的索引页面中，我放置了链接，当用户单击名称时，它应该是弹出模式