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

Question

我尝试在<a> link上制作弹出 windows 模态，并用来自 controller 的数据填充模态。 我测试了我的 function 并且一切正常，所以数据出现在我的视野中，我得到了我需要的所有数据。

{"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填充我的弹出模式

到目前为止，我创建的是 Controller Action

    [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>

这是我的 function 用于弹出模式，它也可以工作

这是数据表列

{
                "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 })
    });
});

这里是 output

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

Answer 1

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

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

Controller：

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

结果：

Answer 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]);