英文:
Pass multiple ajax data to form using asp.net core razor pages
问题
I am trying to pass jquery data values to another page's form. I've tried the suggested solutions I found on the net but still no luck.
On my Screenshot, the solution I am thinking is to add the data to my href and from there extract the values and add them to my fields. Here is the code I am trying but failed:
$(document).ready(function () {
dataTable = $('#DT_employees').DataTable({
"pageLength": 50,
"ajax": {
"url": "/api/Employees",
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "employeeId", "width": "10%" },
{ "data": "userName", "width": "10%" },
{ "data": "firstName", "width": "10%" },
{ "data": "lastName", "width": "10%" },
{
"data": "{employeeId, firstName, lastName}",
"render": function (data) {
return `<div class="w-75 btn-group">
<a href="/Trainees/Index?=${data}" class="btn btn-primary text-white">
</a>
</div>`
},
"width": "5%"
}
],
"width": "100%"
});
});
英文:
I am trying to pass jquery data values to another page's form. I've tried the suggested solutions I found in the net but still no luck.
On my Screenshot, the solution I am thinking is to add the data to my href and from there extract the values and add to my fields. Here is the code I am trying but failed:
$(document).ready(function () {
dataTable = $('#DT_employees').DataTable({
"pageLength": 50,
"ajax": {
"url": "/api/Employees",
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "employeeId", "width": "10%" },
{ "data": "userName", "width": "10%" },
{ "data": "firstName", "width": "10%" },
{ "data": "lastName", "width": "10%" },
{
"data": "{employeeId, firstName, lastName}",
"render": function (data) {
return `<div class="w-75 btn-group">
<a href = "/Trainees/Index?=${data}" class="btn btn-primary text-white">
</a>
</div>`
},
"width": "5%"
}
],
"width": "100%"
});
});
答案1
得分: 0
以下是您提供的代码的翻译部分：
我创建了一个示例，但我使用了DataTable的`full`属性，您可以将其用作参考。
模型：
public class Employee
{
public int employeeId { get; set; }
public string userName { get; set; }
public string firstName { get; set; }
public string lastName { get; set; }
}
HomeController：
public IActionResult Index()
{
return View();
}
public IActionResult Employees()
{
List<Employee> employees = new List<Employee>()
{
new Employee() { employeeId=1,userName="Tom Smith",firstName="Smith",lastName="Tom"},
new Employee() { employeeId=2,userName="Jim Willer",firstName="Willer",lastName="Jim"}
};
return Json(employees);
}
(HomeController)Index.cshtml：
<table id="DT_employees">
<thead>
<tr>
<th>employeeId</th>
<th>userName</th>
<th>firstName</th>
<th>lastName</th>
<th>Details</th>
</tr>
</thead>
</table>
<script>
$(document).ready(function () {
dataTable = $('#DT_employees').DataTable({
"pageLength": 50,
"ajax": {
"url": "/Home/Employees",
"type": "GET",
"datatype": "json",
"dataSrc": function (d) {
return d
}
},
"columns": [
{ "data": "employeeId", "name": "employeeId", "width": "10%" },
{ "data": "userName", "name": "userName", "width": "10%" },
{ "data": "firstName","name": "firstName", "width": "10%" },
{ "data": "lastName", "name": "lastName", "width": "10%" },
{
"render": function (data,type,full,meta) {
return `<div class="w-75 btn-group">
<a href = "/Trainees/Index?employeeId=${full.employeeId}&firstName=${full.firstName}&lastName=${full.lastName}" class="btn btn-primary text-white">details
</a>
</div>`
},
"width": "5%"
}
],
"width": "100%"
});
});
</script>
TraineesController：
public IActionResult Index(Employee employee)
{
return View(employee);
}
(TraineesController)Index.cshtml：
@model Project.Models.Employee
<div>
<dl class="row">
<dt class = "col-sm-2">
@Html.DisplayNameFor(model => model.employeeId)
</dt>
<dd class = "col-sm-10">
@Html.DisplayFor(model => model.employeeId)
</dd>
<dt class = "col-sm-2">
@Html.DisplayNameFor(model => model.firstName)
</dt>
<dd class = "col-sm-10">
@Html.DisplayFor(model => model.firstName)
</dd>
<dt class = "col-sm-2">
@Html.DisplayNameFor(model => model.lastName)
</dt>
<dd class = "col-sm-10">
@Html.DisplayFor(model => model.lastName)
</dd>
</dl>
</div>
测试结果：
[![enter image description here][1]][1]
[![enter image description here][2]][2]
请注意，我已经省略了代码中的HTML标签，以便在文本中显示代码。如果您需要完整的代码，请将其从上面的翻译中复制并粘贴到您的编辑器中。
英文:
I made an example, but I use the full property of DataTable, you can use it as a reference.
Model:
public class Employee
{
public int employeeId { get; set; }
public string userName { get; set; }
public string firstName { get; set; }
public string lastName { get; set; }
}
HomeController:
public IActionResult Index()
{
return View();
}
public IActionResult Employees()
{
List<Employee> employees = new List<Employee>()
{
new Employee() { employeeId=1,userName="Tom Smith",firstName="Smith",lastName="Tom"},
new Employee() { employeeId=2,userName="Jim Willer",firstName="Willer",lastName="Jim"}
};
return Json(employees);
}
(HomeController)Index.cshtml:
<table id="DT_employees">
<thead>
<tr>
<th>employeeId</th>
<th>userName</th>
<th>firstName</th>
<th>lastName</th>
<th>Details</th>
</tr>
</thead>
</table>
<script>
$(document).ready(function () {
dataTable = $('#DT_employees').DataTable({
"pageLength": 50,
"ajax": {
"url": "/Home/Employees",
"type": "GET",
"datatype": "json",
"dataSrc": function (d) {
return d
}
},
"columns": [
{ "data": "employeeId", "name": "employeeId", "width": "10%" },
{ "data": "userName", "name": "userName", "width": "10%" },
{ "data": "firstName","name": "firstName", "width": "10%" },
{ "data": "lastName", "name": "lastName", "width": "10%" },
{
"render": function (data,type,full,meta) {
return `<div class="w-75 btn-group">
<a href = "/Trainees/Index?employeeId=${full.employeeId}&firstName=${full.firstName}&lastName=${full.lastName}" class="btn btn-primary text-white">details
</a>
</div>`
},
"width": "5%"
}
],
"width": "100%"
});
});
</script>
TraineesController:
public IActionResult Index(Employee employee)
{
return View(employee);
}
(TraineesController)Index.cshtml:
@model Project.Models.Employee
<div>
<dl class="row">
<dt class = "col-sm-2">
@Html.DisplayNameFor(model => model.employeeId)
</dt>
<dd class = "col-sm-10">
@Html.DisplayFor(model => model.employeeId)
</dd>
<dt class = "col-sm-2">
@Html.DisplayNameFor(model => model.firstName)
</dt>
<dd class = "col-sm-10">
@Html.DisplayFor(model => model.firstName)
</dd>
<dt class = "col-sm-2">
@Html.DisplayNameFor(model => model.lastName)
</dt>
<dd class = "col-sm-10">
@Html.DisplayFor(model => model.lastName)
</dd>
</dl>
</div>
Test Result:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论