#jquery #asp.net-mvc-3 #jquery-ui
#jquery #asp.net-mvc-3 #jquery-пользовательский интерфейс
Вопрос:
В моем представлении razor у меня есть таблица с привязками. Одна из ячеек, показанных ниже:
@foreach (MillitarySlot slot in item.SundaySlots)
{
<a style="color:@slot.Color" title="@slot.ToolTip" href="@slot.HRef">@slot.SlotText</a><br />
}
Если пользователь нажимает на любую привязку, мне нужно показать модальный диалог. Как я могу этого добиться?
Ответ №1:
Итак, если вы сделали что-то подобное:
$('a').click(function(e) {
alert('anchor clicked');
});
вы получите это предупреждение при каждом нажатии на привязку на странице — вряд ли это то, что вы хотите. Если вы назначили этим якорям класс, то вы могли бы сделать это:
$('a.myclass').click(function(e) {
alert('anchor clicked');
});
и тогда вы получите предупреждение только для привязок, которые были этого класса. Для части модального диалога вы можете просто заменить ее там, где у меня есть предупреждение, по сути, создав скрытый div на странице для использования в качестве модального диалога. Я сделал что-то вроде этого, и это выглядело примерно так:
$('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',
});
}
);
});
В любом случае, это начало. Вы также можете добавлять кнопки в диалоговое окно и заставлять их выполнять действия, исходя из ваших конкретных потребностей.
Комментарии:
1. Спасибо за ответ. На самом деле совокупность вещей, которые я изменил в своем коде. 1. каким-то образом класс не работал должным образом, поэтому я прикрепляю к событию ready () с помощью «any a в table.tr » 2. И поскольку у меня было строго типизированное представление, я вызываю функцию dialog() в конце тела, следовательно, во время показа диалога весь div готов к рендерингу.
Ответ №2:
Вы могли бы присвоить этому якорю идентификатор (для производительности jQuery) и привязать событие click, которое, например, вызывает модальный диалог через Ajax, и после этого возвращает false (если у пользователя отключен JavaScript, он должен продолжить, иначе появится диалоговое окно)
Комментарии:
1. Спасибо за ответ, но у меня нет никакого контроля над созданием тега привязки, поскольку они создаются из списка. Следовательно, мне пришлось применить $(‘.scheduleTable table tr a’).live(‘click’ ….