我在一个 ASP MVC 应用程序上工作,我需要使用引导程序在模态窗口中显示图像,模态窗口将从表格单元格调用,这是我的 HTML 来触发模态:
<td class="celda">
<!--Aqui es donde mando a llamar al Popup-->
@Html.Raw("<a id='btnPhoto' data-target='#myModal' style = 'color: #004881' href='/materiales/photo/" + item.MaterialId + "' id='" + item.MaterialId + "' title='Actualizar imagen del material'> <span class='fa fa-camera fa-lg'> </span></a>")
@Html.Raw("<b style = 'color: #004881'> | </b>")
@Html.Raw("<a id='popUpLink' data-modal='' data-toggle='modal' data-target='#myModal' style = 'color: #004881' href='/materiales/details/" + item.MaterialId + "' id='" + item.MaterialId + "' title='Consultar Unidad de medida'> <span class='fa fa-search fa-lg'> </span></a>")
@Html.Raw("<b style = 'color: #004881'> | </b>")
@Html.Raw("<a id='popUpLink' data-modal='' data-toggle='modal' data-target='#myModal' style = 'color: #004881' href='/materiales/edit/" + item.MaterialId + "' id='" + item.MaterialId + "' title='Editar Unidad de medida'> <span class='fa fa-pencil fa-lg'> </span></a>")
@Html.Raw("<b style = 'color: #004881'> | </b>")
@Html.Raw("<a id='popUpLink' data-modal='' data-toggle='modal' data-target='#myModal' style = 'color: #004881' href='/materiales/delete/" + item.MaterialId + "' id='" + item.MaterialId + "' title='Eliminar Unidad de medida'> <span class='fa fa-trash-o fa-lg'> </span> </a>")
</td>
这是添加模态窗口的 HTML 片段:
<script src="~/Content/popup/popup.js"></script>
<script src="~/Content/popup/popupimagen.js"></script>
<!-- modal placeholder-->
<div id='myModal' class='modal fade in'>
<div class="modal-dialog">
<div class="modal-content">
<div id='myModalContent'></div>
</div>
</div>
</div>
这是应显示为模态视图的 HTML:
@model xxx.WebUi.Models.MaterialViewModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
@*<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>*@
<link href="~/Content/popup/popupstyle.css" rel="stylesheet" />
</head>
<body>
<div class="modal-header modal-header-primary">
<h3 class="modal-title">
xxxx
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove"></span></button>
</h3>
</div>
<div class="modal-body">
@using (Html.BeginForm("Photo", "Materiales", null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken()
@Styles.Render("~/Content/toastr")
<div class="form-horizontal">
@Html.HiddenFor(m => m.MaterialId)
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div>
@if (Model.ImagenViewModel != null){
<img class="img-responsive img-thumbnail img-rounded" src="data:image;base64,@System.Convert.ToBase64String(Model.ImagenViewModel.Contenido)" alt="imagen" style="width: 350px; height: 350px" />
}
else {
<img class="img-responsive img-thumbnail img-rounded" src="~/Content/images/no-disponible.png" alt="imagen" style="width: 350px; height: 350px" />
}
</div>
<div class="form-group">
<div class="col-md-offset-0 col-sm-offset-0 col-sm-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled"> <!-- don't give a name === doesn't send on POST/GET -->
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-danger image-preview-clear" style="display: none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-info image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="upload" /> <!-- rename it -->
</div>
</span>
</div><!-- /input-group image-preview [TO HERE]-->
</div>
</div>
<div class="form-group row">
<br>
<div class="col-sm-10">
<input type="submit" class="btn btn-success" value="Guardar" />
<input aria-hidden="true" class="btn btn-primary" data-dismiss="modal" id="btncancel" type="button" value="Aceptar" />
</div>
</div>
</div>
}
</div>
</body>
</html>
这是我用来将视图显示为弹出窗口的脚本:
$('#btnPhoto').click(function (e) {
//e.preventDefault();
$('#btnPhoto').attr('data-modal', '');
$('#btnPhoto').attr('data-toggle', 'modal');
//$('#btnCreateUser').attr('href', '#myModal');
/*$('#myModalContent').load("/Usuario/CreatePopUp" + '/' + $('#dropDownList').val(), function () {*/
$('#myModalContent').load(this.href, function () {
$('#myModal').modal({
/*backdrop: 'static',*/
keyboard: true
}, 'show');
//bindFormSpecial(this);
$('#btnPhoto').removeAttr('data-modal');
$('#btnPhoto').removeAttr('data-toggle');
});
return false;
});
$('form').submit(function (event) {
event.preventDefault();
var $form = $(this);
$.ajax({
url: this.action,
type: this.method,
contentType: this.enctype,
data: $(this).serialize(),
success: function (result) {
if (result.success) {
$('#myModal').modal('hide');
//Refresh
location.reload();
} else {
$('#myModalContent').html(result);
bindForm();
}
}
});
});
问题是,由于某种原因,弹出窗口仅作为模式打开一次,即在单击表的第一条记录时,也就是说,如果我有 4 条记录,当我单击第一个时,弹出窗口显示为弹出窗口记录,但是当单击第二个、第三个或任何其他时,它会停止显示为 Popup 并显示为普通视图。
知道会发生什么吗?
我建议的第一件事是不要使用 @Html.Raw() 来生成表格
使用
@
将值绑定到 html也不要
$('#btnPhoto')
在表中使用此选择器,定义一个类并将其用作选择器那么选择器将是
问题出在这一行:
这就是通过 jQuery 为锚点(链接、链接)指定“单击时应该做什么”(click() 方法调用内的匿名函数内的所有内容)的行为。
问题是什么?“调用”模式的行为正在对一个选择器进行,正如它所写的那样,它调用一个 id=btnPhoto 的元素(# 符号指的是 id)
如果我将该 ID 添加到其余链接怎么办?您仍然会遇到类似的问题,因为 id 属性旨在用于一个且仅一个元素。如果您希望在不同元素之间共享一个行为,您应该使用一个类。
使用类会如何?假设该类名为 popUpLink (要重用您拥有的东西,那么您将拥有:
在脚本中你会有这样的东西