.NET 6 - Set SelectListItem to Selected? - c#

I have a DropDownList which I populate like below:
Controller
IEnumerable<Category> categories = _db.Category.ToList();
var selectList = _db.Category.Select(i => new SelectListItem()
{
Text = i.Name,
Value = i.Id.ToString()
});
ViewBag.categoriesSelectList = selectList;
And use in view like so:
<select asp-for="Category" name="categoryID" asp-items="#ViewBag.categoriesSelectList" class="form-control">
<option>Vælg Kategori:</option>
</select>
However, I can't seem to figure out how I can set the already selected value, so the dropdown "starts" on that value. I tried enumerating over the selectList and changing the Selected attribute of the SelectListItem, but it doesn't work since it won't save the changes I make.
Hope my question makes sense :) thanks all.

Option 1:
Modify your code to include Selected property when creating list of SelectListItem items:
var selectList = _db.Category.Select(i => new SelectListItem()
{
Text = i.Name,
Value = i.Id.ToString(),
Selected = /* Some condition that is true when the current item should be selected */
});
Option 2:
Define a view model with structure that might be referenced in the <select> tag:
public class SelectViewModel
{
public string Category { get; set; }
public List<SelectListItem> Categories { get; set; }
}
The action method:
public IActionResult Categories()
{
var model = new SelectViewModel() ;
model.Categories = _db.Category.Select(i => new SelectListItem()
{
Text = i.Name,
Value = i.Id.ToString()
});
model.Category = ... your_code_to_set_default_selection;
return View(model);
}
The view:
#model SelectViewModel
<select asp-for="Category" asp-items="#Model.Categories"></select>
Can find some mode information in the documentation: The Select Tag Helper

Related

ASP.NET MVC 4 - DropDown selected value doesn't work

In my ViewModel i got two fields :
public AdTypeEnum Type { get; set; }
public IList<SelectListItem> TypeEnumList { get; set; }
That's how i fill the list :
public void SetLists()
{
TypeEnumList = new List<SelectListItem>();
TypeEnumList.Add(new SelectListItem { Value = "0", Text = "Select the type"});
foreach (var en in Enum.GetValues(typeof(AdTypeEnum)).Cast<AdTypeEnum>())
{
TypeEnumList.Add(new SelectListItem
{
Value = ((int)en).ToString(),
Text = en.ToString(),
Selected = Type == (AdTypeEnum)en ? true : false
});
}
}
And then I'm just rendering a dropdown on my View :
#Html.DropDownListFor(x => x.Type, Model.TypeEnumList, new { #class = "form-control" })
But the selected value doesn't render and the first option is always selected. When I check the select in HTML I found that no one of the options got selected attribute, but when I debug my controller method I can see that always one of the selectListItem have the propety Selected=true. Why does it suddenly disappear when my view is rendering?
Ok I already found out the result. I just had to change the Type from Enum into int and correctly populate it. Everything works! :)

How Do I carry dropdown value selected in Asp.net MVC

Hi I have Dropdown in Index page where user needs to select lists. Values are coming from Database. I took this dropdown value into session so I can carry this to Httppost.
Below is my code in Index page :
var activitydropdown = orderdata.uspApp_ActivityPageReportname(Convert.ToInt32(newid)).ToList();
List<SelectListItem> activitypage = new List<SelectListItem>();
if (activitydropdown != null && activitydropdown.Count > 0)
{
foreach (var activityresults in activitydropdown)
{
activitypage.Add(new SelectListItem
{
Text = activityresults.name,
Value = activityresults.id.ToString(),
});
}
}
ViewData["activitydropdown"] = activitypage;
Session["activitydropdown"] = activitypage;
And this is my code in view :
#using (Html.BeginForm("Index", "Automation", new { step = "2" }, FormMethod.Post, new { id = "frmIndex" }))
{
#Html.DropDownList("DrpaActivity", ViewData["activitydropdown"] as List<SelectListItem>, "All", new { style = "margin-left:694px;margin-bottom:20px;", onchange = "submit();" })
Now when user selects list from dropdown, i need to carry that text to my httpost index. Now in httpost index, in debug mode if i see this code :
var sessionlistautomation = Session["activitydropdown"];
I can see text and value and selected is false for every item. So how can i carry text here selected from Index to httpost, so when user selects list from dropdown, it stores that text value.
It will be available in your Request i.e.
Request["DrpaActivity"]
However I would strongly advise using ViewModels instead as they're typesafe, less room for error and easier to use.
If you create a view model, like below:
public class AViewModel
{
public string DrpaActivity { get; set; }
public List<SelectListItem> ActivitySelectList { get; set; }
}
In your Index you can return it like this:
public ActionResult Index()
{
var model = new AViewModel();
// set the select list i.e.
model.ActivitySelectList = // get from db etc
return View(model);
}
Then in your view declare the model at the top
#model AViewModel
...
Set your dropdown like this:
#Html.DropDownListFor(m => m.DrpaActivity, Model.ActivitySelectList as List<SelectListItem>, "All", new { style = "margin-left:694px;margin-bottom:20px;", onchange = "submit();" })
You can then get your selected drop-down in your post as follows:
[HttpPost]
public ActionResult Index(AViewModel model)
{
var isValid = model.DrpaActivity;
return View(model);
}

Create DropDownListFor from SelectList with default value

I have a dropdownlistfor:
#Html.DropDownListFor(model => model.Item.Item.Status, new SelectList(#Model.AllStatus, "id", "Description"), new { id = "statusDropdown" })
#Html.ValidationMessageFor(model => model.Item.Item.Status)
HTML output:
<select id="statusDropdown" class="valid" name="Item.Item.Status" data-val-required="The Status field is required." data-val-number="The field Status must be a number." data-val="true">
<option value="2">Completed by Admin</option>
<option value="3">General Error</option>
<option value="4">New</option>
</select>
How can I update this code to set a default selected option? E.G.
<option value="4" selected>New</option>
I tried:
#Html.DropDownListFor(model => model.Item.Item.Status, new SelectList(#Model.AllStatus, "id", "Description",#Model.SelectedStatusIndex), new { id = "statusDropdown" })
#Model.SelectedStatusIndex has a value of 4, but does not change the default option to New.
I also tried:
#Html.DropDownListFor(model => model.SelectedStatusIndex, new SelectList(#Model.AllStatus, "id", "Description"), new { id = "statusDropdown" })
#Html.ValidationMessageFor(model => model.Item.Item.Status)
This selects the default option "New", but model.Item.Item.Status is not set by the dropdown on HTTP POST.
Other Detail:
model.Item.Item.Status is an int. #Model.AllStatus is a SQL table that lists all available status options.
There exist already some discussions about that here or there. One of the problems might be using a different type than string for the key value. I had similar problems in past and I know that i solved it like this - explicitly setting the Selected property when preparing the list (in your case, AlLStatus).
Would mean, for your case (in controller action):
IEnumerable<SelectListItem> selectList =
from s in allStatus // where ever you get this from, database etc.
select new SelectListItem
{
Selected = (s.id == model.Item.Item.Status),
Text = cs.Description,
Value = s.id.ToString()
};
model.AllStatus = selectList;
This is in addition to the answers above. This is how I would have done it.
The view model is there to represent your data. So for a single drop down list I would have the following:
public class MyViewModel
{
public int StatusId { get; set; }
public IEnumerable<Status> Statuses { get; set; }
}
And the Status class would look like this:
public class Status
{
public int Id { get; set; }
public string Description { get; set; }
}
The controller's action method to handle the view:
public class MyController
{
private readonly IStatusService statusService;
public MyController(IStatusService statusService)
{
this.statusService = statusService;
}
public ActionResult MyActionMethod()
{
MyViewModel viewModel = new MyViewModel
{
Statuses = statusService.GetAll(),
StatusId = 4 // Set the default value
};
return View(viewModel);
}
}
The view will look like this:
#model MyProject.ViewModels.MyViewModel
#Html.DropDownListFor(
x => x.StatusId,
new SelectList(Model.Statuses, "Id", "Description", Model.StatusId),
"-- Select --"
)
#Html.ValidationMessageFor(x => x.StatusId)
There you go.
I ended up using a variant of thomasjaworski's answer.
View:
#Html.DropDownListFor(model => model.SelectedStatusIndex, new SelectList(#Model.StatusSelectList, "Value", "Text"), new { id = "statusDropdown" })
ViewModel constructor
StatusSelectList = AllStatus.Select(x =>
new StatusSelectListItem
{
Text = x.Description,
Value = x.id.ToString()
}).ToList();
this.SelectedStatusIndex = 2;//Default Status is New
Controller on HTTP POST
I set model.Item.Item.Status seperately from the dropdown itself:
model.Item.Item.Status = model.SelectedStatusIndex;
because the dropdown set's the value of the expression passed as the first argument:
#Html.DropDownListFor(model => model.SelectedStatusIndex, new SelectList(#Model.StatusSelectList, "Value", "Text"), new { id = "statusDropdown" })
In this case model.SelectedStatusIndex is what is set by the dropdown. This controller implementation is what I found to be tricky.
You can use "Insert" for adding default value of Dropdown and add it to your Dynamic list :
By this way you don't need to use Razor in your View.
List<Y> m = X.GetList();
m.Insert(0, new Y{ Name = "--Select--" });
SelectList ProductSizeList = new SelectList(_context.Sizes, "SizeId", "SizeName");
//after you create the selectList you have to create the default select list item
SelectListItem AllSize = new SelectListItem("All Size", "0");
// and after this you add this item to the begin of the selectlist
ViewData["SizeId"] = ProductSizeList.Prepend(AllSize);
I assign DropDownListFor's expression with value which is already defined in List. It works for me. I use List<SelectListItem> Model.IncidentPriorityList for ddwn's selectlist.
Model.incident.INCIDENT_PRIORITY_ID = Model.DefaultParameterId;
#Html.DropDownListFor(m => m.incident.INCIDENT_PRIORITY_ID, Model.IncidentPriorityList, "Select", new { #class = "form-control selectpicker", id = "drpPriority", #required = true })

