用数据 ASP.NET CORE MVC Jquery 填充弹出模式答案

【问题标题】：Fill Popup modal with data ASP.NET CORE MVC Jquery用数据 ASP.NET CORE MVC Jquery 填充弹出模式
【发布时间】：2021-06-09 07:51:30
【问题描述】：

我尝试在<a> link 上制作弹出窗口模式，并用来自控制器的数据填充模式。我测试了我的功能，一切正常，所以数据出现在我的视野中，我得到了我需要的所有数据。

{"data":[{"id":45,"description":"asddadasd","dateAndTime":"09/03/2021 09:09","answered":"0001-01-01T00:00:00","ticketTypeID":2,"ticketType":null,"userId":"de31ed54-1f0c-4ca1-aea1-6b5eb40c813c","applicationUser":{"name":"Johnos Smith","streetAddress":"Neka Tamo","city":"Levanda","postalCode":"710000","clientId":null,"client":null,"role":null,"roleList":null,"clientList":null,"id":"de31ed54-1f0c-4ca1-aea1-6b5eb40c813c","userName":"email@gmail.com","normalizedUserName":"email@gmail.com","email":"email@gmail.com","normalizedEmail":"email@gmail.com","emailConfirmed":false,"passwordHash":"AQAAAAEAACcQAAAAELNpgOfeZgcXCppwc3ccXbfSMu/o3CPf8grZwufVddWf/QtLzRFSCOvh/OWwkDKQww==","securityStamp":"CYXEQMHODLAJO7UPYGDRZJ52WLBTVEKR","concurrencyStamp":"17fc92bf-d32b-48f7-bcdc-0c5e3f21ea63","phoneNumber":"062/888-321","phoneNumberConfirmed":false,"twoFactorEnabled":false,"lockoutEnd":null,"lockoutEnabled":true,"accessFailedCount":0},"clientId":null,"client":null,"status":"Otvoren"}

现在，我想用这些数据applicationuser.name、applicationuser.email、applicationuser.phonenumber 填充我的弹出模式

到目前为止，我创建的是控制器动作

    [HttpGet]
public IActionResult GetByName(string name)
{
    var obj = _unitOfwork.Ticket.GetAll(x => x.ApplicationUser.Name == name);
    return Json(new { data = obj });
}

这里是弹出的 PartialView.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" readonly 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" readonly 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" readonly  class="form-control" 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" readonly  class="form-control" id="klijent" name="klijent">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是我的弹出模式功能，它也可以工作

这是数据表列

{
                "data": "applicationUser.name",
                "width": "10%",
                "render": function (data) {
                    return '<a id="' + data + '" class="text-info user-details"  data-toggle="modal" data-target="#userDetails" href="' + data + '" target_blank>' + data + '</a>'
                }
            },





      $("#tblData").on("click", "a.user-details", function () {
    var name = $(this).attr('id');
    /*console.log(name);*/
    $.get("/Manager/Ticket/GetByName?name=" + name, function (result) {
        console.log(result);
        $('#ImePrezime').val(result.data.applicationUser.name);
        $('#Email').val(result.data.applicationUser.email);
        $('#BrTel').val(result.data.applicationUser.phoneNumber);
        $("#userDetails").modal({ show: true })
    });
});

这是输出

如果您有更多额外信息，请告诉我，因为我不知道要提供什么源代码，但我认为我提供的这段代码很重要。我不确定我是否需要调用此函数onClick 事件处理程序或其他什么？有什么帮助吗？

【问题讨论】：

嗨，result 给你什么？
不幸的是没有
表undefine，id undefine
您的点击事件在 tr 上？它应该在a 标记上，因为单击a 标记模式是打开的，然后使用$(this).attr('id') 获取所需的ID 将其传递给后端，看看它会带来什么。
@Swati 我现在更新我的函数。

标签： javascript c# jquery asp.net-core

【解决方案1】：

锚中的data 是applicationUser.name 而不是applicationUser.id，所以你应该在后端编写一个函数来按名称获取数据，如下所示：

$("#tblData").on("click", "a.user-details", function () {
    var name = $(this).attr('id');
    console.log(name);
    $.get("/Ticket/GetByName?name=" + name, function (result) {
        console.log(result);
        $('#ImePrezime').val(result.data.applicationUser.name);
        $('#Email').val(result.data.applicationUser.email);
        $('#BrTel').val(result.data.applicationUser.phoneNumber);
        $("#userDetails").modal({ show: true })
    })
});

根据你的代码，我做了一个工作演示，代码如下：

主视图：

@model IEnumerable<Ticket>
@{
    ViewData["Title"] = "Index";

}
<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>Status</th>
                <th>Datum i vrijeme zavrsetka</th>
                <th>Korisnik</th>
            </tr>
        </thead>
    </table>
</div>

<partial name="UserDetails" />


@section Scripts{

    <script>
        $(document).ready(function () { 
            dataTable = $('#tblData').DataTable({
                "ajax": {
                    "url": "/Ticket/GetAll"
                },
                "columns": [
                    { "data": "description", "width": "10%" },
                    { "data": "dateAndTime", "width": "15%" },
                    { "data": "status", "width": "10%" },
                    { "data": "answered", "width": "15%" },
                    {
                        "data": "applicationUser.name",
                        "width": "10%",
                        "render": function (data) {
                            return '<a id="' + data + '" class="text-info user-details" data-toggle="modal" data-target="#userDetails" href="' + data + '" target_blank>' + data + '</a>'
                        }
                    }
                ]
            });
        })

        $("#tblData").on("click", "a.user-details", function () {
            var name = $(this).attr('id');
            console.log(name);
            $.get("/Ticket/GetByName?name=" + name, function (result) {
                console.log(result);
                $('#ImePrezime').val(result.data.applicationUser.name);
                $('#Email').val(result.data.applicationUser.email);
                $('#BrTel').val(result.data.applicationUser.phoneNumber);
                $("#userDetails").modal({ show: true })
            })
        });
    
    </script>
}

局部视图（无变化）：

<div class="modal fade" id="userDetails">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Podaci o Useru</h3>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
            </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" readonly 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" readonly 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" readonly class="form-control" id="BrTel" name="BrTel">
                    </div>
                </div>
                <br />
            </div>
        </div>
    </div>
</div>

控制器：

[HttpGet]
public IActionResult GetAll()
{
    var obj = GetAllData();
    return Json(new { data = obj });
}

[HttpGet]
public IActionResult GetByName(string name)
{
    var obj = GetUser(name);
    return Json(new { data = obj });
}

结果：

【讨论】：

嘿，GetAllData 和 GetUser 的实现在哪里？
这是假代码，你只是用你的函数获取数据。
让我测试一下，我会在几分钟后回来:)
我收到错误消息Uncaught TypeError: Cannot read property 'name' of undefined
点击锚点时？

【解决方案2】：

试试这个希望你的错误会得到解决。

        $('#ImePrezime').val(result.ticketTable.row(this).data()[1]);
        $('#Email').val(result.ticketTable.row(this).data()[2]);
        $('#BrTel').val(result.ticketTable.row(this).data()[3]);

【讨论】：

试试这个$('#Email').val(result.data.applicationUser.email)