Что нужно передать в параметр html dropdownlist
Перейти к содержимому

Что нужно передать в параметр html dropdownlist

  • автор:

Что нужно передать в параметр html dropdownlist

Хотя мы можем создать любой необходимый хелпер, но в большинстве случаев нам не придется писать свои хелперы, потому что фреймворк MVC уже предоставляет большой набор встроенных html-хелперов, которые позволяют генерировать ту или иную разметку, например, код элеметов форм.

Хелпер Html.BeginForm

Пусть в контроллере определены две версии одного метода Create- для методов POST и GET, например:

[HttpGet] public IActionResult Create() => View(); [HttpPost] public string Create(string name, int age) => $" - ";

В представлении для метода Create для создания формы ввода данных для последующей их отправки на post-версию метода Create мы вполне можем использовать стандартные элементы html, например:

 



Это обычная html-форма, которая по нажатию на кнопку отправляет все введенные данные запросом POST на адрес /Home/Create. Встроенный хелпер BeginForm/EndForm позволяет создать ту же самую форму:

@using(Html.BeginForm("Create", "Home", FormMethod.Post)) < 



>

Метод BeginForm принимает в качестве параметров имя метода действия и имя контроллера, а также тип запроса. Данный хелпер создает как открывающий тег

, так и закрывающий тег

. Поэтому при рендеринге представления в выходной поток у нас получится тот же самый html-код, что и с применением тега form. Поэтому оба способа идентичны.

Но вызов страницы с формой и отправка формы осуществляется одним и тем же действием (как в нашем случае действием Create), то в этом случае можно не указывать в хелпере Html.BeginForm параметры:

@using(Html.BeginForm())

Ввод информации

В предыдущем примере вместе с хелпером Html.BeginForm использовались стандартные элементы html. Однако набор html-хелперов содержит также хелперы для ввода информации пользователем. В MVC определен широкий набор хелперов ввода практически для каждого html-элемента. Что выбрать — хелпер или стандартный элементы ввода html, уже решает сам разработчик.

Вне зависимости от типа все базовые html-хелперы используют как минимум два параметра: первый параметр применяется для установки значений для атрибутов id и name , а второй параметр — для установки значения атрибута value

Html.TextBox

Хелпер Html.TextBox генерирует тег input со значением атрибута type равным text . Хелпер TextBox используют для получения ввода пользователем информации. Так, перепишем предыдущую форму с заменой полей ввода на хелпер Html.TextBox:

@using (Html.BeginForm("Create", "Home", FormMethod.Post)) < 


@Html.TextBox("Name")


@Html.TextBox("Age","", new < type="number" >)

>

Хелпер позволяет установить ряд дополнительных параметров с помощью перегружженных версий. Так, вызов хелпера:

@Html.TextBox("Age","", new < type="number" >)

В качестве второго параметра устанавливает значение по умолчанию (здесь пустая строка). Третий параметр в виде анонимного объекта позволяет задать ряд атрибутов генерируемого html-элемента. Так, в данном случае мы указываем, что поле будет числовое, так как по умолчанию создаваемое поле расценивается как текстовое, то есть с атрибутом type=»text» .

В итоге мы получим практически аналогичный результат:

текстовые поля в asp.net core mvc и c#

Html.Label

Хелпер Html.Label создает элемент , а передаваемый в хелпер параметр определяет значение атрибута for и одновременно текст на элементе. Перегруженная версия хелпера позволяет определить значение атрибута for и текст на метке независимо друг от друга. Например, объявление хелпера Html.Label(«Name», «Имя») создает следующую разметку:

Элемент label представляет простую метку, предназначенную для прикрепления информации к элементам ввода, например, к текстовым полям. Атрибут for элемента label должен содержать id ассоциированного элемента ввода. Если пользователь нажимает на метку, то браузер автоматически передает фокус связанному с этой меткой элементу ввода.

Html.TextArea

Хелпер TextArea используется для создания элемента , который представляет многострочное текстовое поле. Результатом выражения @Html.TextArea(«text», «привет мир»)

будет следующая html-разметка:

 

Обратите внимание, что хелпер декодирует помещаемое в него значение, в том числе и html-теги, (все хелперы декодируют значения моделей и значения атрибутов). Другие версии хелпера TextArea позволяют указать число строк и столбцов, определяющих размер текстового поля.

@Html.TextArea("text", "привет мир", 5, 50, null)

Этот хелпер сгенерирует следующую разметку:

Html.Hidden

Хелпер Html.Hidden генерирует скрытое поле. Например, следующий вызов хелпера:

Html.Password

Html.Password создает поле для ввода пароля. Он похож на хелпер TextBox , но вместо введенных символов отображает маску пароля. Следующий код:

@Html.Password("UserPassword", "val")
Html.RadioButton

Для создания переключателей применяется хелпер Html.RadioButton . Он генерирует элемент input со значением type=»radio» . Для создания группы переключателей, надо присвоить всем им одно и то же имя (свойство name ):

@Html.RadioButton("color", "red") красный 
@Html.RadioButton("color", "blue") синий
@Html.RadioButton("color", "green", true) зеленый

Этот код создает следующую разметку:

 красный 
синий
зеленый

Html.RadioButton в ASP.NET Core MVC и C#

Html.CheckBox

Html.CheckBox применяется для создания элемента флажка или checkbox. Например, следующий код:

@Html.CheckBox("Enable", false)

будет генерировать следующий HTML:

Html.DropDownList

Хелпер Html.DropDownList создает выпадающий список, то есть элемент . Для генерации такого списка нужна коллекция объектов SelectListItem , которые представляют элементы списка. Можно создать коллекцию объектов SelectListItem или использовать хелпер SelectList . Этот хелпер просматривает объекты IEnumerable и преобразуют их в последовательность объектов SelectListItem . Так, следующий код:

@Html.DropDownList("user", new SelectList(new string[] < "Tom", "Sam", "Bob", "Alice" >), "Выберите пользователя")

генерирует следующую разметку:

 

Объект SelectListItem имеет свойства Text (отображаемый текст), Value (само значение, которое может не совпадать с текстом) и Selected . Теперь более сложный пример. Выведем в список коллекцию элементов User:

public record class User(int Id, string Name, int Age);

В контроллере передадим список объектов User через ViewBag:

public IActionResult Create() < var users = new List< new User(1, "Tom", 37), new User(2, "Alice", 33), new User(3, "Sam", 28), new User(4, "Bob", 41), >; ViewBag.Users = new Microsoft.AspNetCore.Mvc.Rendering.SelectList(users, "Id", "Name"); return View(); >

Здесь мы создаем объект SelectList, передавая в его конструктор набор значений (список users), название свойства модели User, которое будет использоваться в качестве значения (Id), и название свойства модели User, которое будет использоваться для отображения в списке. В данном случае необязательно устанавливать два разных свойства, можно было и одно установить и для значения и отображения.

Тогда в представлении мы можем так использовать этот SelectList:

@Html.DropDownList("userid", ViewBag.Users as SelectList)

И при рендеринге представления все элементы SelectList добавятся в выпадающий список

Html.ListBox

Хелпер Html.ListBox , также как и DropDownList , создает элемент , но при этом делает возможным множественное выделение элементов (то есть для атрибута multiple устанавливается значение multiple ). Для создания списка, поддерживающего множественное выделение, вместо SelectList можно использовать класс MultiSelectList :

@Html.ListBox("users", new MultiSelectList(new string[] < "Tom", "Sam", "Bob", "Alice" >))

Этот код генерирует следующую разметку:

  
Html.GetEnumSelectList

Для создания выпадающего списка по перечислению применяется хелпер Html.GetEnumSelectList . Допустим, у нас есть следующее перечисление:

using System.ComponentModel.DataAnnotations; // для атрибута Display public enum TimeOfDay

Тогда в представлении мы сможем вывести выпадающий список значений из этого перечисления:

@using MvcApp @using (Html.BeginForm("Create", "Home", FormMethod.Post)) < @Html.DropDownList("daytime", Html.GetEnumSelectList(typeof(TimeOfDay))) 
>

Что нужно передать в параметр html dropdownlist

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Последнее обновление: 31.10.2015

В прошлом разделе мы создали две модели Player и Team и вывели элементы из таблицы Players на страницу. Теперь посмотрим, как проделать остальные операции с моделями — редактирование, удаление, добавление. Эти действия не сильно отличаются от логики работы с простыми моделями. Единственное отличие — мы должны учитывать навигационное свойство, имеющееся в сложной модели.

Добавление модели

Рассмотрим логику добавления модели Player в таблицу Players. Вначале пропишем в контроллере следующее действие Create:

[HttpGet] public ActionResult Create() < // Формируем список команд для передачи в представление SelectList teams = new SelectList(db.Teams, "Id", "Name"); ViewBag.Teams = teams; return View(); >[HttpPost] public ActionResult Create(Player player) < //Добавляем игрока в таблицу db.Players.Add(player); db.SaveChanges(); // перенаправляем на главную страницу return RedirectToAction("Index"); >

