#javascript #jquery #asp.net-core #razor
#javascript #jquery #asp.net-ядро #razor
Вопрос:
Я новичок в jquery. Я хочу перенести значение переменной из функции jQuery в модальную. Имя переменной — ApplicationName . Ниже приведен мой код jquery, а также модальный код mu.
<script>
$("#btnLink").click(function () {
var applicationName = $(this).closest("tr").find("td").eq(0).text();
$('#ModalPopUp').modal('show');
})
</script>
И модальный код:
div class="modal fade" id="ModalPopUp" role="dialog">
<div class="modal-dialog err-pop" style="">
<div class="modal-content">
<div class="modal-header">
<button id="DivClose" type="button" class="close" data-dismiss="modal">amp;times;</button>
<h3 class="modal-title" id="exampleModalLabel">Attachment List</h3>
</div>
<div class="modal-body" style="text-align:center;">
<table>
<tr>
<th>File Name</th>
<th>File Size</th>
<th>Attachment Type</th>
<th colspan="2" style="text-align:center">Action</th>
</tr>
@foreach (var app in Model)
{
foreach (var data in app.FileData)
{
if (data.ApplicationId == app.ApplicationId)
{
<tr>
<td>@data.Name</td>
<td>@data.Size</td>
<td>@data.AttachmentType.Description</td>
<td>
@Html.ActionLink("Download", "DownloadAttachment", "Application", routeValues: new { id = data.Id }, htmlAttributes: new { @class = "btn btn-small" })
</td>
</tr>
}
}
}
</table>
</div>
</div>
</div>
</div>
Комментарии:
1. Необходимо определить, что означает «в модальный» в более конкретных терминах элементов
2. В какую часть модальной функции вы пытаетесь поместить имя приложения? И это модальная загрузка, верно?
3. Привет, я хочу поместить имя приложения внутри оператора razor / оператора foreach
4. Куда вы хотите поместить ApplicationName в foreach? <td></td>?Или <tr></tr>?
5. Вы не можете использовать ApplicationName в коде на стороне сервера, но вы можете удалить <tr>s, если (данные. Name != ApplicationName), вы можете сравнить ApplicationName и первую ячейку каждого tr, а затем изменить данные в html. Я обновил свой ответ, вы можете сослаться на него.
Ответ №1:
Вы не можете использовать ApplicationName в коде на стороне сервера, но вы можете foreach в js и изменить tr в foreach .Вот демонстрация:
Просмотр(TestApplicationName.cshtml):
<button id="btnLink">btnLink</button>
<div class="modal fade" id="ModalPopUp" role="dialog">
<div class="modal-dialog err-pop" style="">
<div class="modal-content">
<div class="modal-header">
<button id="DivClose" type="button" class="close" data-dismiss="modal">amp;times;</button>
<h3 class="modal-title" id="exampleModalLabel">Attachment List</h3>
</div>
<div class="modal-body" style="text-align:center;">
<table>
<thead>
<tr>
<th>File Name</th>
<th>File Size</th>
<th>Attachment Type</th>
<th colspan="2" style="text-align:center">Action</th>
</tr>
</thead>
<tbody>
@foreach (var app in Model)
{
foreach (var data in app.FileData)
{
if (data.ApplicationId == app.ApplicationId)
{
<tr>
<td>@data.Name</td>
<td>@data.Size</td>
<td>@data.AttachmentType.Description</td>
<td>
@Html.ActionLink("Download", "DownloadAttachment", "Application", routeValues: new { id = data.Id }, htmlAttributes: new { @class = "btn btn-small" })
</td>
</tr>
}
}
}
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
$("#btnLink").click(function () {
//var applicationName = $(this).closest("tr").find("td").eq(0).text();
var applicationName = "f21";
$("tbody tr").each(function (index, data) {
if (data.cells[0].innerText != applicationName) {
data.remove();
}
})
})
</script>
Модели:
public class App
{
public List<FileData> FileData { get; set; }
public int ApplicationId { get; set; }
}
public class FileData {
public int ApplicationId { get; set; }
public int Id { get; set; }
public string Name { get; set; }
public string Size { get; set; }
public AttachmentType AttachmentType { get; set; }
}
public class AttachmentType {
public string Description { get; set; }
}
Контроллер:
public IActionResult TestApplicationName()
{
List<App> l = new List<App> {
new App{ ApplicationId=1, FileData=new List<FileData>{ new FileData { ApplicationId=1, Id=11, AttachmentType=new AttachmentType { Description="dsds"}, Name="f11", Size="2"} } },
new App{ ApplicationId=2, FileData=new List<FileData>{ new FileData { ApplicationId=2, Id=21, AttachmentType=new AttachmentType { Description="dsdds"}, Name="f21", Size="2"},new FileData { ApplicationId=2, Id=22, AttachmentType=new AttachmentType { Description="dsgterbdds"}, Name="f22", Size="2"} }, },
new App{ ApplicationId=3, FileData=new List<FileData>{ new FileData { ApplicationId=3, Id=31, AttachmentType=new AttachmentType { Description="dggsds"}, Name="f31", Size="2"} } },
};
return View(l);
}
Результат: