Форум программистов, компьютерный форум, киберфорум
Наши страницы
C#: ASP.NET Core
Войти
Регистрация
Восстановить пароль
 
JAtisto
0 / 0 / 0
Регистрация: 15.06.2016
Сообщений: 47
1

Как обновить элемент при нажатии на элемент div?

20.01.2019, 15:51. Просмотров 350. Ответов 8

При нажатии на сообщения в зависимости от условия, нужно что бы сменился цвет.

Вот код:

**Html**

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
    @foreach (var item in Model)
    {
        if (item.Status == "New")
        {
            <div class="panel panel-default" data-id="@item.Id"  onclick="GetMessageId(this)" id="clickId">
                <div class="panel-heading">
                    <a class="btn btn-success" data-toggle="collapse"  href="#imageGallery-@item.Id" style="width: 100%">
                        <h4 style="color: white; text-align: left; width: auto; z-index: 3">
                            От: @Html.DisplayFor(modelItem => item.EmployeeTo.Name) -
                            <strong> @Html.DisplayFor(modelItem => item.Title)</strong>
                        </h4>
                    </a>
                </div>
                <div class="panel-body collapse" id="imageGallery-@item.Id">
                    <strong style="color: dimgrey">Заголовок:</strong><h5> @Html.DisplayFor(modelItem => item.Title)</h5><br />
                    <div style="width: 100%">
                        <strong style="color: dimgrey">Содержимое</strong> <h4>@Html.DisplayFor(modelItem => item.Content)</h4>
                    </div> <br /><hr />
                    <p style="color: dimgrey">Дата отправки: @Html.DisplayFor(modelItem => item.DateFrom) </p>
                    <a class="btn btn-primary" onclick="showModalSendOrderAdmin()">Переслать</a>
                </div>
            </div>
        }
    }
 
 
        @foreach (var item in Model)
    {
        if (item.Status == "Open")
        {
            <div class="panel panel-default" data-id="@item.Id" onclick="GetMessageIdOpen(this)">
                <div class="panel-heading">
                    <a class="btn btn-info" data-toggle="collapse"  id="clickIdOpen" href="#imageGallery-@item.Id" style="width: 100%">
                        <h4 style="color: white; text-align: left; width: auto; z-index: 3">
                            От: @Html.DisplayFor(modelItem => item.EmployeeTo.Name) -
                            <strong > @Html.DisplayFor(modelItem => item.Title)</strong>
                        </h4>
                    </a>
                </div>
                <div class="panel-body collapse" id="imageGallery-@item.Id">
                    <strong style="color: dimgrey">Заголовок:</strong><h5> @Html.DisplayFor(modelItem => item.Title)</h5><br />
                    <div style="width: 100%">
                        <strong style="color: dimgrey">Содержимое</strong> <h4>@Html.DisplayFor(modelItem => item.Content)</h4>
                    </div> <br /><hr/>
                    <p style="color: dimgrey">Дата отправки: @Html.DisplayFor(modelItem => item.DateFrom) </p>
                    <p style="color: dimgrey">Отправленно администратору: @Html.DisplayFor(modelItem => item.DateTo) </p>
    
                    <a class="btn btn-primary" onclick="showModalSendOrderAdmin()">Переслать</a>
    
                </div>
            </div>
        }
    }
**Ajax запрос**
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
    var idMessage;
        function GetMessageId(event) {
            
        idMessage = event.getAttribute('data-id');
    
            $.ajax({
                type: 'POST',
                url: '@Url.Action("OrderStatus", "OrderEmployees")',
                data: {
                    idMessage: idMessage
                },
                success: function (data) {
                    console.log('success!');
                }
            });
        }
 
 
    var idMessageOpen;
        function GetMessageIdOpen(event) {
            idMessageOpen = event.getAttribute('data-id');
    
            $.ajax({
                type: 'POST',
                url: '@Url.Action("OrderStatusOpen", "OrderEmployees")',
                data: {
                    idMessageOpen: idMessageOpen
                },
                success: function (data) {
                    console.log('success!');
                }
            });
        }
**Метод**
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
    public ActionResult OrderStatus(string idMessage)
            {
                var messageId = _context.OrderEmployees.SingleOrDefault(m => m.Id == idMessage);
                if (messageId != null && messageId.Status == "New")
                {
                    messageId.Status = "Open";
                    _context.Update(messageId);
                    _context.SaveChanges();
                }
    
                return RedirectToAction(nameof(Index));
            }
 
 
 
    public ActionResult OrderStatus(string idMessage)
            {
                var messageId = _context.OrderEmployees.SingleOrDefault(m => m.Id == idMessage);
                if (messageId != null && messageId.Status == "New")
                {
                    messageId.Status = "Open";
                    _context.Update(messageId);
                    _context.SaveChanges();
                }
    
                return RedirectToAction(nameof(Index));
            }

Сделал так. Цвета меняются но только после перезагрузки страницы (F5). Как можно обновить этот элемент без перезагрузки.
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
20.01.2019, 15:51
Ответы с готовыми решениями:

