Sdscompany.ru

Компьютерный журнал
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Html dropdownlist mvc

Создание HTML-элементов

Итак, в предыдущей статье мы рассмотрели создание и настройку HTML-дескрипторов веб-форм. HTML-форма не имеет особого смысла до тех пор, пока не будут созданы некоторые элементы управления вводом (например, ). В таблице ниже описаны базовые вспомогательные методы, которые доступны для создания элементов , и приведены примеры генерируемой ими HTML-разметки. Во всех этих вспомогательных методах первый аргумент используется для установки значений атрибутов id и name элемента , а второй аргумент служит для установки значения атрибута value.

Каждый из перечисленных вспомогательных методов имеет перегруженную версию. В этой таблице показаны простейшие версии, но можно также предоставить дополнительный аргумент object для указания HTML-атрибутов, как это делалось с элементом .

Генерация элемента управления вводом из свойства модели

Вспомогательные методы, используемые в предыдущем разделе, работают хорошо, но нам по-прежнему необходимо гарантировать, что значение, передаваемое в первом аргументе, соответствует значению модели, которое передается во втором аргументе. Если эти значения не согласованы, инфраструктура ASP.NET MVC Framework не сможет воссоздать объект модели из данных формы, поскольку атрибуты name и значения элементов формы не соответствуют друг другу.

Для каждого метода, перечисленного в таблице выше, доступна перегруженная версия, которая принимает единственный аргумент типа string:

Аргумент string применяется для поиска в данных представления, в объекте ViewBag и в модели представления соответствующего элемента данных, который может использоваться в качестве основы для элемента input. Таким образом, например, если вызвать @Html.TextBox(«DataValue»), то инфраструктура ASP.NET MVC Framework попытается найти элемент данных, который соответствует ключу DataValue. Будут проверяться следующие местоположения:

Первое найденное значение используется для установки атрибута value генерируемой HTML-разметки. (Последняя проверка, в @Model.DataValue, предпринимается, только если модель представления содержит свойство или поле по имени DataValue.)

Если указать строку вроде DataValue.First.Name, поиск становится более сложным. Инфраструктура ASP.NET MVC Framework опробует различные комбинации элементов, разделяемых точками, такие как перечисленные ниже:

Проверяются многие перестановки. И снова будет использоваться первое найденное значение, завершая поиск. С этим приемом связана очевидная проблема производительности, однако помните, что внутри объекта ViewBag обычно содержится совсем немного элементов, так что поиск среди них не должен отнимать значительное время.

Использование строго типизированных вспомогательных методов для создания элементов управления вводом

Каждому базовому вспомогательному методу для создания элементов управления вводом, описанному в таблице выше, соответствует строго типизированный вспомогательный метод. Эти вспомогательные методы перечислены в таблице ниже вместе с примерами HTML-разметки, которую они генерируют. Такие вспомогательные методы могут применяться только со строго типизированными представлениями. (Часть вспомогательных методов генерируют атрибуты, которые помогают обеспечивать проверку достоверности данных форм на стороне клиента, но для краткости в таблице они не приведены.)

How to Create a DropDownList in ASP.NET MVC

Introduction

In this article, We will discuss on how to create a dropdownlist in mvc projects.

Let’s Start

Story starts like this, we have a real world situation to solve.It looks like below.

A simple form to add new stock into warehouse. It consists of a product Dropdownlist, count text box and a submit button.

A database with product and stock table is given.

Hint:
Product table already populated with some products.we want these products in our dropdownlist. Stock table is empty. After form submission, productid of selected product and count from textbox will be added to stock table.

Step 1

Create fresh mvc project.[su_accordion][su_spoiler title=”How to Create a New MVC Project ?”] Open your Visual Studio.
go to FILE > New >Project.


Under Visual C#, select Web.
Name your application, select project the location. Click OK.


Select MVC template, check Mvc. Click OK.

[/su_spoiler][/su_accordion] Fresh MVC Project looks like this.

