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

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

Новые блоги и статьи Все статьи Все блоги /
Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .