Модальное окно не открывается

@bodynar · Регистрация: 14.03.2015

Студворк — интернет-сервис помощи студентам

Доброго времени суток.

Написал по гайду всплывающее окно, которое отображает частичное представление - все работает.

Решил применить технологию в другом представлении - работать нормально не захотело.

Что я имею:

Кликните здесь для просмотра всего текста

PartialView, который находится внутри другого View

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
...
<div id="Dialog" class="modal fade">
    <div id="dialogContent" class="modal-dialog"></div>
</div>
       ...
    @foreach (var item in Model)
    {
        <tr>
            <td>@Html.DisplayFor(x => item.Id)</td>
            <th>@Html.DisplayFor(x => item.ManInfo.Initals)</th>
            <th>@Html.DisplayFor(x => item.Post)</th>
            <th>@Html.DisplayFor(x => item.Departament.Name)</th>
            <td>
                @Html.ActionLink("Редактировать", "Edit", new { id = item.Id }) |
                @Html.ActionLink("Полные данные", "Details", new { id = item.Id }, new { id = "empItem" }) |
                @if (User.IsInRole("admin"))
                {
                    @Html.ActionLink("Удалить", "Delete", new { id = item.Id }, new { onclick = "return confirm('Вы уверены?');" })
                }
            </td>
        </tr>
    }
 
</table>
 
<script type="text/javascript">
    $(function () {
        $.ajaxSetup({ cache: false });
        $("#empItem").click(function (e) {
            e.preventDefault();
            $.get(this.href, function (data) {
                $('#dialogContent').html(data);
                $('#Dialog').modal('show');
            });
        });
    });
</script>

Действие в контроллере

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
[HttpGet]
        public ActionResult Details(int? id)
        {
            if (id == null)
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
 
            Employee employee = db.Employees.Find(id);
 
            if (employee == null)
                return HttpNotFound();
 
            return PartialView("_Details", employee);
        }

Ну и соответственно PartialView _Details.cshtml

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@model Models.Employee
<div class="modal-content">
    <div class="modal-header">
        <button class="close" data-dismiss="modal" area-hidden="true">X</button>
        <p>Данные на сотрудника:</p>
    </div>
    <div class="modal-body">
        <table class="table">
            <tr>
                <th>@Html.DisplayNameFor(model => model.ManInfo.SecondName)</th>
                <th>@Html.DisplayNameFor(model => model.ManInfo.FirstName)</th>
                <th>@Html.DisplayNameFor(model => model.ManInfo.MiddleName)</th>
            </tr>
            <tr>
                <th>@Html.DisplayFor(model => model.ManInfo.SecondName)</th>
                <th>@Html.DisplayFor(model => model.ManInfo.FirstName)</th>
                <th>@Html.DisplayFor(model => model.ManInfo.MiddleName)</th>
            </tr>
        </table>
    </div>
</div>
 
}

В чем проблема: Если в списке (откуда вызывается всплывающее окно) более 1 записи, то по клику на 1 запись - всегда будет всплывающее окно. А по клику на 2й и следующих записях окно не появляется, а осуществляется переход на запрошенную страницу (а это PartialView).

Также ещё один момент: Если несколько раз вызывать всплывающее окно на 1 записи - оно будет стабильно появляться.

Кто может подсказать в чем моя проблема?

Спасибо.

@lvlkoo · 20.10.2016, 21:18

bodynar, проблема в том что у вас генерируются элементы в однаковым ид "#empItem" в цикле, а так как вы устаналиваете евент клика после загрузки страницы возникает путаница.

вам нужно создать функцию обработчик клика, и использовать ее

JavaScript
1
2
3
4
5
6
function myClickHandler(element) {
            $.get(element.href, function (data) {
                $('#dialogContent').html(data);
                $('#Dialog').modal('show');
            });
    }

HTML5
1
@Html.ActionLink("Полные данные", "Details", new { id = item.Id }, new { @onclick="myClickHandler(this)" })

@bodynar · 20.10.2016, 23:22 **[ТС]**

lvlkoo, Спасибо.

Ваше исправление помогло.. почти.

Теперь на каждом элементе задний фон затеняется как при отображении модального окна и сразу происходит переход по ссылке.

Я думаю проблема в том, что в скрипте отсутствует строка

JavaScript
1
e.preventDefault();

Но я пока что слаб в js\jq и не совсем понимаю откуда взять эту переменную.

Добавлено через 6 минут
lvlkoo, Прошу простить. Секунда гугла решила проблему.

HTML5
1
@Html.ActionLink("Полные данные", "Details", new { id = item.Id }, new { @onclick = "myClickHandler(event, this)" })

JavaScript
1
2
3
4
5
6
7
8
function myClickHandler(event, element) {
        $.ajaxSetup({ cache: false });
        event.preventDefault();
        $.get(element.href, function (data) {
            $('#dialogContent').html(data);
            $('#Dialog').modal('show');
        });
    }

@lvlkoo · 21.10.2016, 00:16

bodynar, вообще подобное делаеться не с помощью actionlink, так как он генерирует ссылку, можной обойтись без e.preventDefault(), написав А тег как

HTML5
1
<a href="#/" onclick = "myClickHandler(this)">Полные данные</a>

Так будет правильнее

И таким образом вы в принципе можете передать нужный вам ид как аргумент функции

HTML5
1
<a href="#/" onclick = "myClickHandler('@item.Id)">Полные данные</a>

JavaScript
1
2
3
4
5
6
function myClickHandler(id) {
        $.get('/MyController/Details/' + id, function (data) {
            $('#dialogContent').html(data);
            $('#Dialog').modal('show');
        });
    }

@Lutk · 26.10.2016, 11:48

Не по теме:

Я бы вообще тэг A не использовал, ибо можно ткнуть "пкм -> открыть в новой вкладке" и получить не то, что подразумевалось. Либо уж пусть содержит корректную ссылку на отдельную страницу, но при обычном щелчке открывает модальное окно.

Новые блоги и статьи Все статьи Все блоги /
Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.
Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .

@Lutk
	26.10.2016, 11:48
	Не по теме: Я бы вообще тэг A не использовал, ибо можно ткнуть "пкм -> открыть в новой вкладке" и получить не то, что подразумевалось. Либо уж пусть содержит корректную ссылку на отдельную страницу, но при обычном щелчке открывает модальное окно. 0

Модальное окно не открывается

Решение