Develop Reference

How to select multiple items from ListBoxFor and pass to controller Post method

How am I able to select multiple items in a Listbox that will be passed to the controller's Post model parameter?
I'm able to physically select multiple via holding CTRL, but when I submit, I get the validation error message, "The field TagId must be a number." It only submits with one item selected.
Create View Form showing multiple items selected
The List Box
#Html.ListBoxFor(model => model.allTags[0].TagId, new SelectList(Model.allTags, "TagId", "Name"), new { #class = "form-control", #Id = "SelectTags", #style = "width:200px;height:300px;" })
The controller Post method
[HttpPost]
public ActionResult Create(CreateRecipe model)
{
try
{
// TODO: Add insert logic here
return RedirectToAction("ViewRecipes");
}
catch
{
return View();
}
}
Thank you

You can try the following code to select multiple items from ListBoxFor and pass it to controller Post method.
Controller:
public class TestController : Controller
{
// GET: Test
public ActionResult Index()
{
var model = new UserModel
{
SelectedTeaIds = new[] { 3 },
TeaList = GetAllTeaTypes()
};
return View(model);
}
[HttpPost]
public ActionResult Index(UserModel model)
{
model.TeaList = GetAllTeaTypes();
if (model.SelectedTeaIds != null)
{
List<SelectListItem> selectedItems = model.TeaList.Where(p => model.SelectedTeaIds.Contains(int.Parse(p.Value))).ToList();
foreach (var Tea in selectedItems)
{
Tea.Selected = true;
ViewBag.Message += Tea.Text + " | ";
}
}
return View(model);
}
public List<SelectListItem> GetAllTeaTypes()
{
List<SelectListItem> items = new List<SelectListItem>();
items.Add(new SelectListItem { Text = "General Tea", Value = "1" });
items.Add(new SelectListItem { Text = "Coffee", Value = "2" });
items.Add(new SelectListItem { Text = "Green Tea", Value = "3" });
items.Add(new SelectListItem { Text = "Black Tea", Value = "4" });
return items;
}
}
Model:
public class UserModel
{
public int[] SelectedTeaIds { get; set; }
public IEnumerable<SelectListItem> TeaList { get; set; }
}
Index.cshtml:
#using WebApplication1.Models
#using System
#model UserModel
#{
ViewBag.Title = "Index";
}
<b>Select Tea Type: </b>
<br />
#using (Html.BeginForm("Index", "Test", FormMethod.Post))
{
<b>Select Tea Type: </b>
<br />
#Html.ListBoxFor(x => x.SelectedTeaIds, Model.TeaList, new { style = "width:200px" })
<br />
<input type="submit" value="submit" />
}
<h4>You Selected</h4>
<b style="color:red">Tea Type: #ViewBag.Message</b>
Result:

Post Dropdown values/keys using FormCollection

I have a form that posts to an action:
public ActionResult Index()
{
CheckDataVM vm = new CheckDataVM();
vm.SerialNumbers = GetAllSerials();
vm.CustomerNames = GetAllCustomers();
vm.DateFrom = DateTime.Now.AddDays(-1);
vm.DateTo = DateTime.Now;
return View(vm);
}
[HttpPost]
public ActionResult Index(CheckDataVM v)
{
CheckDataVM vm = new CheckDataVM();
vm.SerialNumbers = GetAllSerials();
var s = vm.SerialNumbers.First().Text.ToString();
vm.Channels = GetAllChannels(s);
vm.DateFrom = DateTime.Now.AddDays(-1);
vm.DateTo = DateTime.Now;
return View(vm);
}
In my Razor view, I have post:
#using (Html.BeginForm("Index", "CheckData", FormMethod.Post, new { id = "SerialsForm" }))
{
<div class="card-body" style="font-size: small;">
<div class="form-group">
#Html.DropDownListFor(x => x.SelectedSerial, Model.SerialNumbers, new { #class = "form-control form-control-sm" })
<input type="submit" value="Submit" />
</div>
</div>
}
The view model is:
public class CheckDataVM
{
public string CustomersName { get; set; }
public string SelectedSerial { get;set; }
[Display(Name="Select a serial number")]
public IEnumerable<SelectListItem> SerialNumbers { get; set; }
}
The dropdowns work, but when I submit the form the only thing I get back is the object name (SerialNumbers) as the key.
I want to be able to get the selected item from the dropdown list and pass this to the FormCollection in the Httpost of the Index action. For the life of me, I cannot get it to work!
I am expecting to see a key called 'CustomersDdl' and it's value. For example, if I had a dropdown full of countries and I pick England, I am expecting to see a value come back in the FormCollection saying England.
What am I doing wrong?

The value to postback is depending on how you create "SelectListItem", in your case it is in the method "GetAllSerials()"
vm.SerialNumbers = serialNumbers.Select(serial => new SelectListItem
{
Selected = serial.id == vm.SelectedSerial ? true : false,
Text = serial.Name,
Value = serial.Name
}).ToList();

Asp Net mvc 5 issues with passing information from Controller to View

First of all sorry for the super generic title but i have no idea how to ask this question properly.
I am a bit new to Asp net MVC 5 and i am having some issues with passing information from the Controller to the View. The problem is that in the View I need to have 2 search functions, one using a text (with a textbox) and another with listboxes, and I can t seem to get the two working at the same time (they work separately), I suspect it has something to do with my Viewmodel but I have no idea why this is happening.
this is my ViewModel:
public class ViewModel{
public IEnumerable<ABC> xyz { get; set; }
public List<SelectListItem> device { get; set; }
public List<SelectListItem> type { get; set; }
public SelectListItem selectedItem { set; get; }
//these are all the properties that ABC has
public int a { get; set; }
public string Name{ get; set; }
}
These are the controller actions
public ActionResult FillListBoxes()
{
ViewModel myViewModel = new ViewModel();
var tempObjects = db.ABC
//.Where(...)
.Select(v =>
new
{
v.Type,
v.device,
})
.ToList();
myViewModel.device = new List<SelectListItem>();
foreach (var device in tempObjects.Select(obj => obj.device).Distinct().ToList())
{
myViewModel.device.Add(new SelectListItem { Text = device, Value = device });
}
myViewModel.type = new List<SelectListItem>();
foreach (var type in tempObjects.Select(obj => obj.device).Distinct().ToList())
{
myViewModel.type.Add(new SelectListItem { Text = type, Value = type });
}
return View(myViewModel);
}
public ActionResult Search(string searchString)
{
ViewModel myViewModel = new ViewModel();
// FillListBoxes();
var tempObjects = db.ABC.ToList();
if (!String.IsNullOrEmpty(searchString))
{
myViewModel.abc = tempObjects.Where(m => m.Name.Contains(searchString));
return View(myViewModel);
}
else
{
myViewModel.abc = tempObjects;
return View(myViewModel);
}
}
And this is the View
#model project.Models.ViewModel
#{
ViewBag.Title = "Search";
}
#section Styles {
<link href="#Url.Content("~/Content/Search.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/chosen.css")" rel="stylesheet" type="text/css" />
}
#using (Html.BeginForm("Search", "ABC", FormMethod.Get))
{
<p>
Name: #Html.TextBox("SearchString") <br />
<input type="submit" value="Filter" />
</p>
}
#using (Html.BeginForm("FillListBoxes", "ABC", FormMethod.Get))
{
<p>
#Html.DropDownListFor(model => model.selectedItem, Model.device, new { #class = "chosen", multiple = "multiple", style = "width: 350px;" })
</p>
<p>
#Html.DropDownListFor(model => model.selectedItem, Model.type, new { #class = "chosen", multiple = "multiple", style = "width: 350px;" })
</p>
<p>
<input type="submit" value="Filter" />
</p>
}
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.a)
</th>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
<th></th>
</tr>
#foreach (var item in Model.abc) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.a)
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
</tr>
}
</table>
The error i am getting now is that selectedItem should be a IEnumerable but even if i change it get a There is no ViewData item of type 'IEnumerable' that has the key 'selectedItem'. and before this I was facing a:
the model item passed into the dictionary is of type 'system.data.entity.infrastructure.dbquery 1[abc] but this dictionary requires a model item of type ViewModel this is when I changed the Search method in the controller to use the Viewmodel.
If I am missing anything please do say.
I apologize again for the super generic title.
#Edit Added the suggestions made by Stephen
#Edit 2 So here is a brief explanation on how this all works, the texbox is there so the user can filter the ABCs that are presented in that page (based solely on the name attribute). The listboxes are there so if the user can filter the presented ABCs through their type and/or device only.
I hope this clears some things up

There are numerous problems
Firstly, you view includes helpers to generate dropdownlists, for example
#Html.DropDownListFor(model => model.selectedItem, Model.device, ...)
but when you call the Search() method, you do not populate the SelectList's so Model.device is null and throws the exception
There is no ViewData item of type 'IEnumerable' that has the key 'selectedItem
Secondly, <select> elements (and all controls) bind to value types but you are trying to bind to typeof SelectListItem which is a complex object.
Thirdly you have 2 dropdownlist binding to the same property so even if you do change selectedItem to string, it would only ever bind the value of the selected device and the selected type would be ignored.
Finally, you have 2 separate forms so nothing stays in sync. If you post the first form, items would be filtered based on the name (the selected device is ignored) and conversely if you post the second form, the value of name is ignored.
Based on your current approach your view model would need to be
public class ViewModel
{
public IEnumerable<ABC> Items { get; set; }
public string NameFilter { get; set; }
public string DeviceFilter { get; set; }
public string TypeFilter { get; set; }
public SelectList DeviceList { get; set; }
public SelectList TypeList { get; set; }
}
Controller
public ActionResult Search()
{
ViewModel model = new ViewModel();
// populate properties including select lists
return View(model);
}
[HttPost]
public ActionResult Search(ViewModel model)
{
model.Items = // Get the filtered items based on the values of NameFilter, DeviceFilter and TypeFilter
model.DeviceList = // reassign both select lists
model.Typelist = ..
return view(model);
}
View
#model ViewModel
#using(Html.BeginForm())
{
#Html.TextBoxFor(m => m.NameFilter)
#Html.DropDownListFor(m => m.DeviceFilter, Model.DeviceList)
#Html.DropDownListFor(m => m.TypeFilter, Model.TypeList)
<input type="submit" value="Filter" />
}
<table class="table">
.....
<table>
However all this can be done better by using ajax to pass the filter values to a method that returns a partial view containing just the updated table, and replacing the DOM, or even better by rendering each table row with data-* attributes for the device and type values and then just using javascript/jquery to hide/show rows based on the filer values (no need to go back to the server)

Instead of using MultiSelectList you should use List:
public class ViewModel{
public IEnumerable<ABC> xyz { get; set; }
public List<SelectListItem> device { get; set; }
public List<SelectListItem> type { get; set; }
public SelectListItem selectedItem { set; get; }
//these are all the properties that ABC has
public int a { get; set; }
public string Name{ get; set; }
}
and
public ActionResult FillListBoxes()
{
ViewModel myViewModel = new ViewModel();
...
myViewModel.device = new List<SelectListItem>();
foreach (var device in tempObjects.Select(obj => obj.device).Distinct().ToList()) {
myViewModel.device.Add(new SelectListItem { Text = device, Value = device });
// das gleiche für myViewModel.type entsprechend
return View(myViewModel);
}
EDIT: The type for selectedItem should be "SelectListItem" as well and of course I forgot to add .ToList() at the end.

Get Selected Items from CheckboxList MVC.NET Razor

I have the following cshtml form
#using (Html.BeginForm(Html.BeginForm("Create", "UserRole", Model, FormMethod.Post)))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<fieldset>
<legend>Role</legend>
<div class="editor-label">
#Html.Label(Model.User.UserName)
</div>
<div class="editor-field">
#Html.CheckBoxList(Model.CheckboxList)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
And I wish to get the Model.CheckboxList selected Items in my action.
I have the following Create Action in my Controller
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(UserRoleViewModel userRoleViewModel)
{
if (ModelState.IsValid)
{
//_context.Role.Add(role);
//_context.SaveChanges();
//return RedirectToAction("Index");
}
return View(viewModel);
}
However the viewModel.CheckboxList is 0.
How can I pass the selected values of the checkboxlist, and also the Model.User to the Controller Action?
My ViewModel looks like this :-
public User User { get; set; }
public IEnumerable<Role> RoleList { get; set; }
public List<UserRoleViewModel> UserList { get; set; }
public IEnumerable<SelectListItem> CheckboxList { get; set; }
public UserRoleViewModel()
{
}
public UserRoleViewModel(User user, IEnumerable<Role> roleList )
{
User = user;
RoleList = roleList;
}
Thanks for your help and time!
UPDATE ----------- After reading this post enter link description here, I tried to adapt my code to follow the example, but I am still finding problems with this updated code.
Now I have the following :-
cshtml :-
#model IEnumerable<MvcMembership.ViewModels.RoleCheckboxListViewModel>
#using (Html.BeginForm())
{
#Html.EditorForModel()
<input type="submit" value="OK" />
}
Views/Role/EditorTemplates/RoleCheckboxListViewModel.cshtml
#model MvcMembership.ViewModels.RoleCheckboxListViewModel
#Html.HiddenFor(x => x.RoleId)
#Html.HiddenFor(x => x.RoleName)
<div>
#Html.CheckBoxFor(x => x.Checked)
#Html.LabelFor(x => x.Checked, Model.RoleName)
</div>
ViewModels :-
public class RoleCheckboxListViewModel
{
public string RoleId { get; set; }
public string RoleName { get; set; }
public bool Checked { get; set; }
}
and the controller action is as follows :-
public ActionResult Create(int? uid)
{
var checkBoxList = new[]
{
new RoleCheckboxListViewModel() {
RoleId = "1", Checked = true, RoleName = "item 1" },
new RoleCheckboxListViewModel() {
RoleId = "2", Checked = true, RoleName = "item 2" },
new RoleCheckboxListViewModel() {
RoleId = "3", Checked = true, RoleName = "item 3" },
};
return View(checkBoxList);
}
The problem I have now is that on the Create.cshtml. I cannot see the checkboxlist, but only 123 displayed as well as the OK button.
Any help would be very much appreciated cause I am at a dead end at the moment.

I've accomplished this with the following parts:
1) A view model for the child element that adds the bool property that will represent whether or not the checkbox is checked in the View later... ie:
public class CategoryViewModel
{
public int ID { get; set; }
public string Name { get; set; }
public bool Assigned { get; set; }
}
2) A view model for the parent element that adds a collection property for this new child element view model, ie:
public class ManufacturerViewModel
{
public Manufacturer Manufacturer { get; set; }
public IList<CategoryViewModel> Categories { get; set; }
public ManufacturerViewModel()
{
Categories = new List<CategoryViewModel>();
}
}
3) A service layer method for getting a list of all child elements, while also setting the bool property for each ("Assigned" in my example). To be used by your controller.
public IList<CategoryViewModel> GetCategoryAssignments(Manufacturer mfr)
{
var categories = new List<CategoryViewModel>();
foreach (var category in GetCategories())
{
categories.Add(new CategoryViewModel
{
ID = category.ID,
Name = category.Name,
Assigned = mfr.Categories.Select(c => c.ID).Contains(category.ID)
});
}
return categories;
}
4) A method for updating the parent item's collection based on your checkboxlist selections. To be used by your controller.
public void UpdateCategories(string[] selectedCategories, ManufacturerViewModel form)
{
if (selectedCategories == null)
selectedCategories = new string[] { };
var selectedIds = selectedCategories.Select(c => int.Parse(c)).ToList();
var assignedIds = form.Manufacturer.Categories.Select(c => c.ID).ToList();
foreach (var category in GetCategories())
{
if (selectedIds.Contains(category.ID))
{
if (!assignedIds.Contains(category.ID))
form.Manufacturer.Categories.Add(category);
}
else
{
if (assignedIds.Contains(category.ID))
form.Manufacturer.Categories.Remove(category);
}
}
}
5) Modifications to your Create/Edit view. ie:
#Html.EditorFor(model => model.Categories)
You must also add this so that the original assigned values are included in post data. You'll have to add a HiddenFor for each property that you have set as Required through validation.
for (int i = 0; i < Model.Manufacturer.Categories.Count; i++)
{
#Html.HiddenFor(model => model.Manufacturer.Categories[i].ID);
#Html.HiddenFor(model => model.Manufacturer.Categories[i].Name);
}
6) And finally, a new EditorTemplate for your child view model element. ie:
#model YourProject.ViewModels.CategoryViewModel
<li>
<input type="checkbox"
id="#string.Format("cb{0}{1}", #Model.Name, #Model.ID)"
name="selectedCategories" //Notice this name corresponds to string[] selectedCategories so that it can be extracted from the post data
value="#Model.ID"
#(Html.Raw(Model.Assigned ? "checked=\"checked\"" : "")) />
<label for="#string.Format("cb{0}{1}", #Model.Name, #Model.ID)">#Model.Name</label>
#Html.HiddenFor(model => model.ID)
</li>
Hopefully my own application gives you a better idea of how to solve this issue.

Store your selected value into the variable as follows, and pass it to an hidden field, then you can access it easily
var modelSelected = document.getElementById("modelName");
document.getElementById('selectedModel').value =
modelSelected.options[modelSelected.selectedIndex].text;
<input id="selectedModel" name="selectedModel" type="hidden" runat="server" />

selected Item of DropDownList

How can I get selected Item of my DropDownList?
#using (Html.BeginForm("Doctors", "User", FormMethod.Get))
{
<input name="pageNumber" type="hidden" value="1" /><text>Hospital:</text><br />
#Html.DropDownList("HospitalId", (IEnumerable<SelectListItem>)ViewBag.HospitalList, new { style = "width:90%" }) <br />
<button type="submit" class="btn btn-mini"> Search </button>
}

This question isn't very clear as to when / where you want to get your drop down list item.
I will assume you want to pick it up in the controller for now. What you will need to do is make sure its included in your post to the controller and is using the correct name to be picked up when the form is read server side.
Here is an example:
#Html.DropDownList("SubworkType", "Select Work Item", new { #Id = "SubworkId" , #Name = "SubworkId" })
If You are looking to grab the selected value on the view side you could do something like this:
var workerType = $("#WorkerTypeFilter option:selected").val()

It should simply be accessible as a parameter in your Controller's action method.
public ActionResult Doctors(string pageNumber, string HospitalId)
{
// make use of HospitalId
...
}

I would prefer to avoid dynamic variables like ViewBag/ViewData and stick with strong types.
Use a ViewModel
public class AssignDoctorViewModel
{
//Other Properties also
public IEnumerable<SelectListItem> Hospitals { set;get;}
public int SelectedHospital { set;get;}
}
And in my GET Action method, I would return this with the filled properties
public ActionResult AssignDoctor
{
var vm=new AssignDoctorViewModel();
vm.Hospitals= new[]
{
new SelectListItem { Value = "1", Text = "Florance" },
new SelectListItem { Value = "2", Text = "Spark" },
new SelectListItem { Value = "3", Text = "Henry Ford" },
};
// can replace the above line with loading data from Data access layer.
return View(vm);
}
Now in your view which is strongly typed to our ViewModel class
#model AssignDoctorViewModel
#using(Html.BeginForm())
{
#Html.DropDownListFor(x => x.SelectedHospital, Model.Hospitals, "Select..")
<input type="submit" value="save" />
}
Now in your HTTPPOST Action method, you can get the Selected value by accessing the SelectedHospital Property
public ActionResult AssignDoctor(AssignDoctorViewModel model)
{
//check for model.SelectedHospital value
}

Shyju's answer is good, I just want to expand on what Shyju has said with some pointers.
Use a view model per view with just the data that you need, anything not used please remove.
Your domain model could look like this:
public class Hospital
{
public int Id { get; set; }
public string Name { get; set; }
}
Your view model could look like this:
public class DoctorHospitalViewModel
{
public int HospitalId { get; set; }
public IEnumerable<Hospital> Hospitals { get; set; }
}
Your view could look like this (I put the dropdown in a table for display purposes):
<table>
<tr>
<td class="edit-label">Hospital <span class="required">**</span></td>
<td>
#Html.DropDownListFor(
x => x.HospitalId,
new SelectList(Model.Hospital, "Id", "Name", Model.HospitalId),
"-- Select --"
)
#Html.ValidationMessageFor(x => x.HospitalId)
</td>
</tr>
</table>
Your controller might look like this and assuming you are wanting to use this dropdown in a create view:
public class HospitalController : Controller
{
private readonly IHospitalRepository hospitalRepository;
public HospitalController(IHospitalRepository hospitalRepository)
{
// Check that hospitalRepository is not null
this.hospitalRepository = hospitalRepository;
}
public ActionResult Create()
{
DoctorHospitalViewModel viewModel = new DoctorHospitalViewModel
{
Hospitals = hospitalRepository.GetAll()
};
return View(viewModel);
}
[HttpPost]
public ActionResult Create(DoctorHospitalViewModel viewModel)
{
// Check that viewModel is not null
if (!ModelState.IsValid)
{
viewModel.Hospitals = hospitalRepository.GetAll();
return View(viewModel);
}
// Do what ever needs to be done
// You can get the selected hospital id like this
int selectedHospitalId = viewModel.HospitalId;
return RedirectToAction("List");
}
}
I hope this helps.