創建菜單項的確定/取消模式彈出框

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>