Step 2

Added ADO. NET Entity model for the DataBase as DbModel.edmx into Model folder and saved connection string as DbModels.

Product model class

Additional ProductCollection property is added to Stock model. we will be using this property for implementing the product Dropdownlist.

It must be marked with [NotMapped] attribute since it is not a column in Stock table.

Step 3

Add Stock controller with an action AddOrEdit like below.

ProductCollection is populated with product items.

Step 4

Create AddOrEdit view, for that right click on the action click on add view. in the next window uncheck layout option.

Now we need to design the form. You can use bootstrap for designing view but I use html table for simplicity.

Define model as first line in the view

Now inside the body, form design can be done like this

[su_quote]Instead of C# List, you can also use IEnumerable Collection[/su_quote]

I don’t know whether you noticed or not we have given form action as AddOrEdit,

So we need HttpPost Action AddOrEdit. where we need to save posted data from the form.

s
Put a Breakpoint in this post Action.Navigate to Stock/AddOrEdit then submit the form with some test data.

After submitting the form you can check our Breakpoint.

So Selected ‘NoteBook’ id 3 and Count 10 is posted to server.after saving them our stock table looks like this.

Now let me update AddOrEdit Get Action like this

Now navigate to Stock/AddOrEdit/1. you can see the same form that we posted. So now you add can functions like Update Or Delete the Stock.

Other Ways to Create DropDown List in MVC

From a hard coded list / Static List

Method-1

you can use same razor code for dropdown list.

Method-2

slight change in razor view

DropDownList Vs DropDownListFor

Both of them are Html Helper Methods to create dropdown list in mvc,First Parameter for these functions determines the name for dropdown list.

If we use DropDownList instead of DropDownListFor, Razor code will look like this

here we need to pass name of control as magic string or name is hard coded here.

If we change Model Property ProductId to something else,during form submission, selected value of dropdown will not bind in post request.

Читать еще:  Php открыть pdf файл

So try to stick with DropDownListFor Method. it will make our dropdown strongly typed.

Plugin For DropDown List

There are plenty of plugins for dropdown list.

Wit attractive features like

  • Search options from dropdown
  • Allow multiple selection
  • and much more

ASP.NET MVC Html.DropDownList SelectedValue

Я попробовал это RC1, а затем обновился до RC2, который не решил проблему.

результат: свойство SelectedValue устанавливается для объекта

результат: все ожидаемые параметры отображаются клиенту, но выбранный атрибут не задан. Элемент в SelectedValue существует в списке, но первый элемент в списке всегда имеет значение по умолчанию selected.

Как я должен это делать?

