We Keep Coding

ASP.NET Core Razor Pages: Select multiple items from IEnumerable Dropdownlist

I have a dropdownlist that I've been using in a project that allows me to click a button on one of the objects in the list. The button then routes me to a new page given an ID from the object I select. I'm curious to see if anyone might know a way to modify my existing code to allow me to select multiple objects from a dropdownlist. It wouldn't let me route to a new page, instead, I would be selecting multiple objects and returning a list of their ID's which I could then allow changes to be made to the objects correlating to these IDs on the same page. For example, there could be a list of locations. I would then want to be able to select a checkbox on a few of those locations and fill in a few text boxes to enter in information like a city or state. Once the information is entered, I could click a submit button and the page would refresh and show the updated data.
Here is the code I have for the current dropdown list that I am using on a different page that allows me to select a single object and route to a new page with it. I am using ASP.NET Core 3.0 with Razor Pages.
ViewAssessment.cshtml:
#page
#model CustomerPageTest.Pages.View.ViewAssessmentModel
#{
ViewData["Title"] = "ViewAssessment";
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="col-md-offset-4 justify-content-center">
<h1 style="color:yellowgreen">View Assessment</h1>
</div>
<div>
<p align="right">
<a class="btn btn-dark"
asp-page="/Index">Back</a>
</p>
</div>
<form method="get">
<div class="form-group">
<div class="input-group">
<input type="search" placeholder="Search ID, Customer, Date Imported, vCenter, Imported By, or Notes" class="form-control" asp-for="SearchTerm" />
</div>
</div>
</form>
<table class="table">
<tr class="text-light" style="border-top: hidden !important">
<td>ID</td>
<td>Customer</td>
<td>Date Imported</td>
<td>vCenter</td>
<td>Imported By</td>
<td>Notes</td>
</tr>
#foreach (var assessment in Model.Assessments)
{
<tr>
<td class="text text-light">#assessment.assessment_id</td>
<td class="text text-light">#assessment.CustomerName</td>
<td class="text text-light">#assessment.imported_data_datetime</td>
<td class="text text-light">#assessment.vcenter</td>
<td class="text text-light">#assessment.UserName</td>
<td class="text text-light">#assessment.notes</td>
<td>
<a class="btn btn-dark"
asp-page="/View/EditAssessment" asp-route-assessmentId="#assessment.assessment_id">
<i class="glyphicon glyphicon-pencil"></i>
</a>
</td>
</tr>
}
</table>
This is the front end of the dropdownlist page. It goes through a list of objects called Assessments and there is a search bar that allows me to search through any of the objects my Assessment class contains.
ViewAssessment.cshtml.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Extensions.Configuration;
namespace CustomerPageTest.Pages.View
{
public class ViewAssessmentModel : PageModel
{
private readonly IAssessmentData assessmentData; //Allows access to Assessment interface
private readonly IConfiguration config;
[BindProperty(SupportsGet = true)]
public string SearchTerm { get; set; } //Search term for search bar
public IEnumerable<CustomerPageTest.AssessmentView> Assessments { get; set; } //Assessment that is used
public ViewAssessmentModel(IConfiguration config, IAssessmentData assessmentData)
{
this.config = config;
this.assessmentData = assessmentData;
}
public void OnGet()
{
Assessments = assessmentData.GetAssessmentsByName(SearchTerm);
bool intOrString = false; //If false, its a string, if true, its an int
try
{
int convertToInt = Int32.Parse(SearchTerm);
intOrString = true;
} catch (Exception) { }
if (intOrString) //Whole if statement is for the search bar, enables searching data in any column
Assessments = assessmentData.SearchAssessmentById(SearchTerm);
else
{
if (!assessmentData.IsNullOrEmpty(assessmentData.GetAssessmentsByName(SearchTerm)))
Assessments = assessmentData.GetAssessmentsByName(SearchTerm);
else if (!assessmentData.IsNullOrEmpty(assessmentData.SearchAssessmentByDate(SearchTerm)))
Assessments = assessmentData.SearchAssessmentByDate(SearchTerm);
else if (!assessmentData.IsNullOrEmpty(assessmentData.SearchAssessmentByCenter(SearchTerm)))
Assessments = assessmentData.SearchAssessmentByCenter(SearchTerm);
else if (!assessmentData.IsNullOrEmpty(assessmentData.SearchAssessmentByUser(SearchTerm)))
Assessments = assessmentData.SearchAssessmentByUser(SearchTerm);
else if (!assessmentData.IsNullOrEmpty(assessmentData.SearchAssessmentByUser(SearchTerm)))
Assessments = assessmentData.SearchAssessmentByUser(SearchTerm);
}
}
}
}
This is the backend of my dropdownlist page. The main part of it is in the OnGet() method which calls a lot of functions for the search bar. You'll notice an interface called IAssessmentData. This is what grabs the list of Assessments to print out and contains the functions that make the search bar work.
I hope I've explained the dropdownlist I currently have and how I want to modify it. Any ideas on how I could do this would be greatly appreciated!

