twitter-bootstrap 简单确认模态/弹出-MVC 5/Bootstrap 3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24001844/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-21 20:52:32 来源:igfitidea点击:
Simple Confirmation Modal/Pop-up -MVC 5/Bootstrap 3
提问by Austin
I am trying to follow along with simple Modal/Pop-up guides in order have a nice Delete Confirmation dialogue but I can never seem to get any of them to work.
我正在尝试遵循简单的模态/弹出式指南，以便有一个很好的删除确认对话框，但我似乎永远无法让它们中的任何一个工作。
The one I am currently working on simply fades the screen but no dialogue appears. This one is taken from: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-modals.php
我目前正在处理的那个只是淡出屏幕，但没有出现任何对话。这个取自：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>
My current deleteFunction works as such:
我目前的 deleteFunction 是这样工作的：
Button
按钮
<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;
}
});
}
All I want is a simple little Delete Confirmation.
我想要的只是一个简单的小删除确认。
I have looked at over 20 some guides now and still cannot get anything to implement correctly. (running Debug in Chrome as well)
我现在已经查看了 20 多个指南，但仍然无法正确实施任何内容。（也在 Chrome 中运行调试）
Here is my entire View, maybe something is conflicting...? (new to all of this)
这是我的整个视图，也许有些东西是矛盾的......？（所有这些都是新的）
Thank you for any and all help!
感谢您的任何帮助！
@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")
采纳答案by Austin
Not sure why this was so hard, but eventually I got it to work.
不知道为什么这这么难，但最终我让它工作了。
Button
按钮
<!-- 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>
NOTE: #@item.ID, is my @model's ID for my View, as my View built a Listof items from my database.
注意：#@item.ID, 是我@model的视图的 ID，因为我的视图List从我的数据库构建了一个项目。
