I work in an ASP MVC application, I have the need to show an image in a Modal window using bootstrap, the modal window will be called from a cell in a table, this is my HTML to shoot the modal:
<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>
This is the HTMl fragment where the modal window is added:
<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>
This is the HTMl for the view that should be shown as Modal:
@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>
Here is the script I use to show the views as popup:
$('#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();
}
}
});
});
The issue is that for some reason the PopUp opens only once as modal and it is when you click on the first record of the table, that is, if I have 4 records the popup will be it shows as popup when I click on the first record but when I click on the second, third or any other stops showing as Popup and shows as a normal view .
Any idea what is happening?