I am not sure about checkboxes, but this could be an alternative to what you are trying and it will give less pain. It is about selecting multiple values from dropdown. After this you might not require checkbox, simply select multiple values from dropdownlist itself.
I am giving you my sample example that I had performed. You can then integrate this in your project as per your requirement. I have mentioned the steps you can perform just in case if you stuck.
Step - 1: Create a class for the values that you would like to populate in your dropdownlist. In my case, I am populating the Email Id of each user.
My Class:
public class UserInfo
{
public int Id { get; set; }
public string Email { get; set; }
}
Step - 2: In your controller,
Your Controller:
a) Create an instance of your DbContext
MyContext _context = new MyContext();
b) In your action method use your '_context' object to get the Email Ids and store it in a List (i.e. List) with an object userList, followed by using SelectList class that uses your userList, Your Primary Key, and Column You wish to populate as parameters of it. (See below code) Store this in a ViewBag.
public IActionResult Index()
{
List<UserInfo> userList = _context.UserInfo.ToList();
ViewBag.ShowMembers = new SelectList(userList, "Id", "Email");
return View();
}
Step - 3: Use the above ViewBag in your View as shown below:
Note: In your view, in order to select multiple records, you have to set multiple attribute.
Your View:
<select multiple asp-for="Email" id="Email" asp-items="ViewBag.ShowMembers" placeholder="select members" class="form-control w-50 dropdown">
</select>
Output:
Initially:
And after selecting multiple:
Hope this helps.

Passing list of dynamically created dropdownlists to controller in MVC

