CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc
tett
tett

Reputation: 605

How to display a dialog box with buttons when a href attribute is clicked in MVC5?

I have a href attribute defined like this:

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

And the point is that, when it is clicked, I want to display a pop-up or dialog box in my app, which will ask a question to the user, and will have a yes or no as an answer. And then according to the pressed button, I want to navigate to a different view. I'm pretty sure I need to use jQuery UI for creating the dialog, but how can create it with buttons and assign different views to them, and also how can I trigger it when the href attribute is pressed?

Upvotes: 0

Views: 572

Answers (2)

Gjohn
Gjohn

Reputation: 1281

Jquery UI's implementation allows you to define your buttons to be anything you want it to be. See this for example

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

You can also embed a view inside your dialog by simply replacing the content in the modal window. You can achieve this by doing an ajax call to your action method have the action return the partial view you want to show in the dialog and then simply using jquery to append the contents within the proper html tags.

Upvotes: 1

HeadCode
HeadCode

Reputation: 2828

You don't have to use jquery unless you want to.

<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';
    }
}

If you want to make custom buttons you can use jqueryui to do that. Here is a JSFiddle that shows how to do it. Note the external resources loaded in order to make the fiddle work.

Upvotes: 2

Related Questions