创建菜单项的确定/取消模式弹出框

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>