如何在MVC5中單擊href屬性時顯示帶按鈕的對話框？

Question

我有這樣定義的href屬性：

<a href='#' class="need-buttons"><img src="~/Content/img/suggest1.png" class="need-buttons pull-right"></a> 

而且一點是，單擊時，我想顯示在我的應用程序一個彈出窗口或對話框，它會問到的問題用戶，並將有一個是或否作爲答案。然後根據按下的按鈕，我想導航到不同的視圖。我很確定我需要使用jQuery UI創建對話框，但是如何使用按鈕創建它併爲它們分配不同視圖，以及在按下href屬性時如何觸發它？

Answer 1

除非需要，否則不必使用jquery。

<a href="javascript:chooser();" class="need-buttons"><img src="~/Content/img/suggest1.png" class="need-buttons pull-right"></a> 

function chooser(){ 
    var res = confirm("Do you want to go to url1?"); 
    if(res === true){ 
     alert("option1"); // or document.location = 'url1'; 
    } 
    else { 
     alert("option2"); // or document.location = 'url2'; 
    } 
} 

如果你想定製按鈕，你可以使用jqueryui來做到這一點。這是一個JSFiddle，顯示如何做到這一點。請注意爲了使小提琴工作而加載的外部資源。

Answer 2

Jquery UI的實現允許你將你的按鈕定義爲你想要的任何東西。看到這個例子

$(document).ready(function() { 
    dialog = $("#dialog-form").dialog({ 
     autoOpen: false, 
     height: 300, 
     width: 350, 
     modal: true, 
     buttons: { 
     "Create an account": addUser, 
     Cancel: function() { 
      dialog.dialog("close"); 
     } 
     }, 
     close: function() { 
     form[0].reset(); 
     allFields.removeClass("ui-state-error"); 
     } 
    }); 

    $("#clicker").on('click', function() { 
     dialog.dialog("open"); 
     }); 
    }); 
}); 

你也可以在你的對話框中嵌入一個視圖，只需更換模態窗口中的內容。您可以通過對您的操作方法執行ajax調用來實現此目的。讓操作返回您想要在對話框中顯示的部分視圖，然後使用jquery將內容附加到正確的html標記中。