Первый вариант действия Create обрабатывает GET-запрос и выдает представление, передавая в него объект SelectList — список всех команд.

Второй вариант действия получает введенную пользователем в представлении модель и добавляет ее в БД. Рассмотрим само представление Create.cshtml:

@model NavigationProperty.Models.Player @ < ViewBag.Title = "Добавление игрока"; Layout = "~/Views/Shared/_Layout.cshtml"; >

Добавление нового игрока

@using (Html.BeginForm()) <
Футболист

Имя игрока
@Html.EditorFor(model => model.Name)

Возраст
@Html.EditorFor(model => model.Age)

Позиция на поле
@Html.EditorFor(model => model.Position)

Команда
@Html.DropDownListFor(model => model.TeamId, ViewBag.Teams as SelectList)

>
@Html.ActionLink("К списку игроков", "Index")

Как и в случае с простыми моделями, мы привязываем поля к определенному свойству.

Тут следует лишь отметить создание выпадающего списка, из которого мы выбираем команду. Выбираемое значение в этом списке привязывается к свойству модели TeamId.

Редактирование модели

Редактирование работает подобным способом. Определим в контроллере действия, которые отвечают за редактирование:

[HttpGet] public ActionResult Edit(int? id) < if (id == null) < return HttpNotFound(); >// Находим в бд футболиста Player player = db.Players.Find(id); if (player != null) < // Создаем список команд для передачи в представление SelectList teams = new SelectList(db.Teams, "Id", "Name", player.TeamId); ViewBag.Teams = teams; return View(player); >return RedirectToAction(«Index»); > [HttpPost] public ActionResult Edit(Player player)

Здесь мы также формируем список команд, которые мы получаем из БД, в объекте SelectList. И после получения запроса на редактирование определенной модели Player контроллер передает эту модель и список команд в представление Edit.cshtml:

@model NavigationProperty.Models.Player @ < ViewBag.Title = "Edit"; Layout = "~/Views/Shared/_Layout.cshtml"; >

Изменение игрока

@using (Html.BeginForm()) <
Футболист @Html.HiddenFor(model => model.Id)

Имя игрока
@Html.EditorFor(model => model.Name)

Возраст
@Html.EditorFor(model => model.Age)

Позиция на поле
@Html.EditorFor(model => model.Position)

Команда
@Html.DropDownListFor(model => model.TeamId, ViewBag.Teams as SelectList)

>
@Html.ActionLink("Вернуться к списку футболистов", "Index")

Ну и удаление производится также, как и в случае с обычной моделью.

Как передать значение DropDownList в контроллер

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

Прошу помощи я новичок в работе с MVC. Мне нужно передать значение DropDownList в контроллер и по этому значению отсортировать таблицу подгружаемую из бд.

Кликните здесь для просмотра всего текста

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
. @Html.DropDownList("Confirm", new SelectListItem[] < new SelectListItem() , new SelectListItem() , new SelectListItem() > , new < onchange = @"form.submit(this.value);" >) . div class="table-responsive"> table class="table table-bordered table-condensed table-striped table-hover sortable"> @if (Model.Count() == 0) < tr> td colspan="10">Пользователей необнаружено./td> /tr> > else < thead> tr class="danger"> th data-defaultsign="AZ">Id/th> th data-defaultsign="AZ">User/th> /tr> /thead> foreach (var item in Model) < tr> td>@item.Id/td> td>@item.Name/td> /tr> > > /table> /div>

Кликните здесь для просмотра всего текста

1 2 3 4 5 6
public ActionResult Index(int? temp) { using (111Context dc = new 111Context()) return View(dc.Users.Where(m => m.Group == temp).ToList()); }

Кликните здесь для просмотра всего текста

1 2 3 4 5 6 7 8 9 10 11 12
. public class User { public int Id { get; set; } public string Name { get; set; } public int? Group { get; set; } } public class 111Context : DbContext { public DbSetUser> Users { get; set; } } . 

в контроллер значение null приходит, помогите с решением

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Ajax передать значение DropDownList -> Label
Блин не знаю как передать выбранное значение DropDownList в Label. какие будут рекомендации? Что.

Передать значение переменной из вида в контроллер
Собственно, вопрос: Как в контроллере взять значение переменной, объявленной в виде?

Передать значение в контроллер (вызвать действие)
Здравствуйте! Есть допустим скрипт <script></script> в котором есть кнопка "добавить запись в.

Передать значение из представление в контроллер с методом типа JsonResult
Есть представление со следующим скриптом от гугла, который по кнопке выдаёт график, идет вместе с.

управление сложностью
1687 / 1300 / 259
Регистрация: 22.03.2015
Сообщений: 7,545
Записей в блоге: 5
Vadimustus, как-то так:
Контроллер:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
[HttpGet] public ActionResult Create() { // Формируем список команд для передачи в представление SelectList teams = new SelectList(db.Teams, "Id", "Name"); ViewBag.Teams = teams; return View(); } [HttpPost] public ActionResult Create(Player player) { //Добавляем игрока в таблицу db.Players.Add(player); db.SaveChanges(); // перенаправляем на главную страницу return RedirectToAction("Index"); }

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

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
@model FirstMvcApp.Models.Player @ < ViewBag.Title = "Добавление игрока"; Layout = "~/Views/Shared/_Layout.cshtml"; >h2>Добавление нового игрока/h2> @using (Html.BeginForm()) < fieldset> legend>Футболист/legend> p> Имя игрока br /> @Html.EditorFor(model => model.Name) /p> p> Возраст br /> @Html.EditorFor(model => model.Age) /p> p> Позиция на поле br /> @Html.EditorFor(model => model.Position) /p> p> Команда br /> @Html.DropDownListFor(model => model.TeamId, ViewBag.Teams as SelectList) /p> p> input type="submit" value="Добавить игрока" /> /p> /fieldset> >

1496 / 1238 / 244
Регистрация: 04.04.2011
Сообщений: 4,362

Почтальон, Насколько я понял, в сабже речь шла не о добавлении нового игрока, а о сортировке уже полученного списка по выбранной через комбобокс колонке.

По сабжу: Передать модно все, что угодно, главное, чтобы параметры по именам и типам данных совпадали с параметрами вызываемого метода контроллера.
Если через форму, то достаточно присвоить атрибут name элементу :

1 2 3 4 5 6 7 8
@Html.DropDownList("Confirm", new SelectListItem[] < new SelectListItem() , new SelectListItem() , new SelectListItem() > , new < onchange = @"form.submit(this.value)" , name = "group">)

Если через @Html.ActionLink, то то же самое, но перед тем, как «кликнуть» на нем (в коде обработчика JS), нужно засунуть в параметры то, что надо.

В методе контроллера следует указать те параметры, которые ожидаются в HTTP (т.е. указаны в конечном виде в атрибуте href ссылки)

Добавлено через 22 минуты
Перечитал еще раз и подумал, что у Вас при смене «группы» должен выдаваться список игроков этой группы. Порядок сортировки тут не важен (либо всегда одинаков). Тогда передаваемый параметр будет один (колонка не нужна).
Тем проще
Тут уместно использование AJAX и JSON без перечитки всей страницы. Т.е. при смене группы в боксе в JS-обработчике формируется AJAX-запрос на сервер и полученный JSON (точнее сериализованный датасет) укладывается в разметку предварительно очищенной сетки. Это — вариант клиентской разметки. Не рекомендуется при больших объемах информации (свыше 200 строк)
Или без JSON просто указав в ajax-атрибуте UpdateTargetId id блока контента сетки (), но при этом, конечно, нужно создать в проекте маленькие частичное представления с разметкой сетки. Тут не будет заметных тормозов на браузере даже при сетках в несколько тысяч записей.

Схема привязок MVC остается при AJAX неизменной. Т.е.
1) параметры в HTTP == параметрам метода контроллера.
2) Параметры в серверной разметке == параметрам HTTP
3) Возможно использование Модели для привязки — в этом случае в параметрах контроллера только один — Модель, но имена параметров в HTTP (статичной разметке или динамически формируемые JS-кодом) должны совпадать со скалярными свойствами Модели — в этом случае MVC FrameWork при обработке клиентского HTTP сам создаст экземпляр класса Модели и рассует по ее свойствам-полям полученные значения. Код контроллера просто будет извлекать их оттуда по мере работы алгоритма метода.

Выпадающие списки в ASP.NET MVC

Иногда работа c выпадающими списками вызывает некоторые затруднения. Рассмотрим пример, в котором нам нужно создать страницу редактирования музыкального трека. Каждая композиция содержится в каком либо альбоме, имеет название и номер. Это можно изобразить в следующем коде:

@Html.DropDownList("AlbumId", Model.Albums) . @Html.TextBox("Title", Model.Title) . @Html.TextBox("TrackNumber", Model.TrackNumber)

