Вызов всплывающего окна после заполнение таблицы ajax

@Adordin · Регистрация: 21.01.2020

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

Здравствуйте, форумчане! Не знаю, по адресу пишу или нет. Поправите если что))
Ситуация такая. Я создал проект на ASP NET MVC5. И все вроде хорошо, но я пытаюсь внедрить технологию SignalR, который тесно связан с js и ajax, на что у меня опыта маловато. Вот мой код и что я пытаюсь реализовать.
Делаю запрос к базе и выкидываю все в JSON

C#
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
38
39
public class Primer
    {
        SqlConnection con = new SqlConnection(System.Web.Configuration.WebConfigurationManager.ConnectionStrings["SignalR"].ConnectionString);
        public List<ADPersons> GetAllMessages()
        {
            var messages = new List<ADPersons>();
            using (var cmd = new SqlCommand(@"SELECT [DisplayName],[Department],[Title],[EmailAddress],[MobilePhone],[Fax],[POBox],[OfficePhone],[ObjectGUID] FROM [dbo].[ADusers] WHERE [Enabled] = 1 and [Department] is not null", con))
            {
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                var dependency = new SqlDependency(cmd);
                dependency.OnChange += new OnChangeEventHandler(dependency_OnChange);
                DataSet ds = new DataSet();
                da.Fill(ds);
                for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                {
                    messages.Add(item: new ADPersons
                    {
                        DisplayName = ds.Tables[0].Rows[i][0].ToString(),
                        Department = ds.Tables[0].Rows[i][1].ToString(),
                        Title = ds.Tables[0].Rows[i][2].ToString(),
                        EmailAddress = ds.Tables[0].Rows[i][3].ToString(),
                        MobilePhone = ds.Tables[0].Rows[i][4].ToString(),
                        Fax = ds.Tables[0].Rows[i][5].ToString(),
                        POBox = ds.Tables[0].Rows[i][6].ToString(),
                        OfficePhone = ds.Tables[0].Rows[i][7].ToString(),
                        ObjectGUID = (Guid)ds.Tables[0].Rows[i][8]
                    });
                }
            }
            return messages;
        }
 
public JsonResult GetMessages()
        {
            List<ADPersons> messages = new List<ADPersons>();
            Repository r = new Primer();
            messages = r.GetAllMessages();
            return Json(messages, JsonRequestBehavior.AllowGet);
        }

В представление добавляю таблицу такого формата:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<table class="table align-middle mb-0 bg-white">
                            <thead class="bg-light">
                                <tr>
                                    <th>ФИО</th>
                                    <th>Должность</th>
                                    <th>Мобильный</th>
                                    <th>Городской</th>
                                    <th>Внутренний</th>
                                </tr>
                            </thead>
                            <tbody id="messagesTable">
                            </tbody>
                        </table>

При помощи JS получаю данные и записываю их в таблицу:

JavaScript
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
function getAllMessages() {
    var tbl = $('#messagesTable');
    $.ajax({
        url: '/Dashboard/GetMessages',
        contentType: 'application/html ; charset:utf-8',
        type: 'GET',
        dataType: 'html',
        success: function (result) {
            var a2 = JSON.parse(result);
            tbl.empty();
            console.log(a2);
            var data = {};
            console.log(data);
            var Departments = [];
            $.each(a2, function () {
                if (typeof data[this.Department] == "undefined") {
                    data[this.Department] = [];
                }
                data[this.Department].push(this);
                if (Departments.indexOf(this.Department) == -1) {
                    Departments.push(this.Department);
                }
            });
            Departments = Departments.sort();
            $.each(Departments, function () {
                tbl.append(
                    $("<tr>").append(
                        $('<th>', { 'class': "table-success"}).attr("colspan", "5")
                            .html(this)
                    )
                );
                data[this] = data[this].sort(function (a, b) {
                    return a.Title > b.Title;
                });
                $.each(data[this], function () {
                    tbl.append(
                        $("<tr>").append(
                            $("<td>").append(
                                $('<a>', {'data-modal': "", 'href': "/Dashboard/Details/" + this.ObjectGUID, 'rel': "modal:open", 'id': this.ObjectGUID, 'class': "fw-bold mb-1"}).html(this.DisplayName).append(
                                    $('<p>', { 'class': "text-muted mb-0>" }).html(this.EmailAddress)
                                )
                            ),
                            $("<td>").append(
                                $('<p>', { 'class': "fw-normal mb-1>" }).html(this.Title)
                            ),
                            $("<td>").append(
                                $('<p>', { 'class': "fw-normal mb-1>" }).html(this.MobilePhone)
                            ),
                            $("<td>").append(
                                $('<p>', { 'class': "fw-normal mb-1>" }).html(this.Fax)
                            ),
                            $("<td>").append(
                                $('<p>', { 'class': "fw-normal mb-1>" }).html(this.OfficePhone)
                            )
                        )
                    );
                });
            });
        }
    })
}

Ну и конечно же каждый раз его вызываю когда SignalR сообщает об изменениях

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function () {
    
    var notifications = $.connection.myHub;
    
    notifications.client.updateMessages = function () {
        getAllMessages()
    };
   
    $.connection.hub.start().done(function () {
        console.log("connection started")
       
        getAllMessages();
    }).fail(function (e) {
        alert(e);
    });
});

Данные в режиме реально времени я вижу и все работает, но: Я хочу вызвать модельное окно при нажатии на ФИО. Поэтому была добавлен Guid человека, а именно в этой строчке

JavaScript
1
$('<a>', {'data-modal': "", 'href': "/Dashboard/Details/" + this.ObjectGUID, 'rel': "modal:open", 'id': this.ObjectGUID, 'class': "fw-bold mb-1"}).html(this.DisplayName).append(

Так же на view добавил div с модельным окном

HTML5
1
2
3
<div id="modDialog" class="modal fade">
    <div id="dialogContent" class="modal-dialog"></div>
</div>

А в контролере обработан метод Details

C#
1
2
3
4
5
6
7
8
9
public ActionResult Details(Guid id)
        {
            
            var supplier = AD_DWEntities.ADusers.FirstOrDefault(O => O.ObjectGUID == id);
            if (supplier == null)
                return HttpNotFound();
            return PartialView("Details", supplier);
           
        }

И пробовал написать JS для вызова окна

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(function () {
    $.ajaxSetup({ cache: false });
    $(".DisplayName").click(function (e) {
 
        e.preventDefault();
        $.get(this.href, function (data) {
            $('#dialogContent').html(data);
            $('#modDialog').modal('show');
        });
    });
})

Но окно не вызывается, хотя на частичную страницу переходит...

Новые блоги и статьи Все статьи Все блоги /
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек SDL3 и Box2D из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия SDL 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual. . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»

Опции темы