javascript - 简单确认模式/弹出窗口-MVC 5/Bootstrap 3

Question

我正在尝试遵循简单的模式/弹出式指南，以便有一个很好的删除确认对话框，但我似乎永远无法让它们中的任何一个工作。

我目前正在处理的那个只是淡出屏幕但没有出现对话。这个摘自: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">&times;</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>

我当前的 deleteFunction 是这样工作的:

按钮

<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;
            }
        });
    }

我想要的只是一个简单的小删除确认。

我现在已经查看了 20 多个指南，但仍然无法正确实现任何内容。 (也在 Chrome 中运行调试)

这是我的整个 View ，也许有什么冲突......？ (所有这些都是新手)

感谢您的所有帮助!

@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">&times;</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")

Answer 1

不知道为什么这这么难，但最终我成功了。

按钮

<!-- 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>

模态

<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">&times;</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>

注意:#@item.ID 是我的 @model 的 View ID，因为我的 View 构建了一个 List我的数据库中的项目。