Simple Confirmación de Modal/Pop-up -MVC 5/Bootstrap 3
https://stackoverflow.com//questions/24001844
-
20-12-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estoy tratando de seguir a lo largo de con simple Modal/Pop-guías a fin de tener un buen diálogo de Confirmación de eliminación, pero nunca puedo conseguir alguno de ellos para trabajar.
El que estoy trabajando actualmente en simplemente se desvanece la pantalla, pero no el diálogo aparece.Esto es tomado de: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-modals.php
<!-- Button HTML (to Trigger Modal) -->
<a href="#myModal" role="button" class="btn btn-large btn-primary" data-toggle="modal">Launch Demo Modal</a>
<!-- Modal HTML -->
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Confirmation</h3>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
Mi actual deleteFunction funciona como tal:
Botón
<span class="item-delete-button">
<button type="button" onclick="deleteFunction(this)" class="btn btn-danger col-lg-3 col-lg-offset-3"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete</button>
</span>
JQuery
function deleteFunction(element) {
var newID = $(element).closest("td").find("span.ID").text();
$(element).closest("table").removeClass("table-hover");
$(element).closest("tr").css('background-color', 'red');
$(document).ready(function () {
var answer = confirm("Are you sure you want to delete this movie?");
if (answer) {
$.post(
'@Url.Action("customDelete", "Movie")',
{
'id': newID
},
function (data) { },
"json"
);
$(element).closest("tr").remove();
return true;
} else {
$(element).closest("tr").css('background-color', 'initial');
return false;
}
});
}
Todo lo que quiero es un poco simple Confirmación de eliminación.
He mirado en más de 20 guías y todavía no puede conseguir cualquier cosa para implementar correctamente.(ejecución de Depuración en Chrome así)
Aquí es mi punto de Vista, tal vez algo que está en conflicto...?(nuevo en todo esto)
Gracias por cualquier ayuda!
@model IEnumerable<WebApplication2.Entities.Movie>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
table tr button {
opacity: 0.5;
float: right;
}
table tr:hover button {
opacity: 1;
}
</style>
<br />
<br />
<br />
<br />
<div class="panel panel-primary" style="width:100%">
<div class="panel-heading">
<span style="font-size: 30px; font-style:oblique"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-film"></span>Movies</span></span>
</div>
<div class="col-lg-offset-10 col-lg-2">
<button type="button" style="margin-top:3px; margin-bottom:3px" class="btn btn-success btn-block" onclick="location.href='@Url.Action("Create")';return false;"><span style="font-size:larger"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Movie</span></button>
</div>
<table class="table table-striped table-hover table-responsive table-condensed">
<tr>
<th>
<h4 style="font-size:x-large"><span style="font-weight:bolder">Title</span></h4>
</th>
<th>
<h4 style="font-size:x-large"><span style="font-weight:bolder">Release Date</span></h4>
</th>
<th>
<h4 style="font-size:x-large"><span style="font-weight:bolder">@Html.DisplayNameFor(model => model.Description)</span></h4>
</th>
<th>
@using (Html.BeginForm("Index", "Movie"))
{
<div class="dropdown">
<select class="btn btn-group-lg btn-default col-lg-4" style="margin-top: 15px; width:40%; height: 36px; opacity: 1" data-toggle="dropdown" name="Filter">
<option value="0" disabled selected>Filter By...</option>
<option value="1">Movie Name</option>
<option value="2">Description</option>
</select>
</div>
<input type="text" name="searchString" class="col-lg-6" style="margin-top: 16px; width:48%; text-align:center; height:35px; font-size:20px" placeholder="enter text" />
<button type="submit" class="btn btn-group-lg btn-primary col-lg-2 glyphicon glyphicon-arrow-right" style="margin-top: 15px; width:12%; height:36px; opacity:1" value="" />
}
</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td class="col-lg-2">
<span class="item-display">
<span style="font-size: 17px;">
@Html.DisplayFor(modelItem => item.Name)
</span>
</span>
<span class="item-field">
@Html.EditorFor(modelItem => item.Name)
</span>
</td>
<td class="col-lg-3">
<span class="item-display">
<span style="font-size: 17px;">
@Html.DisplayFor(modelItem => item.ReleaseDate)
</span>
</span>
<span class="item-field">
@Html.EditorFor(modelItem => item.ReleaseDate)
</span>
</td>
<td class="col-lg-3">
<span class="item-display">
<span style="font-size: 17px; font-style:italic">
@Html.DisplayFor(modelItem => item.Description)
</span>
</span>
<span class="item-field">
@Html.EditorFor(modelItem => item.Description)
</span>
</td>
<td class="col-lg-3 col-lg-offset-1">
<span style="visibility:hidden" class="ID col-lg-1">@Html.DisplayFor(modelItem => item.ID)</span>
<span class="item-edit-button">
<button type="button" onclick="editFunction(this)" class=" btn btn-warning col-lg-3 col-lg-offset-0"><span style="margin-right: 5px" class="glyphicon glyphicon-pencil"></span>Edit</button>
</span>
<span class="item-save-button">
<button type="button" onclick="saveFunction(this)" class="btn btn-success col-lg-3 col-lg-offset-4"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Save</button>
</span>
@*<span class="item-delete-button">
<button type="button" onclick="deleteFunction(this)" class="btn btn-danger col-lg-3 col-lg-offset-3"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete</button>
</span>*@
<!-- Button HTML (to Trigger Modal) -->
<span class="item-delete-button">
<a href="#myModal" role="button" class="btn btn-large btn-primary" data-toggle="modal">Launch Demo Modal</a>
</span>
<!-- Modal HTML -->
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Confirmation</h3>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="12">
<p style="font-size: 17px; font-style: italic; font-family: 'Roboto', sans-serif">
Movie ID: @Html.DisplayFor(modelItem => item.ID)
<br />
Placeholder
</p>
</td>
</tr>
}
</table>
<span style="font-style: italic; font-size: 15px; font-family: 'Roboto', sans-serif; padding-top:0px" />Click Movie for details</span>
</div>
<script>
$(function () {
$("td[colspan=12]").find("p").hide();
$("td[colspan=12]").addClass("nopadding");
$("tr").click(function () {
var $target = $(this);
var $detailsTd = $target.find("td[colspan=12]");
if ($detailsTd.length) {
$detailsTd.find("p").slideUp();
$detailsTd.addClass("nopadding");
} else {
$detailsTd = $target.next().find("td[colspan=12]");
$detailsTd.find("p").slideToggle();
$detailsTd.toggleClass("nopadding");
}
});
});
</script>
<script>
function editFunction(element) {
$(element).closest("span").hide();
$(element).closest("td").find("span.item-save-button").show();
$(element).closest("td").find("span.item-delete-button").hide();
$(element).closest("td").prev("td").find("span.item-display")
.hide()
.next("span.item-field")
.show();
$(element).closest("td").prev("td").prev("td").find("span.item-display")
.hide()
.next("span.item-field")
.show();
$(element).closest("td").prev("td").prev("td").prev("td").find("span.item-display")
.hide()
.next("span.item-field")
.show();
}
function saveFunction(element) {
var three = $(element).closest("td").prev("td").find("span.item-field").find(":input:first").val();
var two = $(element).closest("td").prev("td").prev("td").find("span.item-field").find(":input:first").val();
var one = $(element).closest("td").prev("td").prev("td").prev("td").find("span.item-field").find(":input:first").val();
if (one == "" || three == "" || two == "") {
if (one == "") {
alert("invalid name");
}
if (two == "") {
alert("invalid date");
}
if (three == "") {
alert("invalid desc");
}
} else {
$(element).closest("span").hide();
$(element).closest("td").find("span.item-edit-button").show();
$(element).closest("td").find("span.item-delete-button").show();
$(element).closest("td").prev("td").find("span.item-display").html($(element).closest("td").prev("td").find("span.item-field").find(":input:first").val());
$(element).closest("td").prev("td").find("span.item-display")
.show()
.next("span.item-field")
.hide();
$(element).closest("td").prev("td").prev("td").find("span.item-display").html($(element).closest("td").prev("td").prev("td").find("span.item-field").find(":input:first").val());
$(element).closest("td").prev("td").prev("td").find("span.item-display")
.show()
.next("span.item-field")
.hide();
$(element).closest("td").prev("td").prev("td").prev("td").find("span.item-display").html($(element).closest("td").prev("td").prev("td").prev("td").find("span.item-field").find(":input:first").val());
$(element).closest("td").prev("td").prev("td").prev("td").find("span.item-display")
.show()
.next("span.item-field")
.hide();
var newID = $(element).closest("td").find("span.ID").text();
var newName = $(element).closest("td").prev("td").prev("td").prev("td").find("span.item-display").text();
var newRelease = $(element).closest("td").prev("td").prev("td").find("span.item-display").text();
var newDescription = $(element).closest("td").prev("td").find("span.item-field").find(":input:first").val();
$.post(
'@Url.Action("customEdit", "Movie")',
{
'id': newID,
'name': newName,
'date': newRelease,
'desc': newDescription
},
function (data) { },
"json"
);
}
}
function deleteFunction(element) {
var newID = $(element).closest("td").find("span.ID").text();
$(element).closest("table").removeClass("table-hover");
$(element).closest("tr").css('background-color', 'red');
$(document).ready(function () {
var answer = confirm("Are you sure you want to delete this movie?");
if (answer) {
$.post(
'@Url.Action("customDelete", "Movie")',
{
'id': newID
},
function (data) { },
"json"
);
$(element).closest("tr").remove();
return true;
} else {
$(element).closest("tr").css('background-color', 'initial');
return false;
}
});
}
</script>
@Scripts.Render("~/bundles/myscript")
Solución
No sé por qué esto era tan difícil, pero finalmente conseguí que funcione.
Botón
<!-- Modal Button-->
<span class="item-delete-button">
<button class="btn btn-danger col-lg-3 col-lg-offset-3" data-toggle="modal" data-target="#@item.ID" onclick="deleteStart(this)">
Delete
</button>
</span>
Modal
<div class="modal fade" id="@item.ID" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Delete</h4>
</div>
<div class="modal-body">
<span style="font-size: 20px">Are you sure you want to delete Employee: @Html.DisplayFor(modelItem => item.YOUR_ITEM)?</span>
</div>
<div class="modal-footer">
<button type="button" onclick="deleteStopped(this)" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" onclick="deleteFunction(this)" class="btn btn-danger">Confirm Delete</button>
</div>
</div>
</div>
</div>
NOTA: #@item.ID, es mi @model's ID para mi punto de Vista, ya que mi Vista se construyó un List de los elementos de mi base de datos.
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
