问题描述
我只想知道如何使用 Ajax 调用图像 为此，我在下面提供了我的代码，它可以让您了解我到目前为止所使用的内容
我的 .js 文件
function loadData(Id) {
$.ajax({
type: "GET",url: '/FileManagement/GetId',data: { id: Id},contentType: "application/json; charset=utf-8",dataType: "json",success: function (result) {
debugger;
alert(result.ManualContent),},error: function (errormessage) {
debugger;
alert(errormessage.responseText);
}
});
}
我的控制器
public JsonResult GetId(int id)
{
IEnumerable<FileDetails> fileDetails = new List<FileDetails>();
var file = (from a in _context.FileDetails.Where(m => m.Id == id)
select new
{
a.ManualContent,a.Imagename
}).SingleOrDefault();
return Json(file,JsonRequestBehavior.AllowGet );
}
}
}
我的观点
{
<div class="row">
<div class="col-lg-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">File List</h4>
<table class="table table-responsive-lg" id="tblFile">
<thead>
<tr>
<th>Image</th>
<th>Keyword</th>
<th>Category Name</th>
</tr>
</thead>
<tbody id="appendFile">
@foreach (var file in Model)
{
<tr>
<td>
<img src="~/FileImage/@file.Imagename"
class="rounded-circle"
height="40" width="40"
asp-append-version="true" id="Image" />
</td>
<td>@file.Keyword</td>
<td>@file.CategoriesName</td>
<td><a href="#" class="preview-icon" onclick="loadData(@file.Id)">Read More...</a></td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal fade" id="Largecontent" tabindex="-1" role="dialog" aria-labelledby="Largecontent" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="Largecontent"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
<div class="modal" id="divfile" role="dialog" style="display: none;overflow-y: scroll;">
@*<div class="modal-backdrop"></div>*@
<div class="modal-dialog dialog-Box" style="width:96%">
<div class="modal-content ">
<div class="modal-header-small">
<i style="color:darkgreen; " class="fa fa-address-card-o"></i> File Content
</div>
<div class="modal-body">
<label id="txtid"></label>
<div id="audshow" style="display:none;"><audio src="" id="aud"></audio></div>
<div id="vidshow" style="display:none;"><video src="" id="vid"></video></div>
</div>
<div class="modal-footer">
<div class="pull-left "></div>
@*<button id="btnSelect" class="btn btnsa " type="button" style='background-color:#62cb31'><i class="fa fa-check-circle"></i> Continue</button>*@
<button id="btnCancels" class="btn btn-danger" type="button"><i class="fa fa-check-circle"></i> Close</button>
</div>
</div>
</div>
</div>
@section styles{
<link href="~/Scripts/plugins/dataTables/jquery.dataTables.css" rel="stylesheet" />
@*<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css">*@
<style>
.appadd {
white-space: Nowrap;
overflow: hidden !important;
width: 180px !important;
height: 30px !important;
text-overflow: ellipsis !important;
word-wrap: break-word;
display: inline-block;
}
.hidetext {
-webkit-text-security: rectangle; /* Default */
}
.topspace {
margin-top: 10px !important;
}
.btn-mar-btm {
margin-bottom: 10px !important;
}
.modal-backdrop {
opacity: 0.4 !important;
}
@@media (min-width:900px) {
.modal-dialog {
max-width: 700px !important;
}
}
.modal-content {
top: 20px;
width: 100%;
}
.modal-footer {
background-color: #f7f9fa;
}
.modal-header-small {
padding: 12px 10px;
background: #f7f9fa;
border-bottom: 1px solid #e4e5e7;
}
.col-mob {
position: relative;
width: 50%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.mul {
background-color: #FFFFFF;
background-image: none;
border: 1px solid #e5e6e7;
border-radius: 1px;
color: inherit;
display: block;
padding: 6px 12px;
transition: border-color 0.15s ease-in-out 0s,Box-shadow 0.15s ease-in-out 0s;
width: 100%;
height: calc(2.25rem - 3px);
}
.time-bg1 {
background-color: #FAF0E6 !important;
}
.time-bg2 {
background-color: #e6f7ff !important;
}
.time-bg3 {
background-color: #FFF5EE !important;
}
.time-bg4 {
background-color: #F0FFF0 !important;
}
.time-bg5 {
background-color: #cceeff !important;
}
textarea {
overflow: hidden !important;
resize: none !important;
}
.payment-card {
border: 1px solid #e7eaec !important;
}
@@media only screen and (max-width : 767px) {
.form-group {
margin-bottom: 0 !important;
}
.mar-btm {
margin-bottom: 16px !important;
}
}
@@media only screen and (min-width : 961px) {
.col-mob-tlbl {
position: relative;
width: 19%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-mob-time {
position: relative;
width: 27%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
}
@@media only screen and (max-width : 961px) {
.col-mob-tlbl {
position: relative;
width: 19%;
min-height: 1px;
padding-right: 15px;
padding-left: 7px;
}
.col-mob-time {
position: relative;
width: 27%;
min-height: 1px;
padding-right: 9px;
padding-left: 15px;
}
.ws-change {
padding: 4px 0px !important;
font-size: 10px !important;
}
}
.col-md-12 {
padding-left: 0px !important;
padding-right: 0px !important;
}
.breadcrumb-pad {
padding-left: 17px !important;
}
</style>
}
@section scripts
{
<script src="~/FileList.js"></script>
}
}
你能指导我在弹出窗口中查看图像文件似乎是什么问题吗？因为我只能查看 ManualContent 部分，而不能查看带有它的图像
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）