Вызов всплывающего окна после заполнение таблицы 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');
        });
    });
})

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

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .