Динамическое обновление страницы

@Boodja · Регистрация: 08.09.2016

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

У меня возникла проблема в проекте: есть DropDownListFor, из которого нужно динамически получать данные и отправлять их в функцию контроллера.
Сама функция контроллера:

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
        private readonly AirportContext _db = new AirportContext();
        private readonly UserContext db = new UserContext();
        ...
        ...
        [HttpGet]
        public ActionResult CreateTicket(string user,int ID=0)
        {
            if (ID==0)
                ID = 1;
            IEnumerable<SelectListItem> statusList = new SelectList(new List<string> { "Забронирован", "Куплен" });
            IEnumerable<SelectListItem> flights = new SelectList(_db.Flights.ToList(), "FlightId", "FlightId");
            Flight xx = _db.Flights.First(f => f.FlightId == ID);
            var number = xx.Seats;
            int[] mass = new int[number];
            List<int>arr = new List<int>(mass);
            for (int i = 0; i < number; i++)
            {
                arr[i] = i+1;
            }
            foreach (var y in _db.Tickets.ToList())
            {
                for (int i = 0; i < number; i++)
                {
                    if (y.Seat.Equals(arr[i]) && y.Flightid.Equals(ID))
                    {
                        arr.Remove(arr[i]);
                        number--;
                        continue;
                    }
                }
            }
            IEnumerable<SelectListItem> seats = new SelectList(new List<int>(arr));
            ViewData["flights"] = flights;
            ViewData["statusList"] = statusList;
            ViewData["seats"] = seats;
            Flight fly = _db.Flights.First(fl => fl.FlightId == ID);
            int counter = _db.Tickets.Count(x => x.Flightid == ID);
            int s = fly.Seats - counter;
            int ska = fly.Seats;
            ViewBag.S = s;
            ViewBag.AllSeats = ska;
            if (User.Identity.Name.Equals("admin"))
            {
                var model = new Tickets()
                {
                    Flightid = ID
                };
                return View(model);
            }
            else if (!User.Identity.Name.Equals("admin"))
            {
                User x =db.Users.First(f=>f.Name==user);
                var model = new Tickets()
                {
                    Flightid = ID,
                    Lname=x.Lname,
                    Fname=x.Fname,
                    Sname=x.Sname
                };
                return View(model);
            }
            else
            {
                var model=new Tickets();
                return View(model);
            }
        }

Представление:

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
54
55
@model AirPortIS.Models.Tickets
 
 
@{ 
    ViewBag.Title = "Добавление билета";
}
    <h2>Добавление билета:</h2>
 
<form>
    <table>
        @Html.ValidationSummary()
        <thead>
            <tr>
                @{ if (User.Identity.Name.Equals("admin"))
                 {
                    <td>№ билета</td>}}
                <td>№ рейса</td>
                @{ if (User.Identity.Name.Equals("admin"))
                 {
                    <td>Место</td>}}
                <td>Мест свободно</td>
                <td>Фамилия пассажира</td>
                <td>Имя пассажира</td>
                <td>Отчество пассажира</td>
                @{ if (User.Identity.Name.Equals("admin"))
                 {
                    <td>Статус билета</td>}}
                <td></td>
                <td></td>
            </tr>
            </thead>
            <tr>
                @{ if (User.Identity.Name.Equals("admin"))
                 {
                    <td>@Html.EditorFor(model => Model.TicketId)</td>}}
                <td>@Html.DropDownListFor(model => Model.Flightid, ViewData["flights"] as IEnumerable<SelectListItem>)</td>
                @{ if (User.Identity.Name.Equals("admin"))
                 {
                    <td>@Html.DropDownListFor(model => model.Seat, ViewData["seats"] as IEnumerable<SelectListItem>)</td>}}
                <td>@ViewBag.S/@ViewBag.AllSeats</td>
                <td>@Html.EditorFor(model => Model.Lname)</td>
                <td>@Html.EditorFor(model => Model.Fname)</td>
                <td>@Html.EditorFor(model => Model.Sname)</td>
                @{ if (User.Identity.Name.Equals("admin"))
                 {
                    <td>@Html.DropDownListFor(model => Model.Status, ViewData["statusList"] as IEnumerable<SelectListItem>)</td>}}
                <td>
                        <button class="btn-success" type="submit" formmethod="post">Добавить билет</button>
                </td>
                <td >
                    <button class="btn-danger" type="submit" formaction="Tickets">Отмена</button>
                </td>
            </tr>
    </table>
</form>

Так же есть два способа попасть в это представление: первый передает Id рейса и имя пользователя; второй не передает ничего, поэтому в коде есть дурацкие строчки "if (ID==0) ID = 1;".
Вот так выглядит представление, когда на него попали вторым способом:

Хотелось бы, чтобы при смене № Рейса в контроллер отправлялся Id равный строчке DropDownList`а, и, соответственно, менялось количество свободных мест(их зависимость от Id реализована в функции).

@Lutk · 09.09.2016, 09:30

Вам нужно смотреть в сторону ajax. На стороне клиента на событие 'change' у select навешивается обработчик, который отправляет ajax запрос с нужными параметрами по нужному адресу, а ответ записывает в необходимое место.

@Boodja · 09.09.2016, 11:10 **[ТС]**

Спасибо, но можно ли написать, как это примерно должно выглядеть. Я вообще не понимаю ajax, пытался что-то сделать, но ничего не работало.
Да и тему бы не создал, если бы в тупик не зашел.

@Lutk · 09.09.2016, 12:30

В простом виде:

Есть select с событием onchange и поле количества свободных мест

HTML5
1
2
3
4
5
<select onchange="updateFreePlaces(this);">
  <option value="1" selected="selected">Рейс 1</option>
  <option value="2">Рейс 2</option>
</select>
<span id="free-places"></span>

И соответствующая функция

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function updateFreePlaces(source) {
  // Создаем jq объект select'а.
  var $select = $(source);
 
  // Получаем id выбранного рейса.
  var flightId = $select.find('option:selected').val();
 
  // Посылаем ajax запрос на некий url.
  $.ajax({
    url: '/flights/getFreePlaces',
    type: 'get', // ..или post, смотрите сами
    data: { id: flightId } // Параметры запроса.
  })
  // Callback, когда приходит ответ.
  .done(function (data) {
    // Обновляем кол-во свободных мест.
    $('#free-places').text(data);
  });
}

Соответственно на стороне сервера по указанному url должно быть обычное действие некоторого контроллера, которое на вход получает параметр int id (id рейса), а там уже делает свою магию и возвращает результат.

P.S. Писал по памяти, мб где косякнул, извиняйся. В данном примере подразумевается, что действие вернет тупо число, поэтому параметр data никак не парсится, а вставляется как есть.

Добавлено через 6 минут
А вообще можно сразу брать кол-во свободных мест по рейсам и складывать их куда-нить, например в атрибут data-free-places соответствующих option. В таком виде ajax вообще не нужен, но актуальность может не соответствовать действительности без обновления страницы.

@Boodja · 09.09.2016, 14:01 **[ТС]**

Сообщение от Lutk

В простом виде:

Есть select с событием onchange и поле количества свободных мест

HTML5
1
2
3
4
5
<select onchange="updateFreePlaces(this);">
  <option value="1" selected="selected">Рейс 1</option>
  <option value="2">Рейс 2</option>
</select>
<span id="free-places"></span>

И соответствующая функция

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function updateFreePlaces(source) {
  // Создаем jq объект select'а.
  var $select = $(source);
 
  // Получаем id выбранного рейса.
  var flightId = $select.find('option:selected').val();
 
  // Посылаем ajax запрос на некий url.
  $.ajax({
    url: '/flights/getFreePlaces',
    type: 'get', // ..или post, смотрите сами
    data: { id: flightId } // Параметры запроса.
  })
  // Callback, когда приходит ответ.
  .done(function (data) {
    // Обновляем кол-во свободных мест.
    $('#free-places').text(data);
  });
}

Соответственно на стороне сервера по указанному url должно быть обычное действие некоторого контроллера, которое на вход получает параметр int id (id рейса), а там уже делает свою магию и возвращает результат.

P.S. Писал по памяти, мб где косякнул, извиняйся. В данном примере подразумевается, что действие вернет тупо число, поэтому параметр data никак не парсится, а вставляется как есть.

Добавлено через 6 минут
А вообще можно сразу брать кол-во свободных мест по рейсам и складывать их куда-нить, например в атрибут data-free-places соответствующих option. В таком виде ajax вообще не нужен, но актуальность может не соответствовать действительности без обновления страницы.

Спасибо, но не то маленько)
Я видимо не так объяснил все...
Вот написал скрипт, но не знаю как отправить данные в контроллер

HTML5
1
2
3
4
5
6
7
8
9
10
@section scripts
{
 
    <script type="text/javascript">
        $(".Drop").change(function (e) {
            e.preventDefault();
            var id = $(".Drop").val();
        });
    </script>
}

Если знаете, подскажите.

@Lutk · 09.09.2016, 14:22

$.ajax и есть отправка запроса на сервер. А там все зависит от маршрутизации, чтобы url соответствовал нужному контроллеру и действию в нем.
Если вы не трогали правила маршрутизации по умолчанию, т.е. url имеет вид {controller}/{action}, то чтобы отправить запрос к контроллеру Tickets, действию GetFree(int id), где id и будет тот самый id рейса, то:

JavaScript
1
2
3
4
5
6
7
8
$.ajax({
  url: '/Tickets/GetFree',
  type: 'post',
  data: { id: Id }
})
.done(function (data) {
  $('#free-places').text(data);
});

Первая часть - отправка запроса, вторая - обработка ответа.

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@Lutk 71 / 66 / 29 Регистрация: 28.10.2013 Сообщений: 248
	09.09.2016, 09:30
	Вам нужно смотреть в сторону ajax. На стороне клиента на событие 'change' у select навешивается обработчик, который отправляет ajax запрос с нужными параметрами по нужному адресу, а ответ записывает в необходимое место. 0

@Boodja 0 / 0 / 0 Регистрация: 08.09.2016 Сообщений: 3
	09.09.2016, 11:10 [ТС]
	Спасибо, но можно ли написать, как это примерно должно выглядеть. Я вообще не понимаю ajax, пытался что-то сделать, но ничего не работало. Да и тему бы не создал, если бы в тупик не зашел. 0