<script>
$(function () { --頁面開始時執行 等於=> $(document).ready()
//modal視窗顯示
$('#dvRecord').on('show.bs.modal', function (e) {
$('#dvRecord').html("");
$.ajax({
type: "Post",
url: "@Url.Action("RecordDetail", "SysLogDetail")",
data: {
ID: $(e.relatedTarget).data('id') ---這裡帶入該筆資料ID進行ajax
},
datatype: "json",
success: function (data, textStatus) {
$('#dvProcess').html(data);
StopLoading();
},
error: function (xhr, ajaxOptions, thrownError) {
StopLoading();
$('#dvProcess').modal("toggle");
AlertError("(" + xhr.status + " : " + xhr.statusText + ")", "");
}
});
});
</script>
<html> --這裡是partial view
@model IEnumerable<MYPROJECT.Models.SysLogDetail>
@usingMYPROJECT.Models
<div class="row">
<div class="col-xl-12">
<table class="table table-hover table-bg">
<thead>
<tr>
<th scope="col">日期時間</th>
<th scope="col">公司</th>
<th scope="col">部門</th>
<th scope="col">帳號</th>
<th scope="col">姓名</th>
<th scope="col">紀錄</th>
<th scope="col">檢視紀錄明細</th>
</tr>
</thead>
<tbody>
@if (Model != null && Model.Any())
{
for (var i = 0; i < Model.Count(); i++)
{
<tr>
<td id="DetailTime">@Model.ElementAt(i).Time.ToString("yyyy/MM/dd HH:mm:ss")</td>
<td id="Corp">@Model.ElementAt(i).Corp</td>
<td id="Department">@Model.ElementAt(i).Department</td>
<td id="Account">@Model.ElementAt(i).Account</td>
<td id="Name">@Model.ElementAt(i).Name</td>
<td>
@{if (Model.ElementAt(i).RecordType == "SUCCESS")
{
<span class="glyphicon glyphicon-ok-sign text-success sign-icon-lg"></span>
}
else
{
<span class="glyphicon glyphicon-remove-sign text-danger sign-icon-lg"></span>
}
}
</td>
<td>
<button type="button" class="btn btn-sm btn-outline-primary" data-id="@Model.ElementAt(i).ID" data-target="#dvRecord" data-toggle="modal">
--送入AJAX資料 data-id => 對應ajax data:{ ID: $(e.relatedTarget).data('id') }
<span class="glyphicon glyphicon-search"></span>
</button>
</td>
</tr>
}
}
else
{
<tr>
<td colspan="8" class="text-center">
<h5>查無資料</h5>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</html>
關於data-* attribute
可參考
https://pjchender.blogspot.com/2017/01/html-5-data-attribute.html