Обновление благодаря ответу Джона Феминеллы я узнал, в чем проблема. «UserId»-это свойство в модели, к которой мое представление строго типизировано. Когда Html.DropDownList(«UserId » изменяется на любое другое имя, кроме «UserId», выбранное значение отображается правильно.

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

8 Ответов

Вот как я исправил эту проблему:

У меня было следующее:

Изменено следующим образом:

Похоже, что DropDown не должен иметь того же имени, что и ViewData name: s странно, но это сработало.

С MVC RC2 я получаю:

Вы все еще можете назвать DropDown как «UserId» и все еще иметь привязку модели, работающую правильно для вас.

Единственное требование, чтобы это сработало, состоит в том, что ключ ViewData, содержащий SelectList, не имеет того же имени, что и свойство модели, которое вы хотите привязать. В вашем конкретном случае это будет:

Это приведет к созданию элемента select с именем UserId, который имеет то же имя, что и свойство UserId в вашей модели, и поэтому связыватель модели установит его со значением, выбранным в элементе select html, созданном помощником Html.DropDownList.

Я не уверен, почему этот конкретный конструктор Html.DropDownList не выберет значение, указанное в SelectList, когда вы помещаете список выбора в ViewData с ключом, равным имени свойства. Я подозреваю, что это как-то связано с тем, как помощник DropDownList используется в других сценариях, где соглашение заключается в том, что у вас есть SelectList в ViewData с тем же именем, что и свойство в вашей модели. Это будет работать правильно:

Код в предыдущем посте MVC 3 не работает, но это хороший старт. Я все исправлю. Я протестировал этот код, и он работает в MVC 3 Razor C# этот код использует шаблон ViewModel для заполнения свойства, которое возвращает List

в зависимости от того, как вы форматируете выходные данные. Надеюсь, это поможет. Код действительно работает.

Если мы не считаем, что это ошибка, которую команда должна исправить, at lease MSDN должен улучшить документ. Путаница действительно происходит от плохого документа этого. В MSDN он объясняет имя параметров как,

Это просто означает, что конечный html, который он генерирует, будет использовать этот параметр в качестве имени входа select. Но на самом деле это означает нечто большее.

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

Используйте приведенный выше пример,

Если мы будем следовать этому предположению,мы должны определить модель представления для этого связанного представления dropdownlist

Комбинация имеет выбранную опцию ,но также имеет свой набор атрибутов value. Итак, если вы хотите, чтобы ASP.NET MVC2 отображал dropbox, а также имел определенное значение, выбранное (т. е. значения по умолчанию и т. д.), вы должны дать ему значение в рендеринге, как это:

В ASP.NET MVC 3 Вы можете просто добавить свой список в ViewData.

а затем ссылайтесь на него по имени в своем представлении razor.

Вам не нужно вручную «use» список в вызове DropDownList. Делая это таким образом, правильно установите выбранное значение и для меня тоже.

  1. Я еще не пробовал это с помощью движка просмотра веб-форм, но он тоже должен работать.
  2. Я не проверял это в v1 и v2, но это может сработать.

Похожие вопросы:

Я пытаюсь использовать помощник DropDownList для построения списка выбора с selectedvalue в приложении ASP.NET MVC 4, но когда создается выпадающий список, он не имеет никакого выбранного значения.

Я новичок в ASP.NET MVC 3. Я пытаюсь отобразить некоторые параметры в выпадающем списке. Параметры будут имитировать значения в перечислении. Перечисление имеет следующие три значения: public enum.

Я работаю над MVC4, DropdownList не является обязательным SelectedValue. Пожалуйста, найдите мой код ниже, я не понял, где это пошло не так. Я видел SelectList , он имеет SelectedValue, но не.

Get The Drop On ASP.NET MVC DropDownLists

DropDownLists in ASP.NET MVC seem to cause a fair amount of confusion to developers fresh from Web Forms World. This article looks to provide you with all (well, most) of what you need to know to get your DropDownLists working in ASP.NET MVC.

DropDownList, ComboBox, call it what you like, but it always renders as an html select element. It has an opening tag. In between, each «ListItem» is housed within an tag. Optionally, they may be subdivided into elements for logical separation of related options. If you provide a value attribute to an option, that is the value that gets posted back when a form housing the select element is submitted. If you omit the value attribute, the text value of the option gets posted back.

At its simplest, for example if you have a static list of items that needs to appear in a DropDown, you can simply put them in your View as html:

Or, if the list is a little more dynamic, say if you need to ensure that the starting year is incremented by 1 each New Year’s Day:

All of the above will render exactly the same html and end result:

If your data comes from a database, you will more likely use one of the 8 overloads of the Html.DropDownList() extension method to create your DropDown. I won’t cover all overloads, but it is worth looking at the main ones. The first one —

Читать еще:  Cross origin html

public static string DropDownList(this HtmlHelper htmlHelper, string name)

— simply accepts a string. Now the documentation currently says that the string should be the name of the form field, which isn’t particularly helpful. In fact, not only does it provide the resulting select element with a name and an id, but it also acts as the look-up for an item in the ViewBag having the same dynamic property as the string provided. This ViewBag property is then bound to the helper to create the items. Consequently, the ViewBag property must be a collection of SelectListItems . Here’s how to get the Categories from the Northwind sample database using Entity Framework to pass to a DropDownList using the first overload:

Notice that each SelectListItem must have a Value and a Text property assigned. These are bound at run-time to the value attribute of the option elements and the actual text value for the option. Notice also the odd name given to the ViewBag dynamic property «CategoryID». The reason for this is that the CategoryID is the value that will be passed when the form is submitted, so it makes sense to name it like this. In the View, the overload is used:

And that’s all that’s needed to render the following HTML:

The second overload —

public static string DropDownList(this HtmlHelper htmlHelper, string name, IEnumerable selectList)

— is one you quite often see in examples. With this overload, you can return an IEnumerable collection or a SelectList object. We’ll have a look at the View first, before seeing two methods of populating the ViewData with alternative objects:

The first item to go into ViewBag will be the IEnumerable object. The code is pretty well identical to the previous example:

The second passes a SelectList object to ViewBag:

Using a SelectList is slightly tidier in the Controller, and arguably in the View. The SelectList constructor has a couple of overloads which accepts an object representing the selected value:

The above will ensure that «Confections» is selected when the list is rendered:

Default Values

All of the examples so far show the first selectable option visible when the page loads. Most often, however, a default value is desirable, whether this is a blank value or a prompt to the user to «—Select One—» or similar. Another overload takes care of adding this —

public static string DropDownList(this HtmlHelper htmlHelper, string name, IEnumerable selectList, string optionLabel) .

CSS and HTML attributes

Four of the overloads accept parameters for applying HTML attributes to the DropDownList when it is rendered. Two of them accept IDictionary while the other two take an object. The object is an anonymous type. The following examples will both render identical html, applying a css class selector and a client-side onchange() event:

You should notice that the second version (the one using the anonymous type) has a property called «@class». This will render as a literal «class», but needs the @ sign in front of «class» because class is obviously a C# keyword. You might also wonder why there are two ways to add attributes. The second option, using the anonymous object is a lot cleaner and surely would be the sensible choice. However, for one thing, the HTML5 specification includes the ability to add custom attributes to your html mark-up. Each attribute must be prefixed with » data- «. If you attempt to create a property in a C# object with a hyphen in its name, you will receive a compiler error. The Dictionary approach will solve that problem. Update: Since MVC 5, you can use the anonymous type approach with underscores in the property names. These will be converted to hyphens by MVC.

Where’s My AutoPostBack?

One of the most common questions from developers used to the Web Forms model concerns AutoPostBack for DropDownLists in MVC. In Web Forms, it’s easy enough to select your DropDownList in design view, head over to the Properties panel in your IDE and set AutoPostBack to true, or to tick the Use AutoPostBack option on the control’s smart tag. Quite often, since it is that easy, developers give little thought to what happens behind the scenes when AutoPostBack is used. In fact, an onchange attribute is added to the rendered DropDownList, which fires a javascript event handler, causing the form in which the DropDownList is housed to be submitted. This process has to be done manually within MVC. But it’s quite simple. I’ll show two ways of achieving this. One will use the most recent overload (above) which takes an object for htmlAttributes, and the other one will show how the same thing can be done using jQuery, unobtrusively. I haven’t actually shown DropDownLists within a form element so far, but of course a DropDownList is mostly useless outside of one. Here’s the first alternative:

And the second that uses jQuery:

ToolTips

Nothing in the existing set of HtmlHelpers for DropDownLists provides for adding tool tips to select list options at the moment. Tool tips are generated by adding a «title» attribute to each option in the list. Now, this could be achieved by creating your own extension methods that allow you to specify that each option element should have a title, and then apply a value to the title attribute as each option is added to the select list. But that’s a fair amount of work. Or, you could use jQuery to do this really easily:

Читать еще:  Html viewer что это

Strongly Typed Helper

All of the examples so far have illustrated the use of the dynamic ViewBag collection to pass values from Controllers to Views. There are strongly typed Html Helpers for the DropDownList to cater for strongly typed views — with all that Intellisense support and compile-time checking. The following example shows a very simple ViewModel class called SelectViewModel:

Here’s a sample controller action that instantiates a SelectViewModel instance and passes it to the strongly type view:

Notice how the selected item is identified as the IEnumerable collection of SelectListItems is built from the database query. Finally, in the (Razor) view, the dropdown is rendered with a default option added:

Using simple Drop Down Lists in ASP.NET MVC

It’s surprising how many subtle, but frustrating traps one can fall into when building sites with ASP.NET MVC. Creating forms for the web is one of them. It’s common to spend hours on something trivial, such as displaying a selected value in a DropDownList on postback, or getting that selected value in a controller. Quite often it happens when you just start learning ASP.NET MVC or upgrade from an older tech. And boy, is this frustrating as hell – instead of building an actual web app, you spend hours wrestling with the framework.

This article is one of the ‘DropDownList series’ articles that should help you in dealing with DropDownList / SelectList / SelectListItem related problems. Check out other DropDownList articles here:

I want to show you how to build a simple form with a drop down list that’s got “Please select” text as the first option and is based on the list of strings supplied by the controller. I’ll show you how to display that list on a form, how to get user’s selection in the controller, check that user has selected something and render the list back to the user with the value selected.

Sounds deceptively simple, right? Hold that thought for now and have a look at the Microsoft’s own documentation for the @Html.DropDownListFor function. It has 6 different overloads – which one of those do you really need? And what are those mysterious or optionLabel ? Now throw into the mix various ways you can pass the data into the view: ViewBag, ViewData or TempData? Or maybe Model? So you are naturally in the perfect spot to start making mistakes.

We need to clear this up once and for all. In this example I will take you through building a simplistic “Sign Up” form that consists of two fields: Name and State. Both of these fields are required – this way we can test rendering of selected dropdown list value on the postback.

The following bits and pieces are needed:

  • a model to hold user-entered data
  • a controller to handle user requests
  • a view that renders the “Sign Up” form

Here’s the complete code of the solution used in this article. You can also browse the code online or clone the git repository. Now let’s dive right into the details.

Model

As you can see model is pretty simple and reflects the form’s fields except for one property – States . It works together with the State property – while the the State receives user’s selection, States hold a list of all possible selections.

Controller

Controller’s a bit more complex — it consists of 3 action methods and a couple of utility functions.

The most important piece in the controller is the following code (and it’s repeated in both SignUp methods):

As said above, this code runs twice – first when user loads the ‘Sign Up’ page in the browser and the form is displayed, and second time when user submits the form.

Why does it need to happen twice? The nature of browser forms is such that only selected values are posted back, and if you want to display the form after a postback (in case there’s a validation error in one of the form’s controls, for example), you need to populate all the supplementary data again, otherwise controls such as DropDownLists will be just rendered empty.

And View is the final destination where it all comes together with the help of Html.DropDownListFor() function.

Oh, and remember that cryptic optionLabel argument of DropDownListFor function? It’s actually used to render the ‘prompt’ option of the drop down list. I’d never be able to tell that from the name alone!

Also check out my next article on how to use DropDownListFor with enums — you’ll learn how to show enums in readable form in drop down lists and heaps more.

Download the code

Here’s a download link to the complete code of the solution used in this article. You can browse the code online or clone the git repository.

But wait, there’s more

If you don’t want to miss my new articles, sign up to my mailing list below, and learn how to tackle complex problems in ASP.NET MVC with ease, and how to stop wasting hours on trivial problems. Stop that vicios frustration cycle and become a better person overall. I never spam, period.

Download fully tested and 100% working Visual Studio solution with the source code used in this article for FREE — just enter your name and email in the form below, and I’ll send you the download link right away!

Not only you’ll get the complete code for this article, but you’ll also get access to all the source code for all the articles on the site forever, as well as the access to my mailing list, which receives handy time-saving tips on .NET programming.

Ссылка на основную публикацию
Adblock
detector