asp.net mvc 3 - JQuery - Need to show modal dialog on any anchor link click on the page

Question

In my razor view, I have got table with the anchors. One of the cell shown below:

@foreach (MillitarySlot slot in item.SundaySlots)
                { 
                    <a style="color:@slot.Color" title="@slot.ToolTip" href="@slot.HRef">@slot.SlotText</a><br />
                }

If user clicks any of the anchor then I need to show modal dialog. How can I achieve this?

Answer 1

So, if you did something like this:

$('a').click(function(e) {
   alert('anchor clicked');
}); 

you'd get that alert for every anchor clicked on the page - not likely what you want. If you assigned those anchors a class, then you could do this:

$('a.myclass').click(function(e) {
   alert('anchor clicked');
}); 

and then you'd get the alert for just the anchors which were of that class. For the modal dialog part, you could just substitute that where I've got the alert, essentially creating a hidden div on the page to use as the modal dialog. I did something like this and it looked something like:

$('a.myclass).click(function () {
   // add the div or reuse it
   var modaldialog = ($('#ModalDialog').length > 0)
     ? $('#ModalDialog')
     : $('<div id="ModalDialog" style="display:hidden"></div>').appendTo('body');
   load up data via ajax call
   $.get('@Url.Action("MyAction", "MyController")', {},
      function (responseText, textStatus, XMLHttpRequest) {
         modaldialog.html(responseText);
         modaldialog.dialog({
            modal: true,
            width: 500,
            title: 'My Modal Dialog',
         });
      }
   );
});

Anyway, that's a start. You can add buttons to the dialog as well and have those do things based on whatever your particular needs are.