I have a MVC5 project with a form where the user can click and add new dropdowns dynamically, it uses select2 and ajax to get the posible values and filter...
//ViewModel
public class MyViewModel
{
public List<string> Skus { get; set; }
//Tried public List<List<string>> Skus { get; set; } w/no success
}
//MVC Razor view
<div id="SkuContainer">
Product variations: #Html.DropDownListFor(m => m.Skus, Enumerable.Empty<SelectListItem>(), "Select", new { multiple = "true", #class = "Skus", #id = "Skus1" })
</div>
<input id="btnAddSku" type="button" value="Add variations" class="btn btn-primary" />
<input id="btnRemoveSku" type="button" value="Remove variations" class="btn btn-danger" />
....
$(document).ready(function () {....
$("#btnAddSku").on("click", function () {
var i = 2;
var dropdown = "<select data-val='true' class='Skus' id=Skus" + i + " name=Skus style='width:1000px' multiple> </select >";
var VariationContainer = "<div id='variationsdiv'><br/> Product variations: " + dropdown + " </div>";
$("#SkuContainer").append(VariationContainer);
i++;
});
...
//Controller:
public ActionResult Confirm(MyViewModel model)
{
Debug.WriteLine(model.Skus ) // I get all the selected values, it works but I can't diferenciate each dropdown because of how the model is structured.
}
How can I set the model and the view to get a list of lists of selected values so I can diferentiate each dropdown?
Thank you

Passing an IEnumerable to a view to generate a form and then passing form data back to controller

I'm working on a project for my office. The end result I'm looking for is that a boilerplate letter is pulled from a database, the sections that need specific input are extracted, a form is generated from those sections, the form then returns user data, and the letter is rebuilt with the user data integrated into the text of the letter.
for example, the string pulled from the database would look like this
Claim #: |string^clmNum^Claim Number: | - Ref#: |string^RefNum^Reference Number: |
and would end up like the following after it was rebuilt with user data:
Claim #: 123456 - Ref#: 789012
This is what I have working so far...
The sections between the | are pulled out, split, and loaded into an IEnumerable
My foo model is:
public class Foo
{
public string InputType {get; set;}
public string InputName {get; set;}
public string InputLabel {get; set;}
}
I pass the IEnumerable to the view with a ViewModel
public class FormBuildViewModel
{
public IEnumerable<Foo> FooProperty {get; set;}
}
I then display the input items dynamically with the following Razor markup on my view.
<form>
#{ var e = Model.FooProperty.ToList();
foreach (var subItem in e)
{
<div class="FormGroup-items">
<label>#subItem.InputLabel</label>
<input name="#subItem.ObjName" type="text" />
</div>
}
}
<..// form button stuff //..>
</form>
Which creates the following HTML:
<form>
<div class="FormGroup-items">
<label>Claim Number: </label>
<input name="clmNum" type="text" />
</div>
<div class="FormGroup-items">
<label>Reference Number: </label>
<input name="RefNum" type="text" />
</div>
<..// button stuff //..>
</form>
I have everything working up to this point. I need to take the data entered on the dynamically created form and get it back to the controller in a manner that I can index to rebuild the string.
I've tried using the #html.beginform similar to this
#using (Html.BeginForm())
{
#for(int i=0; i<Model.Count; i++)
{
#Html.CheckBoxFor(m => m[i].IsActive, new { #value = Model[i].Id })
#Html.DisplayFor(m => m[i].Name)
}
<input type="submit" value="Save" />
}
but to use #Html.BeginForm you need to know the names of the items before runtime, and it doesn't seem to work with a dynamically created form like this.
The only thing I can think of is I need to load the form data into a List< T > and return that to the controller, but I can't think of a way to get C# to allow me to initialize a List< T > and load the values in the view. I know I've got to be missing something, but I'm kinda lost at this point. Any help would be appreciated.

Are you passing your viewmodel back to your page? This seems like you are setting the viewmodel with data atleast from a 5000 foot view:
[HttpGet]
public IActionResult MyCallMethod()
{
FooProperty = getmydatafromsomewhere();
return View();
}
Then your page would have a way to build appropriately
#model My.Name.Space.MyViewModel
#using (Html.BeginForm("Action", "Controller"))
{
#foreach (var item in #Model.FooProperty)
{
<div class="FormGroup-items">
<label asp-for="item.InputType" />
<input asp-for="item.InputType" class="form-control" />
</div>
//other data
}
}
I also assume you have a post setup on the controller.
[HttpPost]
public IActionResult MyCallMethod(MyViewModel viewModel)
{
//do something with the viewmodel here
//same page, somewhere else, do something else, etc.
}
You can use some tag helpers as well for your labels and inputs if you so chose:
#Html.LabelFor(m => item.InputType, new { #class="whateverIwant" })
#Html.TextBoxFor(m => item.InputType, new { #class="form-control" })

Incorrect List Model Binding indices when using HTML Helpers

this is a tricky one to explain, so I'll try bullet pointing.
Issue:
Dynamic rows (collection) available to user on View (add/delete)
User deletes row and saves (POST)
Collection passed back to controller with non-sequential indices
Stepping through code, everything looks fine, collection items, indices etc.
Once the page is rendered, items are not displaying correctly - They are all out by 1 and therefore duplicating the top item at the new 0 location.
What I've found:
This happens ONLY when using the HTML Helpers in Razor code.
If I use the traditional <input> elements (not ideal), it works fine.
Question:
Has anyone ever run into this issue before? Or does anyone know why this is happening, or what I'm doing wrong?
Please check out my code below and thanks for checking my question!
Controller:
[HttpGet]
public ActionResult Index()
{
List<Car> cars = new List<Car>
{
new Car { ID = 1, Make = "BMW 1", Model = "325" },
new Car { ID = 2, Make = "Land Rover 2", Model = "Range Rover" },
new Car { ID = 3, Make = "Audi 3", Model = "A3" },
new Car { ID = 4, Make = "Honda 4", Model = "Civic" }
};
CarModel model = new CarModel();
model.Cars = cars;
return View(model);
}
[HttpPost]
public ActionResult Index(CarModel model)
{
// This is for debugging purposes only
List<Car> savedCars = model.Cars;
return View(model);
}
Index.cshtml:
As you can see, I have "Make" and "Actual Make" inputs. One being a HTML Helper and the other a traditional HTML Input, respectively.
#using (Html.BeginForm())
{
<div class="col-md-4">
#for (int i = 0; i < Model.Cars.Count; i++)
{
<div id="car-row-#i" class="form-group row">
<br />
<hr />
<label class="control-label">Make (#i)</label>
#Html.TextBoxFor(m => m.Cars[i].Make, new { #id = "car-make-" + i, #class = "form-control" })
<label class="control-label">Actual Make</label>
<input class="form-control" id="car-make-#i" name="Cars[#i].Make" type="text" value="#Model.Cars[i].Make" />
<div>
<input type="hidden" name="Cars.Index" value="#i" />
</div>
<br />
<button id="delete-btn-#i" type="button" class="btn btn-sm btn-danger" onclick="DeleteCarRow(#i)">Delete Entry</button>
</div>
}
<div class="form-group">
<input type="submit" class="btn btn-sm btn-success" value="Submit" />
</div>
</div>
}
Javascript Delete Function
function DeleteCarRow(id) {
$("#car-row-" + id).remove();
}
What's happening in the UI:
Step 1 (delete row)
Step 2 (Submit form)
Step 3 (results)

The reason for this behavior is that the HtmlHelper methods use the value from ModelState (if one exists) to set the value attribute rather that the actual model value. The reason for this behavior is explained in the answer to TextBoxFor displaying initial value, not the value updated from code.
In your case, when you submit, the following values are added to ModelState
Cars[1].Make: Land Rover 2
Cars[2].Make: Audi 3
Cars[3].Make: Honda 4
Note that there is no value for Cars[0].Make because you deleted the first item in the view.
When you return the view, the collection now contains
Cars[0].Make: Land Rover 2
Cars[1].Make: Audi 3
Cars[2].Make: Honda 4
So in the first iteration of the loop, the TextBoxFor() method checks ModelState for a match, does not find one, and generates value="Land Rover 2" (i.e. the model value) and your manual input also reads the model value and sets value="Land Rover 2"
In the second iteration, the TextBoxFor() does find a match for Cars[1]Make in ModelState so it sets value="Land Rover 2" and manual inputs reads the model value and sets value="Audi 3".
I'm assuming this question is just to explain the behavior (in reality, you would save the data and then redirect to the GET method to display the new list), but you can generate the correct output when you return the view by calling ModelState.Clear() which will clear all ModelState values so that the TextBoxFor() generates the value attribute based on the model value.
Side note:You view contains a lot of bad practice, including polluting your markup with behavior (use Unobtrusive JavaScript), creating label element that do not behave as labels (clicking on them will not set focus to the associated control), unnecessary use of <br/> elements (use css to style your elements with margins etc) and unnecessary use of new { #id = "car-make-" + i }. The code in your loop can be
#for (int i = 0; i < Model.Cars.Count; i++)
{
<div class="form-group row">
<hr />
#Html.LabelFor(m => m.Cars[i].Make, "Make (#i)")
#Html.TextBoxFor(m => m.Cars[i].Make, new { #class = "form-control" })
....
<input type="hidden" name="Cars.Index" value="#i" />
<button type="button" class="btn btn-sm btn-danger delete">Delete Entry</button>
</div>
}
$('.delete').click(function() {
$(this).closest('.form-group').remove();
}

What can I do to come back to this previous view in C#/.NET?

I am pretty new in C# and .NET MVC framework and I have the following problem.
I have a first JQuery Mobile view that show a navbar containing some tabs. Into one of this tab I putted a ListView that show the element of a collection of DataModel.Vulnerability.Fix objects represented by the Model.VulnerabilityFixes into my model object. On the right of every element of the list I have put a button/link to delete the related Fix object that generate this row in the list.
This work fine and I obtain the following result (I post a screenshot):
This is the code of the previous tab (the one that show the Fix list):
<!-- TAB-2: FIXES, SOLUTION e MITIGATING STRATEGY: -->
<div id="tab-2" class="ui-body-d ui-content">
<h3>Fixes</h3>
<a href="#Url.Action("SearchCPE", "Asset", new { id = Model.Id })" data-icon="plus" data-inline="true" data-mini="true" data-role="button" >Aggungi un Fix</a>
<!-- Tabella contenente la lista delle fix: -->
<ul data-role="listview" data-inset="true" data-theme="b" data-split-icon="delete">
#foreach (DataModel.Vulnerability.Fix item in Model.VulnerabilityFixes)
{
<li><a href="#Url.Action("Details", "Product", new { Title = item.Title })">
<h2>#item.Title</h2>
<table style="width: 100%">
<tr>
<th>Id</th>
<th>FixName</th>
<th>Vendor</th>
<th>Version</th>
</tr>
<tr>
<td>#MyHelper.decodeNull(item.Id)</td>
<td>#MyHelper.decodeNull(item.FixName)</td>
<td>#MyHelper.decodeNull(item.Vendor)</td>
<td>#MyHelper.decodeNull(item.Version)</td>
</tr>
</table>
</a>
Delete
</li>
}
</ul>
</div>
<!-- /tab-2 -->
Ok, now I have a DeleteFix() method into the EditingController class that handle the request generated clicking od the Delete button.
This one:
public ActionResult DeleteFix(long vulnId, int currentFixId, string currentFixName)
{
DataModel.Vulnerability.Fix model = new DataModel.Vulnerability.Fix();
manager.openConnection();
try
{
model.Id = currentFixId;
model.FixName = currentFixName;
}
finally
{
manager.closeConnection();
}
return View(model);
}
This method show another view, the DeleteFix.cshtml file, that show a confirm window where is asked to the user to confirm the delete operation or if come back to the previous page, this is the code:
#model DataModel.Vulnerability.Fix
#{
ViewBag.Title = "DeleteFix";
Layout = "~/Views/Shared/MasterPageMobile.cshtml";
}
<h1>Delete Fix</h1>
<h2>Fix: #Model.Title (id: #Model.Id)</h2>
<p>
Confermare la cancellazione del fix "#Model.FixName" ?
</p>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<input type="hidden" name="id" value ="#Model.Id" />
<div data-role="controlgrup" data-type="horizontal" data-mini="true">
<a href="#Url.Action("Index", "Editing", new { id = Model.Id })" data-inline="true" data-mini="true" data-role="button" >Torna alla lista</a>
<a href="#Url.Action("Details", "Groups", new { id = Model.Id })" data-mini="true" data-inline="true" data-role="button" >Annulla</a>
<input type="submit" value="Delete" data-mini="true" data-inline="true" />
</div>
}
My problem is that I want that if the user click on the Torna alla lista button it have to be taken to the initial view that show the list of Fix object but I can't do it
Someone can help me to understand what am I missing? What can I do to obtain this result?
Tnx

Basically I would add a new property in the viewmodels used in the secondary views to have a trace of the primary url :
public string BackUrl { get; set; }
Maybe if you want this feature for more that I secondary view, you can create a base view model that all secondary viewmodels inherit.
Then, when calling a secondary view, just initialize the BackUrl property :
Delete
In the end, in the DeleteFix action, redirect to the BackUrl instead of redering the view (if the viewstate is valid :
public ActionResult DeleteFix(long vulnId, int currentFixId, string currentFixName)
{
if (ModelState.IsValid)
{
DataModel.Vulnerability.Fix model = new DataModel.Vulnerability.Fix();
manager.openConnection();
try
{
model.Id = currentFixId;
model.FixName = currentFixName;
}
finally
{
manager.closeConnection();
}
return Redirect(viewModel.BackUrl);
}
// Invalid viewstate, re-render the view
return View(model);
}