Question

我有一个下面的索引页面，我有一个div pageContent，用作容器 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"));
                        });
                    });
                });

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

我怎么能在这里实现呢？

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>

为菜单项

1 个答案: