Show Dropbox Selected Value In Model Mvc

 admin  
Show Dropbox Selected Value In Model Mvc 7,5/10 2800 votes
  1. May 10, 2013  In above code, I’m checking what the selected value was using LINQ query and then using that value inside SelectList. Now, DropDownList will look at the provided default selected value.
  2. Apr 08, 2013  Hi, Use Quick watch and check your Model Collection if List is coming along with it. I Hope you can get only the selected item not the list.
-->

I am trying to hide and show div in my mvc 5 project using dropdownlist change event, i have researched, and luckily i found this code online, but it doesn't seem to work for me, i will appreciate if anyone could point at where i am making mistakes. Thanks in advance.

by Rick Anderson

This tutorial will teach you the basics of working with the DropDownList helper and the ListBox helper in an ASP.NET MVC Web application. You can use Microsoft Visual Web Developer 2010 Express Service Pack 1, which is a free version of Microsoft Visual Studio to follow the tutorial. Before you start, make sure you've installed the prerequisites listed below. You can install all of them by clicking the following link: Web Platform Installer. Alternatively, you can individually install the prerequisites using the following links:

  • SQL Server Compact 4.0(runtime + tools support)

If you're using Visual Studio 2010 instead of Visual Web Developer 2010, install the prerequisites by clicking the following link: Visual Studio 2010 prerequisites. This tutorial assumes you have completed the Intro to ASP.NET MVC tutorial or theASP.NET MVC Music Store tutorial or you are familiar with ASP.NET MVC development. This tutorial starts with a modified project from the ASP.NET MVC Music Store tutorial. You can download the starter project with the following link Download the C# version.

A Visual Web Developer project with the completed tutorial C# source code is available to accompany this topic. Download.

What You'll Build

You'll create action methods and views that use the DropDownList helper to select a category. You will also use jQuery to add an insert category dialog that can be used when a new category (such as genre or artist) is needed. Below is a screenshot of the Create view showing links to add a new genre and add a new artist.

Selected

Skills You'll Learn

Here's what you'll learn:

  • How to use the DropDownList helper to select category data.
  • How to add a jQuery dialog to add new categories.

Getting Started

Start by downloading the starter project with the following link, Download. In Windows Explorer, right click on the DDL_Starter.zip file and select properties. In the DDL_Starter.zip Properties dialog box, select Unblock.

Right click the DDL_Starter.zip file and select Extract All to unzip the file. Open the StartMusicStore.sln file with Visual Web Developer 2010 Express ('Visual Web Developer' or 'VWD' for short) or Visual Studio 2010.

Press CTRL+F5 to run the application and click the Test link.

Select the Select Movie Category (Simple) link. A Movie Type Select list is displayed, with Comedy the selected value.

Model

Right click in the browser and select view source. The HTML for the page is displayed. The code below shows the HTML for the select element.

You can see that each item in the select list has a value (0 for Action, 1 for Drama, 2 for Comedy and 3 for Science Fiction) and a display name (Action, Drama, Comedy and Science Fiction). The code above is standard HTML for a select list.

Selected

Change the select list to Drama and hit the Submit button. The URL in the browser is http://localhost:2468/Home/CategoryChosen?MovieType=1 and the page displays You Selected: 1.

Open the ControllersHomeController.cs file and examine the SelectCategory method.

The DropDownList helper used to create an HTML select list requires a IEnumerable<SelectListItem >, either explicitly or implicitly. That is, you can pass the IEnumerable<SelectListItem > explicitly to the DropDownList helper or you can add the IEnumerable<SelectListItem > to the ViewBag using the same name for the SelectListItem as the model property. Passing in the SelectListItem implicitly and explicitly is covered in the next part of the tutorial. The code above shows the simplest possible way to create an IEnumerable<SelectListItem > and populate it with text and values. Note the ComedySelectListItem has the Selected property set to true; this will cause the rendered select list to show Comedy as the selected item in the list.

The IEnumerable<SelectListItem > created above is added to the ViewBag with the name MovieType. This is how we pass the IEnumerable<SelectListItem > implicitly to the DropDownList helper shown below.

Open the ViewsHomeSelectCategory.cshtml file and examine the markup.

On the third line, we set the layout to Views/Shared/_Simple_Layout.cshtml, which is a simplified version of the standard layout file. We do this to keep the display and rendered HTML simple.

In this sample we are not changing the state of the application, so we will submit the data using an HTTP GET, not HTTP POST. See the W3C section Quick Checklist for Choosing HTTP GET or POST. Because we are not changing the application and posting the form, we use the Html.BeginForm overload that allows us to specify the action method, controller and form method (HTTP POST or HTTP GET). Typically views contain the Html.BeginForm overload that takes no parameters. The no parameter version defaults to posting the form data to the POST version of the same action method and controller.

The following line

passes a string argument to the DropDownList helper. This string, 'MovieType' in our example, does two things:

  • It provides the key for the DropDownList helper to find a IEnumerable<SelectListItem > in the ViewBag.
  • It is). The completed code is shown below:

    In the code above, we are adding the HTML attribute and attribute value class = 'chzn-select'. The @ character preceding class has nothing to do with the Razor view engine. class is a C# keyword. C# keywords cannot be used as identifiers unless they include @ as a prefix. In the example above, @class is a valid identifier but class is not because class is a keyword.

    Add references to the Chosen/chosen.jquery.js and Chosen/chosen.css files. The Chosen/chosen.jquery.js and implements the functionally of the Chosen plugin. The Chosen/chosen.css file provides the styling. Add these references to the bottom of the ViewsHomeMultiSelectCountry.cshtml file. The following code shows how to reference the Chosen plugin.

    Activate the Chosen plugin using the class name used in the Html.ListBox code. In the example above, the class name is chzn-select. Add the following line to the bottom of the ViewsHomeMultiSelectCountry.cshtml view file. This line activates the Chosen plugin.

    The following line is the syntax to call the jQuery ready function, which selects the DOM element with class name chzn-select.

    The wrapped set returned from the above call then applies the chosen method (.chosen();), which hooks up the Chosen plugin.

    The following code shows the completed ViewsHomeMultiSelectCountry.cshtml view file.

    Run the application and navigate to the MultiSelectCountry view. Try adding and deleting countries. The sample download provided also contains a MultiCountryVM method and view that implements the MultiSelectCountry functionality using a view model instead of a ViewBag.

    In the next section you'll see how the ASP.NET MVC scaffolding mechanism works with the DropDownList helper.

Posted by7 months ago
Archived

Hello,


I am pretty new to mvc as I am trying to make my first web application. I have a drop down list on my form that allows the user to select a month. I can not figure out how to get the selected value in the controller. Please see below for the code I have so far. Any help is greatly appreciated.


View:

@Html.DropDownList('Month',

new SelectList(Enum.GetValues(typeof(Month))),

'Current Month',

new { @class = 'form-control' })


Controller - I just get January no matter what is selected.

public ActionResult Populate(Compare_List Model)

{

//pass month selection

string val = Model.monthselect.ToString();

Show Dropbox Selected Value In Model Mvc 1

}

Model

namespace NLC.Models

{


public enum Month

Show Dropbox Selected Value In Model Mvc Code

{


January,

February,

March,

April,

May,

June,

July,

Auguest,

September,

October,

November,

December

}

public class Compare_List



{

public Month monthselect { get; set; }

}

6 comments
   Coments are closed