Как избежать повторного внесения данных в БД при нажатии обновить страницу
Всем пт! В PHP эта проблема решалась проверкой метода запроса страницы. Тут при нажатии f5...

GridView: при нажатии на кнопку "Обновить" вылетают оба RequireFieldValidator
Имеется GridView1 в котором содержатся категории. Также отдельно имеется 2 текстбокса для ввода...

Как пронумеровать массив по строкам, при условии, что строковый элемент не равен пустому значению?
Помогите пожалуйста !!! Как пронумеровать массив по строкам, при условии, что строковый элемент не...

При нажатии на элемент открывается всплывающее окно, содержащее этот же элемент
Задача : На странице есть несколько дивов, при нажатии на любой элемент должно открыться...

Как при нажатии отображать элемент?
Есть такая заготовка &lt;button id=&quot;OpenWindow&quot;&gt; Create new Post &lt;/button&gt; &lt;input type=&quot;text&quot;...

8
yurickas
49 / 41 / 15
Регистрация: 25.11.2015
Сообщений: 428
Завершенные тесты: 1
21.01.2019, 17:16 2
Если без перезагрузки и использовать ajax - только через JS, но тогда придется работать через webapi. По другому никак. Если используешь MVC - только перезагрузка. Пишутся отдельные action контроллера и назад к странице приходишь через returnUrl, который перед этим генерируешь сам.

Добавлено через 5 минут
Не посмотрел сразу как воно там. У тебя в контроллере твои action надо вызывать не через ajax, а через линки <a> тогда и страница перегрузится и цвета поменяются. Если хочешь без перезагрузки, как писал выше Ajax + webapi
1
JAtisto
0 / 0 / 0
Регистрация: 15.06.2016
Сообщений: 47
21.01.2019, 18:29  [ТС] 3
yurickas, через линки <a> по подробней не подскажешь. Имеешь ввиду asp-action="OrderStatus" и так далее.... это имелось ввиду?
0
yurickas
49 / 41 / 15
Регистрация: 25.11.2015
Сообщений: 428
Завершенные тесты: 1
22.01.2019, 09:03 4
Цитата Сообщение от JAtisto Посмотреть сообщение
через линки <a> по подробней не подскажешь. Имеешь ввиду asp-action="OrderStatus" и так далее.... это имелось ввиду?
угу
0
JAtisto
0 / 0 / 0
Регистрация: 15.06.2016
Сообщений: 47
22.01.2019, 09:17  [ТС] 5
yurickas, вчера пробовал так не работает.
0
HF
168 / 162 / 53
Регистрация: 09.09.2011
Сообщений: 599
Завершенные тесты: 19
22.01.2019, 09:29 6
Ну дак вы почему так делаете?
Цитата Сообщение от JAtisto Посмотреть сообщение
return RedirectToAction(nameof(Index));
Возвращаете просто результат запроса, а в функции его обрабатываете.

C#
1
2
3
4
5
public ActionResult OrderStatus(string idMessage)
* * * * * * {
* * * * * * * * ...
* * * * * * * * return Content("ok");
* * * * * * }
Вариантов возвращать значения куча. Вот самые простые для значений
C#
1
2
3
return Content("ok");
return Json(new {Status = true, Message = "Какой-то текст"});
...
HTML5
1
2
3
4
* * * * * * * * success: function (data) {
* * * * * * * * * * console.log('result success or failed or something else:');
* * * * * * * * * * console.log(data);
* * * * * * * * }
0
JAtisto
0 / 0 / 0
Регистрация: 15.06.2016
Сообщений: 47
22.01.2019, 13:17  [ТС] 7
HF, Сделал так

HTML5
1
<a asp-area="" asp-controller="OrderEmployeeAdmins" asp-action="OrderStatusOpenAdmin" asp-route-id="@item.Id" class="btn btn-info in"  data-toggle="collapse"  id="clickIdOpen" style="width: 100%">
Работает, но перестало открываться сообщение. Так как если убрать href="#imageGallery-@item.Id" нет ссылки на блок с инфой. А, если оставить то ругается на href. Может есть способ решить это?
0
yurickas
49 / 41 / 15
Регистрация: 25.11.2015
Сообщений: 428
Завершенные тесты: 1
22.01.2019, 14:34 8
Ты сначала определись, что хочешь. С перегрузом через MVC или без перегруза через JS
0
JAtisto
0 / 0 / 0
Регистрация: 15.06.2016
Сообщений: 47
23.01.2019, 07:40  [ТС] 9
yurickas, Да, мне собственно не важно. Главное что бы при нажатии менялся цвет и не схлопывался
0
23.01.2019, 07:40
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
23.01.2019, 07:40

Как при нажатии на элемент ListWidget выполнить слот
Как при нажатии на элемент ListWidget выполнить слот?

Как сделать элемент снова зеленым при нажатии на body?
Есть блок зеленого цвета при нажатии на сей блок он становиться красным. Но при нажатии вне блока...

Как при нажатии на элемент ListBox передать его со всеми свойствами в код
Есть кастомный листбокс, интерфейс каждого итема выбирается селектором, в зависмости от наличия...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru