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

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

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

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

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

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

Что я имею:

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

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

HTML5

...
<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#

[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

@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

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

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

function myClickHandler(id) {
        $.get('/MyController/Details/' + id, function (data) {
            $('#dialogContent').html(data);
            $('#Dialog').modal('show');
        });
    }

@Lutk · 26.10.2016, 11:48

Не по теме:

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

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

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

Решение