Вспомогательный метод Html.DropDownList работает с объектами SelectListItem. Модель представления можно представить так:

public class EditSongViewModel < public string Title < get; set; >public int TrackNumber < get; set; >public IEnumerable Albums < get; set; >> 

Некоторым разработчикам не нравится использовать типы SelectListItem в моделях представления и вместо этого они конвертируют элементы коллекции в SelectListItem прямо в представлении. Но на самом очень предпочтительно использовать SelectListItem в модели представления, так как модель должна упрощать код в самих представлениях.

Создание коллекции объектов SelectListItem

Существует несколько способов для создания последовательностей объектов SelectListItem. Наиболее подходящим может быть создание метода расширения для последовательности (в нашем случае – объекты Album), в котором коллекция сущностей конвертируется в коллекцию объектов SelectListItem.

public static IEnumerable ToSelectListItems(this IEnumerable albums, int selectedId) < return albums.OrderBy(album =>album.Name) .Select(album => new SelectListItem < Selected = (album.ID == selectedId), Text = album.Name, Value = album.ID.ToString() >); > 

Этот метод можно использользовать так:

model.Albums = _repository.FindAllAlbums().ToSelectItems(selectedId);

Этот код работает, потому что Html.DropDownList принимает в качестве входного параметра IEnumerable .

Можно использовать класс SelectList, но применять его нужно аккуратно. Например, если в SelectList не указать параметры DataTextField и DataValueField, то выпадающий список не будет работать корректно.

// неправильное использование model.Albums = new SelectList( _repository.FindAllAlbums().ToSelectListItems(1) );

Выпадающий список отобразит “System.Web.Mvc.SelectListItem” вместо текстового имени каждого элемента.

Класс SelectList разработан для преобразования элементов, с той же целью, что и наш метод расширения выше (для преобразования элементов в коллекцию SelectListItem), но тут используется позднее связывание. Следующий код будет работать, так как мы указали поля описаний и значений для елементов списка.

// правильное использование model.Albums = new SelectList( _repository.FindAllAlbums(), "ID", "Name" );
Получение выбранного значения

Если для принятия данных формы страницы используется та же сама модель представления, то можно предположить, что стандартный привязчик значений ASP.NET MVC проинициализирует снова коллекцию альбомов и укажет выбранный. Но , к сожалению, это не так — коллекция альбомов будет пустой.

Серверу страница вышлет только идентификатор выбранного альбома. Если нужно получить это значение в модели, то необходимо добавить свойство AlbumID.

public class EditSongViewModel < public int AlbumId < get; set; >public string Title < get; set; >public int TrackNumber < get; set; >public IEnumerable Albums < get; set; >>

И дополнительно код в представлении можно изменить так:

@Html.DropDownListFor(x => x.AlbumId, Model.Albums) . @Html.TextBoxFor(x => x.Title) . @Html.TextBoxFor(x => x.TrackNumber)

Итак, резюмируем главные моменты вышеизложенного:

  • Не используйте SelectList без указания свойств DataTextField и DataValueField.
  • Не ожидайте увидеть коллекцию для выпадающего списка заполненной при обратном ответе.
  • Методы расширения помогают создавать последовательности объектов SelectListItem в строго типизированном коде.
  • Html.DropDownList не обязательно требует SelectList – подойдет любая коллекция объектов SelectListItem.
Комментарии

Никто еще не оставил здесь комментарий.
Войдите, чтобы написать комментарий , или воспользуйтесь формой ниже.

Популярные метки
  • ASP.NET MVC (17)
  • Windows Azure (15)
  • Javascript (12)
  • инвестирование (9)
  • AngularJS (8)
  • ASP.NET Web API (8)
  • Работа (6)
  • SimpleMembership (5)
  • Angular (4)
  • акции (4)
  • Visual Studio (3)
  • Razor (3)
  • TypeScript (3)
  • SEO (3)
  • Version Control (3)
  • Knockout (3)
  • Безопасность (2)
  • jQuery (2)
  • Entity Framework (2)
  • Git (2)
Читают сейчас
  • Внедрение зависимости (dependency injection) в контроллерах ASP.NET MVC
  • Инициализация библиотеки AngularJS в приложениях
  • Angular Universal: Реализация серверной генерации страниц для приложения на Angular 4
  • SSH-ключи генерация и использование
  • Увеличение скорости загрузки веб-страниц асинхронными частичными представлениями ASP.NET MVC

Copyright © CodeHint.ru 2013-2024 (v2.4.7 — работает на Angular Universal)Калькулятор инвест-портфеля

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *