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

Question

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!

For multiple selects from dropdown, you can visit this link: select2.org/tagging which is a plugin you might be interested in. For installation or CDN links you can visit this link: select2.org/getting-started/installation — Rohan Rao
– Rohan Rao, Commented Jul 8, 2020 at 3:38
dropdownlist you mentioned,is it means table in your cshtml? Do you mean you want to have a checkbox before each piece of data in foreach?And the selected data can change to input,and then you can edit the data and click the button after the piece of data to submit it. — Yiyi You
– Yiyi You, Commented Jul 8, 2020 at 8:43
@YiyiYou, yes the dropdownlist gets printed by my table. I want to have a checkbox once a loop in the foreach loop since each loop is a new assessment. And then yes, there will be input boxes for each object on the assessment class that I can fill in. When I click submit the data will be changed on all the assessments I have selected. — CKneeland
– CKneeland, Commented Jul 8, 2020 at 13:12
@noobprogrammer, I didn't know about select2, that looks like a great way to do this. However, I looked through the links you sent and don't really understand how to implement them with the code I currently have. Would you be able to post some form of working solution with checkboxes using select2? — CKneeland
– CKneeland, Commented Jul 8, 2020 at 13:26

Rohan Rao · Accepted Answer · 2020-07-09 05:37:50Z

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.

This setup gives me a plain multiselect box, and not the dropdown variant. imgur.com/a/kEGCE0N What css libraries are you using to achieve this effect?

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related