Set selected value in dropdown list

How do I set the selected value on a drop down list? Here is what I have so far:
#model Web.Models.PostGraduateModels.PlannedSpecialty
#Html.DropDownList("PlannedSpecialtyID")
//controller
[HttpGet]
public PartialViewResult PlannedSpecialty()
{
// Get Planned Specialty ID
var pgtservice = new PgtService();
PostGraduateModels.PlannedSpecialty plannedSpecialty = pgtservice.GetPlannedSpecialtyId();
// Get Data for Planned Specialty DropDown List from SpecialtyLookup
var pgtServ = new PgtService();
var items = pgtServ.GetPlannedSpecialtyDropDownItems();
ViewBag.PlannedSpecialtyId = items;
return PartialView(plannedSpecialty);
}
// service
public IEnumerable<SelectListItem> GetPlannedSpecialtyDropDownItems ()
{
using (var db = Step3Provider.CreateInstance())
{
var specialtyList = db.GetPlannedSpecialtyDdlItems();
return specialtyList;
}
}
// data access
public IEnumerable<SelectListItem> GetPlannedSpecialtyDdlItems()
{
IEnumerable<Specialty> specialties = this._context.Specialties().GetAll();
var selList = new List<SelectListItem>();
foreach (var item in specialties)
{
var tempps = new SelectListItem()
{
Text = item.Description,
Value = item.Id.ToString()
};
selList.Add(tempps);
}
return selList;
}
I would recommend you to avoid using ViewBag/ViewData/ Weekly typed code. Use strongly typed code and it makes it more readable. Do not use the Magic strings/ Magic variables. I would add a collection property to your ViewModel to hold the SelectList items and another property to hold the selected item value.
public class PlannedSpecialty
{
public IEnumerable<SelectListItem> SpecialtyItems { set;get;}
public int SelectedSpeciality { set;get;}
//Other Properties
}
and in your Get action, If you want to set some Item as selected,
public PartialViewResult PlannedSpecialty()
{
var pgtServ = new PgtService();
var vm=new PlannedSpecialty();
vm.SpecialtyItems = pgtServ.GetPlannedSpecialtyDropDownItems();
//just hard coding for demo. you may get the value from some source.
vm.SelectedSpeciality=25;// here you are setting the selected value.
return View(vm);
}
Now in the View, use the Html.DropDownListFor helper method
#Html.DropDownListFor(x=>x.SelectedSpeciality,Model.SpecialtyItems,"select one ")
Use the selected property of the SelectListItem class:
selList.Selected = true;

Second dropdown list selected item does not change in ASP.NET MVC

I'm a bit confused by the behavior of ASP.NET MVC with it not changing the value of a dropdown list after a POST. Can someone explain how to do this.
First of all I have a model that looks like this:
public class Test
{
public int OneID { get; set; }
public IEnumerable<SelectListItem> OneList
{
get
{
yield return new SelectListItem
{
Text = "Red",
Value = "0"
};
yield return new SelectListItem
{
Text = "Green",
Value = "1"
};
yield return new SelectListItem
{
Text = "Blue",
Value = "2"
};
}
}
public int TwoID { get; set; }
public IEnumerable<SelectListItem> TwoList
{
get
{
yield return new SelectListItem
{
Text = "Ruby",
Value = "0"
};
yield return new SelectListItem
{
Text = "Gem",
Value = "1"
};
yield return new SelectListItem
{
Text = "Bronze",
Value = "2"
};
}
}
}
The view has this snippet of code in the body content:
<% using (Html.BeginForm("Index", "Home", FormMethod.Post))
{ %>
<table>
<tr>
<td>
<% =Html.DropDownList("OneID", Model.OneList, new
{ #onchange = "this.form.submit();" })%>
</td>
<td>
<% =Html.DropDownList("TwoID", Model.TwoList)%>
</td>
</tr>
</table>
<% } %>
And the GET and POST actions look like this:
public ActionResult Index()
{
Test test = new Test();
test.OneID = 0;
test.TwoID = 0;
return View(test);
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Index(Test test)
{
test.TwoID = test.OneID;
return View(test);
}
What I'm trying to achieve is to change the selected item in the second drop down to match the first drop down each time the first drop down is changed. So I'm getting the selected value from the first drop down and assigning it to the ID used for the second drop down and then returning the same model. The first drop down is correctly set in the view but not the second one.
Ideas?
The reason this doesn't work the way you expect it is because when the DropDownList helper tries to render the select element it first looks for posted values that match the name which in this case is TwoID and use this value instead of the value in the model. This is the same with a TextBox for example. If you use this helper and in the POST controller action you modify the value of the model it will still show the old value. That's just how helpers work. They bind from POSTed values.
There are two possible workarounds:
Use javascript to synchronize both dropdowns:
#onchange = "document.getElementById('TwoID').value = this.value; this.form.submit();"
BTW this should be done in an unobtrusive way in a separate javascript file:
$(function() {
$('#OneID').change(function() {
$('#TwoID').val($(this).val());
this.form.submit();
});
});
Write your own helper or generate the select manually (less recommended)

Categories