ASP.net MVC Listbox - asp.net-mvc

I have a number of Html.Listbox controls on my view which are being populated by an IEnumberable<SelectListItem>
Is there a way that when the data is populated, that some items are automatically selected?
The particular selectlist items in the IEnumerable are marked as Selected = true, yet this does not convey into the view.
The view is as such:
<%= Html.ListBox("projects", Model.Projects)%>
Thanks.

Sure as always you start by defining a view model that will represent the information you would like to show on the particular view:
public class MyViewModel
{
public string[] SelectedItems { get; set; }
public IEnumerable<SelectListItem> Items { get; set; }
}
then a controller:
public class HomeController : Controller
{
public ActionResult Index()
{
var model = new MyViewModel
{
SelectedItems = new[] { "1", "3" },
Items = new[]
{
new SelectListItem { Value = "1", Text = "Item 1" },
new SelectListItem { Value = "2", Text = "Item 2" },
new SelectListItem { Value = "3", Text = "Item 3" },
}
};
return View(model);
}
}
and finally in your strongly typed view:
<%= Html.ListBoxFor(
x => x.SelectedItems,
new SelectList(Model.Items, "Value", "Text")
) %>
As expected Item 1 and Item 3 will be preselected when the list box is rendered.

Related

Formatting a Drop Down List in ASP.NET MVC

I'm building an app with ASP.NET MVC 4. I'm binding my model to a view. In my view, I need a drop down list. That drop down list needs to show quarters. The quarters should be displayed as "Q1", "Q2", "Q3", and "Q4". My model, only has quarter numbers. They are defined like this:
public List<short> Quarters = new List<short>() { get; set; }
public short? SelectedQuarter = null;
public void Initialize() {
Quarters.Add(1);
Quarters.Add(2);
Quarters.Add(3);
Quarters.Add(4);
}
Somehow, I need to prepend "Q" to each value. However, I'm not sure how to do this in ASP.NET MVC. How does someone do this?
Thanks!
Create a SelectList to be used by DropdownListFor() so that you bind the selected option to property SelectedQuarter, but display the 'friendly' name.
View model
public class MyViewModel
{
[Display(Name = "Quarter")]
[Required]
public short? SelectedQuarter { get; set; } // must be a property, not a field!
IEnumerable<SelectListItem> QuarterList { get; set; }
}
Controller
public ActionResult Edit()
{
MyViewModel model = new MyViewModel();
ConfigureViewModel(model);
return View(model);
}
public ActionResult Edit(MyViewModel model)
{
if(!ModelState.IsValid)
{
ConfigureViewModel(model);
return View(model);
}
// model.SelectedQuarter contains the selected value
}
private void ConfigureViewModel(model)
{
model.SelectedQuarter = new List<SelectListItem>()
{
new SelectListItem() { Value = "1", Text = "Q1" },
new SelectListItem() { Value = "2", Text = "Q2" },
new SelectListItem() { Value = "3", Text = "Q3" },
new SelectListItem() { Value = "4", Text = "Q4" },
}
}
View
#model MyViewModel
#using(Html.BeginForm())
{
#Html.LabelFor(m => m.SelectedQuarter)
#Html.DropDownListFor(m => m.SelectedQuarter, Model.QuarterList, "-Please select-")
#Html.ValidationMessageFor(m => m.SelectedQuarter)
<input type="submit" />
}
Assuming you have this property:
public List<short> Quarters { get; set; }
Then in your view or any other consuming code you can generate a list of strings with something like:
model.Quarters.Select(q => "Q" + q)
or:
model.Quarters.Select(q => string.Format("Q{0}", q))
However, semantically it really feels like this belongs on a view model and not in consuming code. Ideally the view should only ever need to bind directly to properties on the view model, not transform those properties. Something like this:
public IEnumerable<string> QuartersDisplay
{
get { return Quarters.Select(q => string.Format("Q{0}", q)); }
}
Then consuming code can just bind to that property:
model.QuartersDisplay
(If the model is a domain model then I'd recommend introducing a view model between the domain and the view, since this wouldn't belong on a domain model.)
Thinking about this a little more... Do you want one property with both the displays and the backing values for the drop down list? That would likely be a IDictionary<short, string>, I imagine? Something like this:
public IDictionary<short, string> QuartersOptions
{
get { return Quarters.ToDictionary(q => q, q => string.Format("Q{0}", q)); }
}
In which case you'd bind to that property:
model.QuartersOptions
Keep in mind that a drop down list often binds to two things. The property which holds the list of possible values (which is what we've built here) and the property which holds the selected value (which remains your SelectedQuarter property).

Change Selected = true in SelectedListItem in ASP.NET MVC3 View by condition

This is my Model:
public class MyModel{
public string Name { get; set; }
public string listType { get; set; }
public string SelectedItem { get; set; }
}
I have a partial view:
#model List<MyModel>
#{
SelectListItem iEqualTo = new SelectListItem { Text = "Equel To", Value = "EqualTo" };
SelectListItem iNotEqualTo = new SelectListItem { Text = "Not Equal To", Value = "NotEqualTo" };
SelectListItem iGreaterThan = new SelectListItem { Text = "Greater Than", Value = "GreaterThan" };
SelectListItem iLessThan = new SelectListItem { Text = "Less Than", Value = "LessThan" };
SelectListItem iBetween = new SelectListItem { Text = "Between", Value = "Between" };
List<SelectListItem> MyFirstList = new List<SelectListItem>() {
iEqualTo, iNotEqualTo, iGreaterThan, iLessThan, iBetween
};
List<SelectListItem> MySecondList = new List<SelectListItem>() {
iEqualTo, iNotEqualTo
};
}
#foreach(var item in Model) {
if(item.listType =="Firsttype"){
<span> #Html.DropDownList(item.Name , MyFirstList) </span>
} else {
<span> #Html.DropDownList(item.Name , MySecondList) </span>
}
}
So I need Selected = true in List<SelectListItem> in DropDownList that item which name equal to MyModel.SelectedItem? what is your suggestion? In actual my view have more SelectListItem and List<SelectListItem> and for some limitations I can't pass the List<SelectListItem> as my model property and I need to handle it in view. I think to handle it by lambda inline but I don't know is possible, something like this: #Html.DropDownList(item.Name , MySecondList.each(a=> if (a.ToString() == item.SelectedItem) {a.Selected = true})
Is any way to do this? and if I am wrong to use inline lambda does any other way to handle this?
You can use a SelectList, which has a constructor with an IEnumerable and an Object (selected value).
#Html.DropDownList(item.Name, new SelectList(MyFirstList, item.SelectedItem));
EDIT
I think I faced your problem when trying to use a DropDownList in a loop.
You can try to use this generic extension method (in a static "helper" class)
public static IEnumerable<SelectListItem> ToSelectListItem<T, TValue, TText, TSelectedValue>(this IEnumerable<T> enumerable,
Func<T, TText> text,
Func<T, TValue> value,
TSelectedValue selectedValue)
{
return enumerable.Select(item => new SelectListItem
{
Text = text(item).ToString(),
Value = value(item).ToString(),
Selected = value(item).Equals(selectedValue)
}).AsEnumerable();
}
and then
#Html.DropDownList(item.Name, MyFirstList.ToSelectListItem(m => m.Text, m => m.Value, item.SelectedItem)

MVC DropDownList SelectedValue not displaying correctly

I tried searching and didn't find anything that fixed my problem. I have a DropDownList on a Razor view that will not show the the item that I have marked as Selected in the SelectList. Here is the controller code that populates the list:
var statuses = new SelectList(db.OrderStatuses, "ID", "Name", order.Status.ID.ToString());
ViewBag.Statuses = statuses;
return View(vm);
Here is the View code:
<div class="display-label">
Order Status</div>
<div class="editor-field">
#Html.DropDownListFor(model => model.StatusID, (SelectList)ViewBag.Statuses)
#Html.ValidationMessageFor(model => model.StatusID)
</div>
I walk through it and even in the view it has the correct SelectedValue however the DDL always shows the first item in the list regardless of the selected value. Can anyone point out what I am doing wrong to get the DDL to default to the SelectValue?
The last argument of the SelectList constructor (in which you hope to be able to pass the selected value id) is ignored because the DropDownListFor helper uses the lambda expression you passed as first argument and uses the value of the specific property.
So here's the ugly way to do that:
Model:
public class MyModel
{
public int StatusID { get; set; }
}
Controller:
public class HomeController : Controller
{
public ActionResult Index()
{
// TODO: obviously this comes from your DB,
// but I hate showing code on SO that people are
// not able to compile and play with because it has
// gazzilion of external dependencies
var statuses = new SelectList(
new[]
{
new { ID = 1, Name = "status 1" },
new { ID = 2, Name = "status 2" },
new { ID = 3, Name = "status 3" },
new { ID = 4, Name = "status 4" },
},
"ID",
"Name"
);
ViewBag.Statuses = statuses;
var model = new MyModel();
model.StatusID = 3; // preselect the element with ID=3 in the list
return View(model);
}
}
View:
#model MyModel
...
#Html.DropDownListFor(model => model.StatusID, (SelectList)ViewBag.Statuses)
and here's the correct way, using real view model:
Model
public class MyModel
{
public int StatusID { get; set; }
public IEnumerable<SelectListItem> Statuses { get; set; }
}
Controller:
public class HomeController : Controller
{
public ActionResult Index()
{
// TODO: obviously this comes from your DB,
// but I hate showing code on SO that people are
// not able to compile and play with because it has
// gazzilion of external dependencies
var statuses = new SelectList(
new[]
{
new { ID = 1, Name = "status 1" },
new { ID = 2, Name = "status 2" },
new { ID = 3, Name = "status 3" },
new { ID = 4, Name = "status 4" },
},
"ID",
"Name"
);
var model = new MyModel();
model.Statuses = statuses;
model.StatusID = 3; // preselect the element with ID=3 in the list
return View(model);
}
}
View:
#model MyModel
...
#Html.DropDownListFor(model => model.StatusID, Model.Statuses)
Make Sure that your return Selection Value is a String and not and int when you declare it in your model.
Example:
public class MyModel
{
public string StatusID { get; set; }
}
Create a view model for each view. Doing it this way you will only include what is needed on the screen. As I don't know where you are using this code, let us assume that you have a Create view to add a new order.
Create a new view model for your Create view:
public class OrderCreateViewModel
{
// Include other properties if needed, these are just for demo purposes
// This is the unique identifier of your order status,
// i.e. foreign key in your order table
public int OrderStatusId { get; set; }
// This is a list of all your order statuses populated from your order status table
public IEnumerable<OrderStatus> OrderStatuses { get; set; }
}
Order status class:
public class OrderStatus
{
public int Id { get; set; }
public string Name { get; set; }
}
In your Create view you would have the following:
#model MyProject.ViewModels.OrderCreateViewModel
#using (Html.BeginForm())
{
<table>
<tr>
<td><b>Order Status:</b></td>
<td>
#Html.DropDownListFor(x => x.OrderStatusId,
new SelectList(Model.OrderStatuses, "Id", "Name", Model.OrderStatusId),
"-- Select --"
)
#Html.ValidationMessageFor(x => x.OrderStatusId)
</td>
</tr>
</table>
<!-- Add other HTML controls if required and your submit button -->
}
Your Create action methods:
public ActionResult Create()
{
OrderCreateViewModel viewModel = new OrderCreateViewModel
{
// Here you do database call to populate your dropdown
OrderStatuses = orderStatusService.GetAllOrderStatuses()
};
return View(viewModel);
}
[HttpPost]
public ActionResult Create(OrderCreateViewModel viewModel)
{
// Check that viewModel is not null
if (!ModelState.IsValid)
{
viewModel.OrderStatuses = orderStatusService.GetAllOrderStatuses();
return View(viewModel);
}
// Mapping
// Insert order into database
// Return the view where you need to be
}
This will persist your selections when you click the submit button and is redirected back to the create view for error handling.
I hope this helps.
For me, the issue was caused by big css padding numbers ( top & bottom padding inside the dropdown field). Basically, the item was being shown but not visible because it was way down. I FIXED it by making my padding numbers smaller.
I leave this in case it helps someone else. I had a very similar problem and none of the answers helped.
I had a property in my ViewData with the same name as the selector for the lambda expression, basically as if you would've had ViewData["StatusId"] set to something.
After I changed the name of the anonymous property in the ViewData the DropDownList helper worked as expected.
Weird though.
My solution was this...
Where the current selected item is the ProjectManagerID.
View:
#Html.DropDownList("ProjectManagerID", Model.DropDownListProjectManager, new { #class = "form-control" })
Model:
public class ClsDropDownCollection
{
public List<SelectListItem> DropDownListProjectManager { get; set; }
public Guid ProjectManagerID { get; set; }
}
Generate dropdown:
public List<SelectListItem> ProjectManagerDropdown()
{
List<SelectListItem> dropDown = new List<SelectListItem>();
SelectListItem listItem = new SelectListItem();
List<ClsProjectManager> tempList = bc.GetAllProductManagers();
foreach (ClsProjectManager item in tempList)
{
listItem = new SelectListItem();
listItem.Text = item.ProjectManagerName;
listItem.Value = item.ProjectManagerID.ToString();
dropDown.Add(listItem);
}
return dropDown;
}
Please find sample code below.
public class Temp
{
public int id { get; set; }
public string valueString { get; set; }
}
Controller
public ActionResult Index()
{
// Assuming here that you have written a method which will return the list of Temp objects.
List<Temp> temps = GetList();
var tempData = new SelectList(temps, "id", "valueString",3);
ViewBag.Statuses = tempData;
return View();
}
View
#Html.DropDownListFor(model => model.id, (SelectList)ViewBag.Statuses)
#Html.ValidationMessageFor(model => model.id)

MVC3 SelectedValue

In my model:
public SelectList QuestionGroupSelectList { get; set; }
------
List<QuestionGroup> questionGroupList = questionGroupRepository.GetQuestionGroup_BySurveyId(survey.Id);
Dictionary<int, string> questionGroupDictionary = questionGroupList.ToDictionary(l => l.Id, l => l.Name);
QuestionGroupSelectList = new SelectList(questionGroupDictionary, "key", "value", questionGroupId);
---------------------------------------
In view:
#Html.DropDownList("QuestionGroupSelectList", Model.QuestionGroupSelectList, "Choose Here")
When i debug i get 2 items in QuestionGroupSelectList (one with Id 30 and one with Id 35), and it says that the selectedValue is 35 (questionGroupId = 35)
But the selectedvalue does not work in the view, any ideas?
Thanks in advance!
You should use a different property to bind your dropdownlist value to. Also you should use view models and strongly typed helpers, like this:
public class MyViewModel
{
public int QuestionGroupId { get; set; }
public SelectList QuestionGroupSelectList { get; set; }
}
then you could have a controller action which populates this view model and passes it to the view:
public ActionResult Foo()
{
// This collection could come from anywhere
// normally you will query a repository here to fetch those values
var values = new[]
{
new { Key = "1", Value = "item 1" },
new { Key = "2", Value = "item 2" },
new { Key = "3", Value = "item 3" },
}
var model = new MyViewModel
{
// preselect the second value
QuestionGroupId = 2,
QuestionGroupSelectList = new SelectList(values, "Key", "Value")
}
return View(model);
}
and finally in your view:
#model MyViewModel
#Html.DropDownListFor(
x => x.QuestionGroupId,
Model.QuestionGroupSelectList,
"Choose Here"
)

Having difficulty using an ASP.NET MVC ViewBag and DropDownListfor

My difficulty is how to use ViewBag with DropdownListFor?
In my controller I am having:
TestModel model = new TestModel();
ViewBag.Clients = model.Clients;
ViewBag.StatusList = model.StatusList;
ViewBag.enumStatus = model.enumStatus;
ViewBag.intClient = model.intClient;
In my TestModel
public SelectList Clients { get; set; }
public SelectList StatusList { get; set; }
public ActiveStatus enumStatus { get; set; }
public int? intClient { get; set; }
In my View
I want to use DropDownListFor to display the ViewBag values, how can I do that?
You could do this:
#Html.DropDownListFor(x => x.intClient, ViewBag.Clients)
But I would recommend you to avoid ViewBag/ViewData and profit from your view model:
public ActionResult Index()
{
var model = new TestModel();
model.Clients = new SelectList(new[]
{
new { Value = "1", Text = "client 1" },
new { Value = "2", Text = "client 2" },
new { Value = "3", Text = "client 3" },
}, "Value", "Text");
model.intClient = 2;
return View(model);
}
and in the view:
#Html.DropDownListFor(x => x.intClient, Model.Clients)
Personally...I create a List and do this.
public ActionResult SomeAction()
{
var list = new List<SelectListItem>();
list.Add(new SelectListItem(){Text = "One", Value="One"});
list.Add(new SelectListItem(){Text = "Two", Value="Two"});
list.Add(new SelectListItem(){Text = "Three", Value="Three"});
list.Add(new SelectListItem(){Text = "Four", Value="Four"});
ViewBag.Clients = list;
return View();
}
and then in your view...
#Html.DropDownListFor(x => x.SomePropertyOnModel, (IEnumerable<SelectListItem>)ViewBag.Clients);
Notice the cast on the Viewbag item. The cast is required because the viewbag has no idea what the object is for Viewbag.Client. So the cast there is required.
#Html.DropDownListFor(x => x.intClient, new SelectList(Model.Clients, "ClientId", "ClientName"), string.Empty);
The ClientId is the value of the dropdown option.
The ClientName is the text of the dropdown option.
The string.Empty at the end adds a blank entry to the dropdown.
Here you can find a good reference: http://blogs.msdn.com/b/nunos/archive/2010/02/08/quick-tips-about-asp-net-mvc-editor-templates.aspx

Resources