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?
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.
You could give that anchor an id ( for jQuery performance ) and bind a click event that gets the modal dialog through Ajax for instance and after that return false ( if the user has JavaScript disabled he should proceed else the dialog shall appear )
