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");
       });
   });
});

您还可以通过简单地替换模态窗口中的内容在对话框中嵌入视图。您可以通过对action方法执行ajax调用来实现此操作，让操作返回要在对话框中显示的局部视图，然后只需使用jquery将内容附加到正确的html标记内。

在MVC5中单击href属性时如何显示带按钮的对话框？

2 个答案: