用数据 ASP.NET CORE MVC Jquery 填充弹出模式
Posted
技术标签:
【中文标题】用数据 ASP.NET CORE MVC Jquery 填充弹出模式【英文标题】：Fill Popup modal with data 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 我现在更新我的函数。
【参考方案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> 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)以上是关于用数据 ASP.NET CORE MVC Jquery 填充弹出模式的主要内容，如果未能解决你的问题，请参考以下文章
使用标签助手调用控制器，包括来自 asp.net core mvc 中搜索栏的数据
ASP.NET MVC 中的 jQuery 与 MicrosoftAjax
如何在 C# 页面 ASP.NET Core MVC 上使用 SignInManager 和 Usermanager
如何先用asp.net身份框架数据库将asp.net mvc迁移到asp.net core
深入研究 Mini ASP.NET Core（迷你 ASP.NET Core），看看 ASP.NET Core 内部到底是如何运行的