为菜单项创建确定/取消模式弹出窗口

Question

我在下面有一个索引页面，我有一个div页面内容，用作容器3 个不同的部分页面。加载的默认部分页面。这是我的索引页代码

        @model Solution.Model.Projectstatusviewmodel
        <div id="ProjID">
            <div id="pjls">
                <label for="SelectProjID">Project:</label>
                @Html.DropDownList("mydrp", Model.ProjectsInfoSelectList, Model.SelectedProject, new { id = "", @class = "yel", @onchange = "javascript:GetStatusDate(this.value);" })
            </div>   
        </div>
            <ul id="menu">
                    <li class="clLink1">@Html.ActionLink("link1", "link1method", "Home")</li>
                    <li class="clLink2">@Html.ActionLink("link2", "link2method", "Home")</li>
                    <li class="clLink3">@Html.ActionLink("link3", "link3method", "Home")</li>
                </ul>
        <div id="pageContent"></div>

以下是处理不同导航的代码

        $(document).ready(function () {
                    //Prepare the partial views. When page loads display the first partial view as default
                    //then process others.
                    $(function () {
                        //Load the first link's content on document ready
                        var firstLinkHref = $("#menu li a:first").eq(0).attr("href");
                        $("#pageContent").load(firstLinkHref);
                        $("#menu li a").click(function (e) {
                            e.preventDefault();
                            $("#pageContent").load($(this).attr("href"));
                        });
                    });
                });

问题：我在部分页面中有一个默认加载的表单。当用户完成此操作时表单并单击第二个或第三个链接，我希望用户收到保存其工作的提示否则一切都会丢失。它将更像是一个确定/取消警报框。

我怎样才能在这里实现这一目标？

Answer 1

您可以在表单上有一个 id，并有一个确认对话框来警告用户他应该保存，否则数据将丢失：

<form id="firstPage">
...
$("#menu li a").click(function (e) {
    e.preventDefault();
    var firstForm = $('#firstPage');
    var shouldContinue = true;
    if(firstForm.length > 0)
    {
        shouldContinue = confirm("All the data that is not saved will be lost.Do you want to proceed ? ");
    }
    if(shouldContinue){
        $("#pageContent").load($(this).attr("href"));
    }
});

如果要在用户从第一个窗体导航到其余部分视图时警告用户，这将起作用。

另外，为什么不在部分视图之间切换，而是使用链接？您可以使用一个函数将分部视图容器替换为新信息：

$('.links').on('click', function(e) {
    e.preventDefault(); 
    var firstForm = $('#firstPage');
    var shouldContinue = true;
    if(firstForm.length > 0)
    {
        shouldContinue = confirm("All the data that is not saved will be lost.Do you want to proceed ? ");
    }
    if(shouldContinue){
        var $pageContent= $('#pageContent'),
        url = $(this).data('url');
        $.get(url, function(data) {
            $pageContent.replaceWith(data);
        });
    }
}

并在您的页面上显示：

<button class="links" data-url='@Url.Action("link1method","Home")>Link1</button>
<button class="links" data-url='@Url.Action("link2method","Home")>Link2</button>
<button class="links" data-url='@Url.Action("link3method","Home")>Link3</button>