Submit model with SelectList in ASP.NET MVC - c#

What I have is a form with multiple inputs that I want to use to query database for some results. Form has some default values and it all works, however I have problem submitting it to itself.
The returned error is "No paramaterless constructor defined for this object" and it is caused by SelectList object.
I have tried this solution and made psUserType private with getter and setter and intialized it as empty list, but then my dropDown menu had no values on start. Not sure why GetUserTypes hadn't filled them.
What am I doing wrong here? How does one have both preselected values and also send the same model with user-selected values, while also displaying results on the same page?
Does it make sense to use the same model for all 3 actions: 1. display form and inputs with default values 2. post selected values during submit 3. return results and selected values? I've read this solution also but not sure how to use 2 or 3 separate models here.
Any help is appreciated. Thanks in advance.
Model
public class SearchDownloadsModel
{
public SelectList psUserType { get; private set; } //causes problem on submit
public string psText { get; set; }
public MultiSelectList psColumns { get; private set; }
public IEnumerable<ResultsRowModel> psResults { get; set; }
public SearchDownloadsModel()
{
this.psUserType = GetUserTypes();
this.psColumns = GetColumns();
this.psResults = new List<ResultsRowModel>(); //empty by default
}
public SelectList GetUserTypes()
{
List<SelectListItem> items = new List<SelectListItem>()
{
new SelectListItem { Value="user", Text="Single User" },
new SelectListItem { Value="group", Text="User group" },
...
};
return new SelectList(items, "Value", "Text");
}
public MultiSelectList GetColumns()
{
List<SelectListItem> items = new List<SelectListItem>()
{
new SelectListItem { Value = "user", Text="Username" },
new SelectListItem { Value = "file", Text="Filename" },
new SelectListItem { Value = "titl", Text="Title" },
new SelectListItem { Value = "auth", Text="Author" },
...
};
return new MultiSelectList(items, "Value", "Text");
}
}
public class ResultsRowModel
{
public int ID { get; set; }
public string EventTime { get; set; }
public string FileName { get; set; }
public string FilePath { get; set; }
public string UserName { get; set; }
...
}
View
#model Proj.Models.SearchDownloadsModel
#using (Html.BeginForm("Downloads", "Home", FormMethod.Post))
{
#Html.DropDownListFor(x => x.psUserType, Model.psUserType)
#Html.TextBoxFor(x => x.psText)
#Html.ListBoxFor(x => x.psColumnsSelected, Model.psColumns, new { multiple = "multiple" })
<button type="submit" class="btn btn-primary">Search</button>
}
#if (Model.psResults != null && Model.psResults.Any())
{
<table>
<tr>
<th>User</th>
<th>File</th>
</tr>
#foreach (var row in Model.psResults)
{
<tr>
<td>#row.UserName</td>
<td>#row.FileName</td>
</tr>
}
</table>
}
Controller
[HttpGet]
public ActionResult Downloads()
{
SearchDownloadsModel model = new SearchDownloadsModel();
model.psColumnsSelected = new List<string>() { "user", "file" }; //preselected values
return View(model);
}
[HttpPost]
public ActionResult Downloads(SearchDownloadsModel model)
{
model.psResults = queryDatabase(model);
return View(model);
}
private List<ResultsRowModel> queryDatabase(SearchDownloadsModel model)
{
//...
}
EDIT: Added ResultsRowModel under SearchDownloadsModel

In ASP.NET MVC you should only put variables containing the posted or selected values in the ViewModel class. Select List items are considered extra info and are typically passed from the Action Method into the View (.cshtml) using ViewBag items.
Many of the rendering extension methods are even written specifically for such an approach, leading to code such as this:
Controller
ViewBag.PersonID = persons.ToSelectList(); // generate SelectList here
View
#Html.DropDownListFor(model => model.PersonID)
#* The above will look for ViewBag.PersonID, based on the name of the model item *#

The DropDownListFor generates a <select> element with the name of the property you bind it to. When you submit the form, that name will be included as one of the form fields and its value will be the option's value you select.
You're binding the DropDownList to a property of type SelectList (psUserType) and when your action is called, a new instance of SelectList must be created in order to bind the form field to it. First of all, the SelectList class does not have a parameterless constructor and, thus, your error. Secondly, even if a SelectList could be created as part of model binding, the <select> element is submitting a string value which wouldn't be convertible to SelectList anyways.
What you need to do is to add a string property to your SearchDownloadsModel, for example:
public string SelectedUserType { get; set; }
Then bind the dropdownlist to this property:
#Html.DropDownListFor(x => x.SelectedUserType, Model.psUserType)
When you submit the form, this new property will have the value you selected in the drop down.

Peter's answer and Stephen's comments helped me solve the problem.
Pehaps someone will find it useful.
Any further suggestions always welcome.
Model
public class PobraniaSzukajModel
{
public IEnumerable<SelectListItem> UserTypes { get; set; }
public string psSelectedUserType { get; set; }
public IEnumerable<SelectListItem> Columns { get; set; }
public IEnumerable<string> psSelectedColumns { get; set; }
public string psText { get; set; }
public ResultsModel psResults { get; set; }
}
View
#Html.ListBoxFor(x => x.psSelectedUserType, Model.Columns)
#Html.TextBoxFor(x => x.psText)
#Html.ListBoxFor(x => x.psSelectedColumns, Model.Columns)
Controller
[HttpGet]
public ActionResult Downloads()
{
SearchDownloadsModelmodel = new SearchDownloadsModel();
model.UserTypes = GetUserTypes();
model.Columns = GetColumns();
model.psColumnsSelected = new List<string>() { "user", "file" }; //preselected values
return View(model);
}
[HttpPost]
public ActionResult Downloads(SearchDownloadsModel model)
{
model.UserTypes = GetUserTypes();
model.Columns = GetColumns();
model.psResults = GetResults(model);
return View(model);
}
public SelectList GetUserTypes()
{
//...
}
public MultiSelectList GetColumns()
{
//...
}
public ResultsModel GetResults()
{
//...
}

Related

Select tag helper from database ASP.NET Core 3.1

Ok, I'm trying to do a proper dropdown in Core 3.1. In this example https://learn.microsoft.com/en-us/aspnet/core/mvc/views/working-with-forms?view=aspnetcore-3.1#the-select-tag-helper
Model has a new list with hardcoded values
public string Country { get; set; }
public List<SelectListItem> Countries { get; } = new List<SelectListItem>
{
new SelectListItem { Value = "MX", Text = "Mexico" },
new SelectListItem { Value = "CA", Text = "Canada" },
new SelectListItem { Value = "US", Text = "USA" },
};
I looked for examples where the list is coming from the database but they are very inconsistent. The only way I was able to do the dropdown list is with the ViewBag which is not advised.
I have two models. 1.
public partial class Glossary
{
public int UniqueId { get; set; }
public int Category { get; set; }
public string DisplayText { get; set; }
}
which is my view model
public partial class AdminUser
{
[Key]
public int Id { get; set; }
public string UserName { get; set; }
public string UserLocation { get; set; }
public string UserStatus { get; set; }
//public IEnumerable<Glossary> Glossary { get; set; } //I used this for ViewBag
public List<SelectListItem> UserLocations { get; } = new List<SelectListItem>
{
according to the example my query should go here
};
}
Here is my controller:
public IActionResult Create()
{
// This is the ViewBag that worked with HTML helpers, but I'm trying to use tag-helpers.
/*IEnumerable<SelectListItem> LocationsList = _context.Glossary.Where(x => x.Category == 1).Select(x => new SelectListItem
{
Value = x.UniqueId.ToString(),
Text = x.DisplayText
});
ViewBag.LocationsList = LocationsList;
*/
return View();
}
All examples that found were hardcoded lists and nothing with getting it from the database. What is the proper way to get the data from the Glossary table through the view model with ViewBag? Any pointers are appreciated.
ALSO:
When using this example: Select Tag Helper in ASP.NET Core MVC
When I used
public SelectList Employees { set; get; }
I got error: InvalidOperationException: The entity type 'SelectListGroup' requires a primary key to be defined. If you intended to use a keyless entity type call 'HasNoKey()'.
Both of my tables have PK and adding [Key] to Glossary model didn't fix it.
If you'd like to retrieve data from db and populate a dropdown with retrieved data through a view model (or ViewBag), you can refer to following code snippet.
In AdminUser view model class, include these properties
public string Selected_Glossary { get; set; }
public List<SelectListItem> Glossary_List { get; set; }
In controller
public IActionResult Create(AdminUser model)
{
var adminuser_model = new AdminUser
{
UserName="test"
//for other properties
};
//retrieve data from Glossary table
var items = _context.Glossary.Where(x => x.Category == 1).Select(x => new SelectListItem
{
Value = x.UniqueId.ToString(),
Text = x.DisplayText
}).ToList();
//pass dropdown items through a view model
adminuser_model.Glossary_List = items;
////pass dropdown items through ViewBag
//ViewBag.Glossary_List = items;
return View(adminuser_model);
}
In view page
#model AdminUser
#{
ViewData["Title"] = "Create";
}
<h1>Create</h1>
<form asp-controller="Home" asp-action="Create" method="post">
<select asp-for="Selected_Glossary" asp-items="Model.Glossary_List"></select>
#*populate it through ViewBag*#
#*<select asp-for="Selected_Glossary" asp-items="ViewBag.Glossary_List"></select>*#
<input type="submit" value="Submit" />
</form>
Test Result

How to create view for dropdown?

i have problem with view for dropdown menu. Here is my code.
Model:
public class student
{
[DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
public int StudentId { get; set; }
[Display(Name = "Šifra ispitanika:")]
[Range(1, 9999)]
public int StudentNumber { get; set; }
[Display(Name = "Datum rođenja ispitanika:")]
[DataType(DataType.Date)]
public DateTime DateBirth { get; set; }
[Display(Name = "Mjesto rođenja ispitanika:")]
public string PlaceBirth { get; set; }
[Display(Name = "Datum testiranja ispitanika:")]
[DataType(DataType.Date)]
public DateTime TestDate { get; set; }
[Display(Name = "Godina rođenja majke:")]
[Range(1900, 2000)]
public int MumDate { get; set; }
[Display(Name = "Godina rođenja oca:")]
[Range(1900, 2000)]
public int DadDate { get; set; }
[Display(Name = "Dropdown_test:")]
public string MumSport { get; set; }
[NotMapped]
public List<SelectListItem> MumSports { set; get; }
}
Controller:
public async Task<IActionResult> Create([Bind("StudentId,StudentNumber,DateBirth,PlaceBirth,TestDate,MumDate,DadDate,MumSports")] student student)
{
if (ModelState.IsValid)
{
var MumSports = new student
{
MumSports = new List<SelectListItem>
{
new SelectListItem { Text = "nikako", Value = "1" },
new SelectListItem { Text = "rekreativno", Value = "2" },
new SelectListItem { Text = "amaterski", Value = "3" },
new SelectListItem { Text = "profesionalno", Value = "4" }
}
};
_context.Add(student);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
return View(student);
}
View:
<select asp-for="StudentId" asp-items="#(ViewBag.MumSports)">
<option>Please select one</option>
</select>
</div>
Problem is about View, when i run my app, it shows me the dropdown but without data I created in the controller. I think that this is not good way for creating View. Any idea ??
one thing which you need to make sure of when you populate any content on a page with server derived information is that you pass it down correctly.
From your view, i can see that you are looking for a ViewBag.MumSport. So, that means that in the "get" request of your action, you wil need to populate ViewBag.MumSport with the related values.
The controller youve written also looks a bit confusing... we typically expect to have a "get (verb)" controller which you use to set the page up. We usually do things like create the values for the drop down list and populate anything you need for the page. Usually, no saving of data happens here. However, it appears as though you are saving the drop down list to a database?
I believe you might want something like this:
public IActionResult Create()
{
ViewBag.MumSport = new List<SelectListItem>
{
new SelectListItem { Text = "nikako", Value = "1" },
new SelectListItem { Text = "rekreativno", Value = "2" },
new SelectListItem { Text = "amaterski", Value = "3" },
new SelectListItem { Text = "profesionalno", Value = "4" }
}
return View();
}
[HttpPost]
public IActionResult Create(view model goes in here)
{
Business logic goes here
}
This should mean that your drop down list gets populated but it also shows a distinction between the post and get methods. Post is typically where you would create or save inforamtion to a store (database).
Hope this helps
UPDATE
instead of having all the properties as part of the signature for the post method, you can try using the model you have created:
public async Task<IActionResult> Create(student viewModel)
You then need to make sure your input items on the form have names which match up with the viewmodel (student):
<select asp-for="StudentId" asp-items="#(ViewBag.MumSports)">
if you do this, your properties should automatically bind to the viewModel when you hit the controller. Another benefit of doing it this way is that ModelState.IsValid will then look at all the attributes within that class and perform validation against them when you submit the form. This is particularly useful when setting fields as required using the [Required] attribute

Best programming practice of using DropDownList in ASP.Net MVC

I'm working with MVC 5 for a few months read a lot of articles, forums and documentation but always wondering what is better in the view;
1) binding data using static method of model like here
2) binding the same data using ViewData[index] which is set in Controller that with previous example will look like this
#Html.DropDownListFor(n => n.MyColorId, ViewData[index])
You want to use option 1, mainly because you want to use Strongly Type as much as possible, and fix the error at compile time.
In contrast, ViewData and ViewBag are dynamic, and compile could not catch error until run-time.
Here is the sample code I used in many applications -
Model
public class SampleModel
{
public string SelectedColorId { get; set; }
public IList<SelectListItem> AvailableColors { get; set; }
public SampleModel()
{
AvailableColors = new List<SelectListItem>();
}
}
View
#model DemoMvc.Models.SampleModel
#using (Html.BeginForm("Index", "Home"))
{
#Html.DropDownListFor(m => m.SelectedColorId, Model.AvailableColors)
<input type="submit" value="Submit"/>
}
Controller
public class HomeController : Controller
{
public ActionResult Index()
{
var model = new SampleModel
{
AvailableColors = GetColorListItems()
};
return View(model);
}
[HttpPost]
public ActionResult Index(SampleModel model)
{
if (ModelState.IsValid)
{
var colorId = model.SelectedColorId;
return View("Success");
}
// If we got this far, something failed, redisplay form
// ** IMPORTANT : Fill AvailableColors again; otherwise, DropDownList will be blank. **
model.AvailableColors = GetColorListItems();
return View(model);
}
private IList<SelectListItem> GetColorListItems()
{
// This could be from database.
return new List<SelectListItem>
{
new SelectListItem {Text = "Orange", Value = "1"},
new SelectListItem {Text = "Red", Value = "2"}
};
}
}
I would say, completely separate dropdown items from ViewData. Have your model contain a property for dropdown. Fill that in your controller and just bind it in the view like
ViewModel
class MyModel
{
public IEnumerable<SelectListItem> dropdowndata {get; set;}
}
Controller
public Actionresult MyAction(string id)
{
IEnumerable<data> mydata = callDALmethodtogetit();
Mymodel model = new MyModel
{
dropdowndata = mydata.Select(c => new SelectListItem
{
Value = c.Id.ToString(),
Text = c.Name
});
}
}
View
#Html.DropDownListFor(model => model.dropdowndata, Model.dropdowndata)

Get TextBox's value in compliance with selected RadioButton asp.net.mvc-4

I need to create a view with a form where is a group of RadioButtons with TextBox for each of them. Then I want the Model to be filled with value in TextBox and value of selected RadioButton. I faced to the problem that I can't send value of coresponding to selected RadioButton TextBox.
It looks like this
There is my Model
public class CertainAnswersViewModel
{
public int SelectedValue { get; set; }
public string TextAnswer { get; set; }
public bool IsInput { get; set; }
public List<CertainAnswer> CertainAnswers { get; set; }
}
View
#using MY_BUKEP.Areas.Survey.Models;
#model CertainAnswersViewModel
#using (Html.BeginForm())
{
foreach (var answer in Model.CertainAnswers)
{
#Html.RadioButtonFor(m => m.SelectedValue, answer.IdOption, new { id = "" })
#Html.TextBoxFor(m => m.TextAnswer);
<br />
}
<input type="submit" />
}
And there are two methods in Controller
[HttpGet]
public ViewResult Test()
{
CertainAnswer ca1 = new CertainAnswer() { IdOption = 1 };
CertainAnswer ca2 = new CertainAnswer() { IdOption = 2 };
CertainAnswersViewModel cavm = new CertainAnswersViewModel();
cavm.CertainAnswers = new List<CertainAnswer>();
cavm.CertainAnswers.Add(ca1);
cavm.CertainAnswers.Add(ca2);
return View("TestView", cavm);
}
[HttpPost]
public void Test(CertainAnswersViewModel cavm)
{
Answer a = new Answer();
a.val = cavm.TextAnswer;
a.idOption = cavm.SelectedValue;
}
Below is supposed result that I would like to achive
Would appreciate any help!
You current implementation is creating duplicate textboxes for the same property and when you submit the form only the value of the first textbox will be bound (if the user was to select the 3rd option and fill in the associated textbox, the value of TextAnswer will be null because the textbox associated with the 2nd option is empty. In addition your model(s) cannot generate the view you have shown in the second image because each CertainAnswer property also requires a value to indicate if an associated textbox is required (I'm assuming for some options, it may not be).
Your models would need to be (not I have change some class and property names to better describe what they represent)
public class PossibleAnswerVM
{
public int ID { get; set; }
public string Description { get; set; }
public bool RequireAdditionalText { get; set; }
}
public class QuestionVM
{
public int ID { get; set; }
public string Description { get; set; }
[Required(ErrorMesage = "Please select an option")]
public int SelectedAnswer { get; set; }
public string AdditionalText { get; set; }
public IEnumerable<PossibleAnswer> PossibleAnswers { get; set; }
}
and the code in your controller
QuestionVM model = new QuestionVM()
{
ID = 1,
Description = "If you could return to the past, what would you choose?",
PossibleAnswers = new List<PossibleAnswer>()
{
new PossibleAnswer(){ ID = 1, Description = "Apply to another university" },
new PossibleAnswer(){ ID = 2, Description = "Apply to the same ...", RequireAdditionalText = true }
}
};
return View(model);
and the view
#model QuestionVM
#using (Html.BeginForm())
{
#Html.HiddenFor(m => m.Question.ID)
#Html.DisplayFor(m => m.Question.Description)
foreach(var option in Model.PossibleAnswers)
{
<label>
#Html.RadioButtonFor(m => m.SelectedAnswer, option.ID, new { id = "" data_textrequired = option.RequireAdditionalText })
<span>#option.Description</span>
</label>
}
#Html.ValidationMessageFor(m => m.SelectedAnswer)
#Html.TextBoxFor(m => m.AdditionalText)
<input type="submit" value="Save" />
}
Note that a data-textrequired has been added so that you could use javascript to show/hide the textbox based on the selected option. You could also use javascript to position the textbox adjacent the selected option if necessary

MVC4 get list of checkboxes in controller

I have a list of checkboxes generated in the View using the following code:
using (Html.BeginForm("UpdateItems", "Home", FormMethod.Post)) {
foreach (myProject.Models.item t in ViewBag.Items)
{
<div>
#Html.CheckBox("chkT", t.selected, new { id = "chkT" + t.id })
#Html.Label(t.description)
</div>
}
<button type="submit" class="mfButton" value="SaveItemss">Save Changes</button>
}
What I need to is to be able to get the values of these generated checkboxes in the controller. So far I have the following:
public ActionResult UpdateItemss(List<bool> chkT)
{
return View();
}
However this being a boolean only give me true or false and the id of the values to which they belong. Is there a way get the name/value pair?
Thanks
Rather than using ViewBag, I would use strongly typed view. I would create a model and add the lists as property. My Models should look like:
public class Test
{
public int Id { get; set; }
public List<Item> Items { get; set; }
}
public class Item
{
public int Id { get; set; }
public bool Selected { get; set; }
public string Description { get; set; }
}
In the controller I am passing the model with dummy data:
public ActionResult Index()
{
Test model = new Test()
{
Id = 1,
Items = new List<Item>()
{
new Item {Id = 1, Selected = false, Description = "Item1"},
new Item {Id = 2, Selected = false, Description = "Item2"},
new Item {Id = 3, Selected = false, Description = "Item3"}
}
};
return View(model);
}
In my View I am using for loop to generate list of Items:
#model MVCTest.Models.Test
#using (Html.BeginForm("UpdateItems", "Home", FormMethod.Post)) {
#Html.HiddenFor(m=>m.Id)
for (int i = 0; i < Model.Items.Count; i++)
{
<div>
#Html.HiddenFor(m=>m.Items[i].Id)
#Html.CheckBoxFor(m=>m.Items[i].Selected, new {id = "checkbox_" + i} )
#Html.DisplayFor(m=>m.Items[i].Description)
</div>
}
<button type="submit" class="mfButton" value="SaveItemss">Save Changes</button>
}
In the controller I am catching the posted model and find all Items inside its Items property:
[HttpPost]
public ActionResult UpdateItems(Test model)
{
if (model != null)
{
// You can access model.Items here
//Do whatever you need
}
return View(model);
}
I would suggest to read this blog: ASP.NET Wire Format for Model Binding to Arrays, Lists, Collections, Dictionaries.

Categories